@spaziodati/atoka-design-system 2.1.3 → 2.1.4

package/index.js

@@ -1,13 +1,13 @@
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("@fortawesome/free-brands-svg-icons/faFacebookF"), require("@fortawesome/free-brands-svg-icons/faLinkedinIn"), require("@fortawesome/free-brands-svg-icons/faTwitter"), require("@fortawesome/pro-light-svg-icons/faBars"), require("@fortawesome/pro-light-svg-icons/faBell"), require("@fortawesome/pro-light-svg-icons/faCheck"), require("@fortawesome/pro-light-svg-icons/faChevronDown"), require("@fortawesome/pro-light-svg-icons/faChevronLeft"), require("@fortawesome/pro-light-svg-icons/faChevronRight"), require("@fortawesome/pro-light-svg-icons/faChevronUp"), require("@fortawesome/pro-light-svg-icons/faEmptySet"), require("@fortawesome/pro-light-svg-icons/faInfoCircle"), require("@fortawesome/pro-light-svg-icons/faList"), require("@fortawesome/pro-light-svg-icons/faMinus"), require("@fortawesome/pro-light-svg-icons/faMinusCircle"), require("@fortawesome/pro-light-svg-icons/faPencil"), require("@fortawesome/pro-light-svg-icons/faPlus"), require("@fortawesome/pro-light-svg-icons/faPlusCircle"), require("@fortawesome/pro-light-svg-icons/faSearch"), require("@fortawesome/pro-light-svg-icons/faTh"), require("@fortawesome/pro-light-svg-icons/faTimes"), require("@fortawesome/pro-light-svg-icons/faTrash"), require("@fortawesome/pro-light-svg-icons/faUserNinja"), require("@fortawesome/pro-regular-svg-icons/faChevronDown"), require("@fortawesome/pro-regular-svg-icons/faEllipsisH"), require("@fortawesome/pro-solid-svg-icons/faCircle"), require("@fortawesome/react-fontawesome"), require("@nivo/bar"), require("@nivo/circle-packing"), require("@nivo/funnel"), require("@nivo/pie"), require("@nivo/sunburst"), require("@nivo/tooltip"), require("classnames"), require("leaflet"), require("leaflet-image"), require("react"), require("react-bootstrap/Alert"), require("react-bootstrap/Badge"), require("react-bootstrap/Button"), require("react-bootstrap/ButtonGroup"), require("react-bootstrap/Card"), require("react-bootstrap/Carousel"), require("react-bootstrap/Col"), require("react-bootstrap/Collapse"), require("react-bootstrap/Container"), require("react-bootstrap/Dropdown"), require("react-bootstrap/Form"), require("react-bootstrap/FormControl"), require("react-bootstrap/FormText"), require("react-bootstrap/InputGroup"), require("react-bootstrap/Jumbotron"), require("react-bootstrap/ListGroup"), require("react-bootstrap/Modal"), require("react-bootstrap/Nav"), require("react-bootstrap/Navbar"), require("react-bootstrap/Overlay"), require("react-bootstrap/OverlayTrigger"), require("react-bootstrap/Pagination"), require("react-bootstrap/Popover"), require("react-bootstrap/Row"), require("react-bootstrap/ToggleButton"), require("react-bootstrap/Tooltip"), require("react-datepicker"), require("react-dom"), require("react-select"), require("react-select/async"));
+		module.exports = factory(require("@fortawesome/free-brands-svg-icons/faFacebookF"), require("@fortawesome/free-brands-svg-icons/faLinkedinIn"), require("@fortawesome/free-brands-svg-icons/faTwitter"), require("@fortawesome/pro-light-svg-icons/faBars"), require("@fortawesome/pro-light-svg-icons/faBell"), require("@fortawesome/pro-light-svg-icons/faCheck"), require("@fortawesome/pro-light-svg-icons/faChevronDown"), require("@fortawesome/pro-light-svg-icons/faChevronLeft"), require("@fortawesome/pro-light-svg-icons/faChevronRight"), require("@fortawesome/pro-light-svg-icons/faChevronUp"), require("@fortawesome/pro-light-svg-icons/faEmptySet"), require("@fortawesome/pro-light-svg-icons/faInfoCircle"), require("@fortawesome/pro-light-svg-icons/faList"), require("@fortawesome/pro-light-svg-icons/faMinus"), require("@fortawesome/pro-light-svg-icons/faMinusCircle"), require("@fortawesome/pro-light-svg-icons/faPencil"), require("@fortawesome/pro-light-svg-icons/faPlus"), require("@fortawesome/pro-light-svg-icons/faPlusCircle"), require("@fortawesome/pro-light-svg-icons/faSearch"), require("@fortawesome/pro-light-svg-icons/faTh"), require("@fortawesome/pro-light-svg-icons/faTimes"), require("@fortawesome/pro-light-svg-icons/faTrash"), require("@fortawesome/pro-light-svg-icons/faUserNinja"), require("@fortawesome/pro-regular-svg-icons/faBellExclamation"), require("@fortawesome/pro-regular-svg-icons/faCheckCircle"), require("@fortawesome/pro-regular-svg-icons/faChevronDown"), require("@fortawesome/pro-regular-svg-icons/faEllipsisH"), require("@fortawesome/pro-regular-svg-icons/faExclamationTriangle"), require("@fortawesome/pro-regular-svg-icons/faInfoCircle"), require("@fortawesome/pro-solid-svg-icons/faCircle"), require("@fortawesome/react-fontawesome"), require("@nivo/bar"), require("@nivo/circle-packing"), require("@nivo/funnel"), require("@nivo/pie"), require("@nivo/sunburst"), require("@nivo/tooltip"), require("classnames"), require("leaflet"), require("leaflet-image"), require("react"), require("react-bootstrap/Alert"), require("react-bootstrap/Badge"), require("react-bootstrap/Button"), require("react-bootstrap/ButtonGroup"), require("react-bootstrap/Card"), require("react-bootstrap/Carousel"), require("react-bootstrap/Col"), require("react-bootstrap/Collapse"), require("react-bootstrap/Container"), require("react-bootstrap/Dropdown"), require("react-bootstrap/Form"), require("react-bootstrap/FormControl"), require("react-bootstrap/FormText"), require("react-bootstrap/InputGroup"), require("react-bootstrap/Jumbotron"), require("react-bootstrap/ListGroup"), require("react-bootstrap/Modal"), require("react-bootstrap/Nav"), require("react-bootstrap/Navbar"), require("react-bootstrap/Overlay"), require("react-bootstrap/OverlayTrigger"), require("react-bootstrap/Pagination"), require("react-bootstrap/Popover"), require("react-bootstrap/Row"), require("react-bootstrap/ToggleButton"), require("react-bootstrap/Tooltip"), require("react-datepicker"), require("react-dom"), require("react-select"), require("react-select/async"));
 	else if(typeof define === 'function' && define.amd)
-		define("atoka-design-system", ["@fortawesome/free-brands-svg-icons/faFacebookF", "@fortawesome/free-brands-svg-icons/faLinkedinIn", "@fortawesome/free-brands-svg-icons/faTwitter", "@fortawesome/pro-light-svg-icons/faBars", "@fortawesome/pro-light-svg-icons/faBell", "@fortawesome/pro-light-svg-icons/faCheck", "@fortawesome/pro-light-svg-icons/faChevronDown", "@fortawesome/pro-light-svg-icons/faChevronLeft", "@fortawesome/pro-light-svg-icons/faChevronRight", "@fortawesome/pro-light-svg-icons/faChevronUp", "@fortawesome/pro-light-svg-icons/faEmptySet", "@fortawesome/pro-light-svg-icons/faInfoCircle", "@fortawesome/pro-light-svg-icons/faList", "@fortawesome/pro-light-svg-icons/faMinus", "@fortawesome/pro-light-svg-icons/faMinusCircle", "@fortawesome/pro-light-svg-icons/faPencil", "@fortawesome/pro-light-svg-icons/faPlus", "@fortawesome/pro-light-svg-icons/faPlusCircle", "@fortawesome/pro-light-svg-icons/faSearch", "@fortawesome/pro-light-svg-icons/faTh", "@fortawesome/pro-light-svg-icons/faTimes", "@fortawesome/pro-light-svg-icons/faTrash", "@fortawesome/pro-light-svg-icons/faUserNinja", "@fortawesome/pro-regular-svg-icons/faChevronDown", "@fortawesome/pro-regular-svg-icons/faEllipsisH", "@fortawesome/pro-solid-svg-icons/faCircle", "@fortawesome/react-fontawesome", "@nivo/bar", "@nivo/circle-packing", "@nivo/funnel", "@nivo/pie", "@nivo/sunburst", "@nivo/tooltip", "classnames", "leaflet", "leaflet-image", "react", "react-bootstrap/Alert", "react-bootstrap/Badge", "react-bootstrap/Button", "react-bootstrap/ButtonGroup", "react-bootstrap/Card", "react-bootstrap/Carousel", "react-bootstrap/Col", "react-bootstrap/Collapse", "react-bootstrap/Container", "react-bootstrap/Dropdown", "react-bootstrap/Form", "react-bootstrap/FormControl", "react-bootstrap/FormText", "react-bootstrap/InputGroup", "react-bootstrap/Jumbotron", "react-bootstrap/ListGroup", "react-bootstrap/Modal", "react-bootstrap/Nav", "react-bootstrap/Navbar", "react-bootstrap/Overlay", "react-bootstrap/OverlayTrigger", "react-bootstrap/Pagination", "react-bootstrap/Popover", "react-bootstrap/Row", "react-bootstrap/ToggleButton", "react-bootstrap/Tooltip", "react-datepicker", "react-dom", "react-select", "react-select/async"], factory);
+		define("atoka-design-system", ["@fortawesome/free-brands-svg-icons/faFacebookF", "@fortawesome/free-brands-svg-icons/faLinkedinIn", "@fortawesome/free-brands-svg-icons/faTwitter", "@fortawesome/pro-light-svg-icons/faBars", "@fortawesome/pro-light-svg-icons/faBell", "@fortawesome/pro-light-svg-icons/faCheck", "@fortawesome/pro-light-svg-icons/faChevronDown", "@fortawesome/pro-light-svg-icons/faChevronLeft", "@fortawesome/pro-light-svg-icons/faChevronRight", "@fortawesome/pro-light-svg-icons/faChevronUp", "@fortawesome/pro-light-svg-icons/faEmptySet", "@fortawesome/pro-light-svg-icons/faInfoCircle", "@fortawesome/pro-light-svg-icons/faList", "@fortawesome/pro-light-svg-icons/faMinus", "@fortawesome/pro-light-svg-icons/faMinusCircle", "@fortawesome/pro-light-svg-icons/faPencil", "@fortawesome/pro-light-svg-icons/faPlus", "@fortawesome/pro-light-svg-icons/faPlusCircle", "@fortawesome/pro-light-svg-icons/faSearch", "@fortawesome/pro-light-svg-icons/faTh", "@fortawesome/pro-light-svg-icons/faTimes", "@fortawesome/pro-light-svg-icons/faTrash", "@fortawesome/pro-light-svg-icons/faUserNinja", "@fortawesome/pro-regular-svg-icons/faBellExclamation", "@fortawesome/pro-regular-svg-icons/faCheckCircle", "@fortawesome/pro-regular-svg-icons/faChevronDown", "@fortawesome/pro-regular-svg-icons/faEllipsisH", "@fortawesome/pro-regular-svg-icons/faExclamationTriangle", "@fortawesome/pro-regular-svg-icons/faInfoCircle", "@fortawesome/pro-solid-svg-icons/faCircle", "@fortawesome/react-fontawesome", "@nivo/bar", "@nivo/circle-packing", "@nivo/funnel", "@nivo/pie", "@nivo/sunburst", "@nivo/tooltip", "classnames", "leaflet", "leaflet-image", "react", "react-bootstrap/Alert", "react-bootstrap/Badge", "react-bootstrap/Button", "react-bootstrap/ButtonGroup", "react-bootstrap/Card", "react-bootstrap/Carousel", "react-bootstrap/Col", "react-bootstrap/Collapse", "react-bootstrap/Container", "react-bootstrap/Dropdown", "react-bootstrap/Form", "react-bootstrap/FormControl", "react-bootstrap/FormText", "react-bootstrap/InputGroup", "react-bootstrap/Jumbotron", "react-bootstrap/ListGroup", "react-bootstrap/Modal", "react-bootstrap/Nav", "react-bootstrap/Navbar", "react-bootstrap/Overlay", "react-bootstrap/OverlayTrigger", "react-bootstrap/Pagination", "react-bootstrap/Popover", "react-bootstrap/Row", "react-bootstrap/ToggleButton", "react-bootstrap/Tooltip", "react-datepicker", "react-dom", "react-select", "react-select/async"], factory);
 	else if(typeof exports === 'object')
-		exports["atoka-design-system"] = factory(require("@fortawesome/free-brands-svg-icons/faFacebookF"), require("@fortawesome/free-brands-svg-icons/faLinkedinIn"), require("@fortawesome/free-brands-svg-icons/faTwitter"), require("@fortawesome/pro-light-svg-icons/faBars"), require("@fortawesome/pro-light-svg-icons/faBell"), require("@fortawesome/pro-light-svg-icons/faCheck"), require("@fortawesome/pro-light-svg-icons/faChevronDown"), require("@fortawesome/pro-light-svg-icons/faChevronLeft"), require("@fortawesome/pro-light-svg-icons/faChevronRight"), require("@fortawesome/pro-light-svg-icons/faChevronUp"), require("@fortawesome/pro-light-svg-icons/faEmptySet"), require("@fortawesome/pro-light-svg-icons/faInfoCircle"), require("@fortawesome/pro-light-svg-icons/faList"), require("@fortawesome/pro-light-svg-icons/faMinus"), require("@fortawesome/pro-light-svg-icons/faMinusCircle"), require("@fortawesome/pro-light-svg-icons/faPencil"), require("@fortawesome/pro-light-svg-icons/faPlus"), require("@fortawesome/pro-light-svg-icons/faPlusCircle"), require("@fortawesome/pro-light-svg-icons/faSearch"), require("@fortawesome/pro-light-svg-icons/faTh"), require("@fortawesome/pro-light-svg-icons/faTimes"), require("@fortawesome/pro-light-svg-icons/faTrash"), require("@fortawesome/pro-light-svg-icons/faUserNinja"), require("@fortawesome/pro-regular-svg-icons/faChevronDown"), require("@fortawesome/pro-regular-svg-icons/faEllipsisH"), require("@fortawesome/pro-solid-svg-icons/faCircle"), require("@fortawesome/react-fontawesome"), require("@nivo/bar"), require("@nivo/circle-packing"), require("@nivo/funnel"), require("@nivo/pie"), require("@nivo/sunburst"), require("@nivo/tooltip"), require("classnames"), require("leaflet"), require("leaflet-image"), require("react"), require("react-bootstrap/Alert"), require("react-bootstrap/Badge"), require("react-bootstrap/Button"), require("react-bootstrap/ButtonGroup"), require("react-bootstrap/Card"), require("react-bootstrap/Carousel"), require("react-bootstrap/Col"), require("react-bootstrap/Collapse"), require("react-bootstrap/Container"), require("react-bootstrap/Dropdown"), require("react-bootstrap/Form"), require("react-bootstrap/FormControl"), require("react-bootstrap/FormText"), require("react-bootstrap/InputGroup"), require("react-bootstrap/Jumbotron"), require("react-bootstrap/ListGroup"), require("react-bootstrap/Modal"), require("react-bootstrap/Nav"), require("react-bootstrap/Navbar"), require("react-bootstrap/Overlay"), require("react-bootstrap/OverlayTrigger"), require("react-bootstrap/Pagination"), require("react-bootstrap/Popover"), require("react-bootstrap/Row"), require("react-bootstrap/ToggleButton"), require("react-bootstrap/Tooltip"), require("react-datepicker"), require("react-dom"), require("react-select"), require("react-select/async"));
+		exports["atoka-design-system"] = factory(require("@fortawesome/free-brands-svg-icons/faFacebookF"), require("@fortawesome/free-brands-svg-icons/faLinkedinIn"), require("@fortawesome/free-brands-svg-icons/faTwitter"), require("@fortawesome/pro-light-svg-icons/faBars"), require("@fortawesome/pro-light-svg-icons/faBell"), require("@fortawesome/pro-light-svg-icons/faCheck"), require("@fortawesome/pro-light-svg-icons/faChevronDown"), require("@fortawesome/pro-light-svg-icons/faChevronLeft"), require("@fortawesome/pro-light-svg-icons/faChevronRight"), require("@fortawesome/pro-light-svg-icons/faChevronUp"), require("@fortawesome/pro-light-svg-icons/faEmptySet"), require("@fortawesome/pro-light-svg-icons/faInfoCircle"), require("@fortawesome/pro-light-svg-icons/faList"), require("@fortawesome/pro-light-svg-icons/faMinus"), require("@fortawesome/pro-light-svg-icons/faMinusCircle"), require("@fortawesome/pro-light-svg-icons/faPencil"), require("@fortawesome/pro-light-svg-icons/faPlus"), require("@fortawesome/pro-light-svg-icons/faPlusCircle"), require("@fortawesome/pro-light-svg-icons/faSearch"), require("@fortawesome/pro-light-svg-icons/faTh"), require("@fortawesome/pro-light-svg-icons/faTimes"), require("@fortawesome/pro-light-svg-icons/faTrash"), require("@fortawesome/pro-light-svg-icons/faUserNinja"), require("@fortawesome/pro-regular-svg-icons/faBellExclamation"), require("@fortawesome/pro-regular-svg-icons/faCheckCircle"), require("@fortawesome/pro-regular-svg-icons/faChevronDown"), require("@fortawesome/pro-regular-svg-icons/faEllipsisH"), require("@fortawesome/pro-regular-svg-icons/faExclamationTriangle"), require("@fortawesome/pro-regular-svg-icons/faInfoCircle"), require("@fortawesome/pro-solid-svg-icons/faCircle"), require("@fortawesome/react-fontawesome"), require("@nivo/bar"), require("@nivo/circle-packing"), require("@nivo/funnel"), require("@nivo/pie"), require("@nivo/sunburst"), require("@nivo/tooltip"), require("classnames"), require("leaflet"), require("leaflet-image"), require("react"), require("react-bootstrap/Alert"), require("react-bootstrap/Badge"), require("react-bootstrap/Button"), require("react-bootstrap/ButtonGroup"), require("react-bootstrap/Card"), require("react-bootstrap/Carousel"), require("react-bootstrap/Col"), require("react-bootstrap/Collapse"), require("react-bootstrap/Container"), require("react-bootstrap/Dropdown"), require("react-bootstrap/Form"), require("react-bootstrap/FormControl"), require("react-bootstrap/FormText"), require("react-bootstrap/InputGroup"), require("react-bootstrap/Jumbotron"), require("react-bootstrap/ListGroup"), require("react-bootstrap/Modal"), require("react-bootstrap/Nav"), require("react-bootstrap/Navbar"), require("react-bootstrap/Overlay"), require("react-bootstrap/OverlayTrigger"), require("react-bootstrap/Pagination"), require("react-bootstrap/Popover"), require("react-bootstrap/Row"), require("react-bootstrap/ToggleButton"), require("react-bootstrap/Tooltip"), require("react-datepicker"), require("react-dom"), require("react-select"), require("react-select/async"));
 	else
-		root["atoka-design-system"] = factory(root["@fortawesome/free-brands-svg-icons/faFacebookF"], root["@fortawesome/free-brands-svg-icons/faLinkedinIn"], root["@fortawesome/free-brands-svg-icons/faTwitter"], root["@fortawesome/pro-light-svg-icons/faBars"], root["@fortawesome/pro-light-svg-icons/faBell"], root["@fortawesome/pro-light-svg-icons/faCheck"], root["@fortawesome/pro-light-svg-icons/faChevronDown"], root["@fortawesome/pro-light-svg-icons/faChevronLeft"], root["@fortawesome/pro-light-svg-icons/faChevronRight"], root["@fortawesome/pro-light-svg-icons/faChevronUp"], root["@fortawesome/pro-light-svg-icons/faEmptySet"], root["@fortawesome/pro-light-svg-icons/faInfoCircle"], root["@fortawesome/pro-light-svg-icons/faList"], root["@fortawesome/pro-light-svg-icons/faMinus"], root["@fortawesome/pro-light-svg-icons/faMinusCircle"], root["@fortawesome/pro-light-svg-icons/faPencil"], root["@fortawesome/pro-light-svg-icons/faPlus"], root["@fortawesome/pro-light-svg-icons/faPlusCircle"], root["@fortawesome/pro-light-svg-icons/faSearch"], root["@fortawesome/pro-light-svg-icons/faTh"], root["@fortawesome/pro-light-svg-icons/faTimes"], root["@fortawesome/pro-light-svg-icons/faTrash"], root["@fortawesome/pro-light-svg-icons/faUserNinja"], root["@fortawesome/pro-regular-svg-icons/faChevronDown"], root["@fortawesome/pro-regular-svg-icons/faEllipsisH"], root["@fortawesome/pro-solid-svg-icons/faCircle"], root["@fortawesome/react-fontawesome"], root["@nivo/bar"], root["@nivo/circle-packing"], root["@nivo/funnel"], root["@nivo/pie"], root["@nivo/sunburst"], root["@nivo/tooltip"], root["classnames"], root["leaflet"], root["leaflet-image"], root["react"], root["react-bootstrap/Alert"], root["react-bootstrap/Badge"], root["react-bootstrap/Button"], root["react-bootstrap/ButtonGroup"], root["react-bootstrap/Card"], root["react-bootstrap/Carousel"], root["react-bootstrap/Col"], root["react-bootstrap/Collapse"], root["react-bootstrap/Container"], root["react-bootstrap/Dropdown"], root["react-bootstrap/Form"], root["react-bootstrap/FormControl"], root["react-bootstrap/FormText"], root["react-bootstrap/InputGroup"], root["react-bootstrap/Jumbotron"], root["react-bootstrap/ListGroup"], root["react-bootstrap/Modal"], root["react-bootstrap/Nav"], root["react-bootstrap/Navbar"], root["react-bootstrap/Overlay"], root["react-bootstrap/OverlayTrigger"], root["react-bootstrap/Pagination"], root["react-bootstrap/Popover"], root["react-bootstrap/Row"], root["react-bootstrap/ToggleButton"], root["react-bootstrap/Tooltip"], root["react-datepicker"], root["react-dom"], root["react-select"], root["react-select/async"]);
-})(self, function(__WEBPACK_EXTERNAL_MODULE__6951__, __WEBPACK_EXTERNAL_MODULE__1980__, __WEBPACK_EXTERNAL_MODULE__7950__, __WEBPACK_EXTERNAL_MODULE__9368__, __WEBPACK_EXTERNAL_MODULE__2569__, __WEBPACK_EXTERNAL_MODULE__4600__, __WEBPACK_EXTERNAL_MODULE__1711__, __WEBPACK_EXTERNAL_MODULE__2705__, __WEBPACK_EXTERNAL_MODULE__3987__, __WEBPACK_EXTERNAL_MODULE__9153__, __WEBPACK_EXTERNAL_MODULE__3402__, __WEBPACK_EXTERNAL_MODULE__4997__, __WEBPACK_EXTERNAL_MODULE__1654__, __WEBPACK_EXTERNAL_MODULE__1235__, __WEBPACK_EXTERNAL_MODULE__8809__, __WEBPACK_EXTERNAL_MODULE__6466__, __WEBPACK_EXTERNAL_MODULE__5037__, __WEBPACK_EXTERNAL_MODULE__8761__, __WEBPACK_EXTERNAL_MODULE__8427__, __WEBPACK_EXTERNAL_MODULE__5797__, __WEBPACK_EXTERNAL_MODULE__6988__, __WEBPACK_EXTERNAL_MODULE__5538__, __WEBPACK_EXTERNAL_MODULE__6550__, __WEBPACK_EXTERNAL_MODULE__1349__, __WEBPACK_EXTERNAL_MODULE__3041__, __WEBPACK_EXTERNAL_MODULE__1326__, __WEBPACK_EXTERNAL_MODULE__5692__, __WEBPACK_EXTERNAL_MODULE__2895__, __WEBPACK_EXTERNAL_MODULE__3741__, __WEBPACK_EXTERNAL_MODULE__9179__, __WEBPACK_EXTERNAL_MODULE__7812__, __WEBPACK_EXTERNAL_MODULE__9503__, __WEBPACK_EXTERNAL_MODULE__5521__, __WEBPACK_EXTERNAL_MODULE__8310__, __WEBPACK_EXTERNAL_MODULE__4159__, __WEBPACK_EXTERNAL_MODULE__855__, __WEBPACK_EXTERNAL_MODULE__8156__, __WEBPACK_EXTERNAL_MODULE__5859__, __WEBPACK_EXTERNAL_MODULE__6997__, __WEBPACK_EXTERNAL_MODULE__8926__, __WEBPACK_EXTERNAL_MODULE__5901__, __WEBPACK_EXTERNAL_MODULE__2494__, __WEBPACK_EXTERNAL_MODULE__6514__, __WEBPACK_EXTERNAL_MODULE__5315__, __WEBPACK_EXTERNAL_MODULE__4440__, __WEBPACK_EXTERNAL_MODULE__4394__, __WEBPACK_EXTERNAL_MODULE__4976__, __WEBPACK_EXTERNAL_MODULE__8721__, __WEBPACK_EXTERNAL_MODULE__1082__, __WEBPACK_EXTERNAL_MODULE__8763__, __WEBPACK_EXTERNAL_MODULE__2476__, __WEBPACK_EXTERNAL_MODULE__3161__, __WEBPACK_EXTERNAL_MODULE__9034__, __WEBPACK_EXTERNAL_MODULE__7738__, __WEBPACK_EXTERNAL_MODULE__573__, __WEBPACK_EXTERNAL_MODULE__7917__, __WEBPACK_EXTERNAL_MODULE__3908__, __WEBPACK_EXTERNAL_MODULE__6043__, __WEBPACK_EXTERNAL_MODULE__9924__, __WEBPACK_EXTERNAL_MODULE__1968__, __WEBPACK_EXTERNAL_MODULE__3915__, __WEBPACK_EXTERNAL_MODULE__3778__, __WEBPACK_EXTERNAL_MODULE__8053__, __WEBPACK_EXTERNAL_MODULE__4731__, __WEBPACK_EXTERNAL_MODULE__7111__, __WEBPACK_EXTERNAL_MODULE__1738__, __WEBPACK_EXTERNAL_MODULE__1553__) {
+		root["atoka-design-system"] = factory(root["@fortawesome/free-brands-svg-icons/faFacebookF"], root["@fortawesome/free-brands-svg-icons/faLinkedinIn"], root["@fortawesome/free-brands-svg-icons/faTwitter"], root["@fortawesome/pro-light-svg-icons/faBars"], root["@fortawesome/pro-light-svg-icons/faBell"], root["@fortawesome/pro-light-svg-icons/faCheck"], root["@fortawesome/pro-light-svg-icons/faChevronDown"], root["@fortawesome/pro-light-svg-icons/faChevronLeft"], root["@fortawesome/pro-light-svg-icons/faChevronRight"], root["@fortawesome/pro-light-svg-icons/faChevronUp"], root["@fortawesome/pro-light-svg-icons/faEmptySet"], root["@fortawesome/pro-light-svg-icons/faInfoCircle"], root["@fortawesome/pro-light-svg-icons/faList"], root["@fortawesome/pro-light-svg-icons/faMinus"], root["@fortawesome/pro-light-svg-icons/faMinusCircle"], root["@fortawesome/pro-light-svg-icons/faPencil"], root["@fortawesome/pro-light-svg-icons/faPlus"], root["@fortawesome/pro-light-svg-icons/faPlusCircle"], root["@fortawesome/pro-light-svg-icons/faSearch"], root["@fortawesome/pro-light-svg-icons/faTh"], root["@fortawesome/pro-light-svg-icons/faTimes"], root["@fortawesome/pro-light-svg-icons/faTrash"], root["@fortawesome/pro-light-svg-icons/faUserNinja"], root["@fortawesome/pro-regular-svg-icons/faBellExclamation"], root["@fortawesome/pro-regular-svg-icons/faCheckCircle"], root["@fortawesome/pro-regular-svg-icons/faChevronDown"], root["@fortawesome/pro-regular-svg-icons/faEllipsisH"], root["@fortawesome/pro-regular-svg-icons/faExclamationTriangle"], root["@fortawesome/pro-regular-svg-icons/faInfoCircle"], root["@fortawesome/pro-solid-svg-icons/faCircle"], root["@fortawesome/react-fontawesome"], root["@nivo/bar"], root["@nivo/circle-packing"], root["@nivo/funnel"], root["@nivo/pie"], root["@nivo/sunburst"], root["@nivo/tooltip"], root["classnames"], root["leaflet"], root["leaflet-image"], root["react"], root["react-bootstrap/Alert"], root["react-bootstrap/Badge"], root["react-bootstrap/Button"], root["react-bootstrap/ButtonGroup"], root["react-bootstrap/Card"], root["react-bootstrap/Carousel"], root["react-bootstrap/Col"], root["react-bootstrap/Collapse"], root["react-bootstrap/Container"], root["react-bootstrap/Dropdown"], root["react-bootstrap/Form"], root["react-bootstrap/FormControl"], root["react-bootstrap/FormText"], root["react-bootstrap/InputGroup"], root["react-bootstrap/Jumbotron"], root["react-bootstrap/ListGroup"], root["react-bootstrap/Modal"], root["react-bootstrap/Nav"], root["react-bootstrap/Navbar"], root["react-bootstrap/Overlay"], root["react-bootstrap/OverlayTrigger"], root["react-bootstrap/Pagination"], root["react-bootstrap/Popover"], root["react-bootstrap/Row"], root["react-bootstrap/ToggleButton"], root["react-bootstrap/Tooltip"], root["react-datepicker"], root["react-dom"], root["react-select"], root["react-select/async"]);
+})(self, function(__WEBPACK_EXTERNAL_MODULE__6951__, __WEBPACK_EXTERNAL_MODULE__1980__, __WEBPACK_EXTERNAL_MODULE__7950__, __WEBPACK_EXTERNAL_MODULE__9368__, __WEBPACK_EXTERNAL_MODULE__2569__, __WEBPACK_EXTERNAL_MODULE__4600__, __WEBPACK_EXTERNAL_MODULE__1711__, __WEBPACK_EXTERNAL_MODULE__2705__, __WEBPACK_EXTERNAL_MODULE__3987__, __WEBPACK_EXTERNAL_MODULE__9153__, __WEBPACK_EXTERNAL_MODULE__3402__, __WEBPACK_EXTERNAL_MODULE__4997__, __WEBPACK_EXTERNAL_MODULE__1654__, __WEBPACK_EXTERNAL_MODULE__1235__, __WEBPACK_EXTERNAL_MODULE__8809__, __WEBPACK_EXTERNAL_MODULE__6466__, __WEBPACK_EXTERNAL_MODULE__5037__, __WEBPACK_EXTERNAL_MODULE__8761__, __WEBPACK_EXTERNAL_MODULE__8427__, __WEBPACK_EXTERNAL_MODULE__5797__, __WEBPACK_EXTERNAL_MODULE__6988__, __WEBPACK_EXTERNAL_MODULE__5538__, __WEBPACK_EXTERNAL_MODULE__6550__, __WEBPACK_EXTERNAL_MODULE__9870__, __WEBPACK_EXTERNAL_MODULE__631__, __WEBPACK_EXTERNAL_MODULE__1349__, __WEBPACK_EXTERNAL_MODULE__3041__, __WEBPACK_EXTERNAL_MODULE__2628__, __WEBPACK_EXTERNAL_MODULE__159__, __WEBPACK_EXTERNAL_MODULE__1326__, __WEBPACK_EXTERNAL_MODULE__5692__, __WEBPACK_EXTERNAL_MODULE__2895__, __WEBPACK_EXTERNAL_MODULE__3741__, __WEBPACK_EXTERNAL_MODULE__9179__, __WEBPACK_EXTERNAL_MODULE__7812__, __WEBPACK_EXTERNAL_MODULE__9503__, __WEBPACK_EXTERNAL_MODULE__5521__, __WEBPACK_EXTERNAL_MODULE__8310__, __WEBPACK_EXTERNAL_MODULE__4159__, __WEBPACK_EXTERNAL_MODULE__855__, __WEBPACK_EXTERNAL_MODULE__8156__, __WEBPACK_EXTERNAL_MODULE__5859__, __WEBPACK_EXTERNAL_MODULE__6997__, __WEBPACK_EXTERNAL_MODULE__8926__, __WEBPACK_EXTERNAL_MODULE__5901__, __WEBPACK_EXTERNAL_MODULE__2494__, __WEBPACK_EXTERNAL_MODULE__6514__, __WEBPACK_EXTERNAL_MODULE__5315__, __WEBPACK_EXTERNAL_MODULE__4440__, __WEBPACK_EXTERNAL_MODULE__4394__, __WEBPACK_EXTERNAL_MODULE__4976__, __WEBPACK_EXTERNAL_MODULE__8721__, __WEBPACK_EXTERNAL_MODULE__1082__, __WEBPACK_EXTERNAL_MODULE__8763__, __WEBPACK_EXTERNAL_MODULE__2476__, __WEBPACK_EXTERNAL_MODULE__3161__, __WEBPACK_EXTERNAL_MODULE__9034__, __WEBPACK_EXTERNAL_MODULE__7738__, __WEBPACK_EXTERNAL_MODULE__573__, __WEBPACK_EXTERNAL_MODULE__7917__, __WEBPACK_EXTERNAL_MODULE__3908__, __WEBPACK_EXTERNAL_MODULE__6043__, __WEBPACK_EXTERNAL_MODULE__9924__, __WEBPACK_EXTERNAL_MODULE__1968__, __WEBPACK_EXTERNAL_MODULE__3915__, __WEBPACK_EXTERNAL_MODULE__3778__, __WEBPACK_EXTERNAL_MODULE__8053__, __WEBPACK_EXTERNAL_MODULE__4731__, __WEBPACK_EXTERNAL_MODULE__7111__, __WEBPACK_EXTERNAL_MODULE__1738__, __WEBPACK_EXTERNAL_MODULE__1553__) {
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
@@ -2241,8 +2241,8 @@ var external_classnames_default = /*#__PURE__*/__webpack_require__.n(external_cl
 // EXTERNAL MODULE: external "react"
 var external_react_ = __webpack_require__(8156);
 var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
-// EXTERNAL MODULE: ./node_modules/react-transition-group/esm/CSSTransition.js + 5 modules
-var CSSTransition = __webpack_require__(1750);
+// EXTERNAL MODULE: ./node_modules/react-transition-group/esm/CSSTransition.js + 3 modules
+var CSSTransition = __webpack_require__(9114);
 // EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js
 var objectWithoutPropertiesLoose = __webpack_require__(7038);
 // EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/extends.js
@@ -3236,8 +3236,8 @@ __webpack_require__.d(__webpack_exports__, {
 // EXTERNAL MODULE: external "react"
 var external_react_ = __webpack_require__(8156);
 var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
-// EXTERNAL MODULE: ./node_modules/react-transition-group/esm/CSSTransition.js + 5 modules
-var CSSTransition = __webpack_require__(1750);
+// EXTERNAL MODULE: ./node_modules/react-transition-group/esm/CSSTransition.js + 3 modules
+var CSSTransition = __webpack_require__(9114);
 ;// CONCATENATED MODULE: ./src/components/FadeAnimation/FadeAnimation.tsx
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -10083,230 +10083,1142 @@ var Title = /** @class */ (function (_super) {
 
 /***/ }),
 
-/***/ 6237:
+/***/ 363:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  "ToggleButtonGroup": () => (/* reexport */ ToggleButtonGroup)
+  "Toast": () => (/* reexport */ Toast_Toast),
+  "ToastContainer": () => (/* reexport */ ToastContainer),
+  "ToastProps": () => (/* reexport */ Toasts_Toast_namespaceObject.ToastProps),
+  "ToastVariant": () => (/* reexport */ Toasts_Toast_namespaceObject.ToastVariant)
+});
+
+// NAMESPACE OBJECT: ./src/components/Toasts/Toast.tsx
+var Toasts_Toast_namespaceObject = {};
+__webpack_require__.r(Toasts_Toast_namespaceObject);
+__webpack_require__.d(Toasts_Toast_namespaceObject, {
+  "F": () => (Toast_Toast)
 });
 
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(8156);
-var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
-// EXTERNAL MODULE: ./node_modules/autobind-decorator/lib/esm/index.js
-var esm = __webpack_require__(6627);
 // EXTERNAL MODULE: external "classnames"
 var external_classnames_ = __webpack_require__(8310);
 var external_classnames_default = /*#__PURE__*/__webpack_require__.n(external_classnames_);
-// EXTERNAL MODULE: external "react-bootstrap/ButtonGroup"
-var ButtonGroup_ = __webpack_require__(5901);
-var ButtonGroup_default = /*#__PURE__*/__webpack_require__.n(ButtonGroup_);
-// EXTERNAL MODULE: external "react-bootstrap/ToggleButton"
-var ToggleButton_ = __webpack_require__(3778);
-var ToggleButton_default = /*#__PURE__*/__webpack_require__.n(ToggleButton_);
-// EXTERNAL MODULE: external "@fortawesome/react-fontawesome"
-var react_fontawesome_ = __webpack_require__(5692);
-// EXTERNAL MODULE: ./src/components/Tooltip/index.ts + 1 modules
-var Tooltip = __webpack_require__(1512);
-;// CONCATENATED MODULE: ./src/components/ToggleButtonGroup/ToggleButton.tsx
-var __extends = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(8156);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+;// CONCATENATED MODULE: ./node_modules/react-bootstrap/node_modules/@babel/runtime/helpers/esm/extends.js
+function extends_extends() {
+  extends_extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
 
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
 
+    return target;
+  };
 
+  return extends_extends.apply(this, arguments);
+}
+;// CONCATENATED MODULE: ./node_modules/react-bootstrap/node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
 
-var ToggleButton = /** @class */ (function (_super) {
-    __extends(ToggleButton, _super);
-    function ToggleButton() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ToggleButton.prototype.renderIcon = function () {
-        if (this.props.icon == null) {
-            return null;
-        }
-        return external_react_default().createElement(react_fontawesome_.FontAwesomeIcon, { icon: this.props.icon });
-    };
-    ToggleButton.prototype.renderLabelAndIcon = function () {
-        return (external_react_default().createElement("div", null,
-            external_react_default().createElement("div", { className: 'btn-children d-inline' }, this.props.children),
-            this.renderIcon()));
-    };
-    ToggleButton.prototype.renderButton = function () {
-        return (external_react_default().createElement((ToggleButton_default()), { className: 'atoka-toggle-btn text-center', type: this.props.type, value: this.props.value, checked: this.props.checked, onChange: this.props.onChange, disabled: this.props.disabled, block: this.props.sameSize }, this.renderLabelAndIcon()));
-    };
-    ToggleButton.prototype.render = function () {
-        if (this.props.tooltipMessage == null) {
-            return this.renderButton();
-        }
-        return (external_react_default().createElement(Tooltip.Tooltip, { placement: 'top', content: this.props.tooltipMessage }, this.renderButton()));
-    };
-    ToggleButton.displayName = 'ToggleButton';
-    return ToggleButton;
-}((external_react_default()).PureComponent));
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
 
+  return target;
+}
+;// CONCATENATED MODULE: ./node_modules/@restart/hooks/esm/useMounted.js
 
-;// CONCATENATED MODULE: ./src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
-var ToggleButtonGroup_extends = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (undefined && undefined.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
+/**
+ * Track whether a component is current mounted. Generally less preferable than
+ * properlly canceling effects so they don't run after a component is unmounted,
+ * but helpful in cases where that isn't feasible, such as a `Promise` resolution.
+ *
+ * @returns a function that returns the current isMounted state of the component
+ *
+ * ```ts
+ * const [data, setData] = useState(null)
+ * const isMounted = useMounted()
+ *
+ * useEffect(() => {
+ *   fetchdata().then((newData) => {
+ *      if (isMounted()) {
+ *        setData(newData);
+ *      }
+ *   })
+ * })
+ * ```
+ */
 
+function useMounted() {
+  var mounted = (0,external_react_.useRef)(true);
+  var isMounted = (0,external_react_.useRef)(function () {
+    return mounted.current;
+  });
+  (0,external_react_.useEffect)(function () {
+    return function () {
+      mounted.current = false;
+    };
+  }, []);
+  return isMounted.current;
+}
+;// CONCATENATED MODULE: ./node_modules/@restart/hooks/esm/useUpdatedRef.js
 
+/**
+ * Returns a ref that is immediately updated with the new value
+ *
+ * @param value The Ref value
+ * @category refs
+ */
 
+function useUpdatedRef(value) {
+  var valueRef = (0,external_react_.useRef)(value);
+  valueRef.current = value;
+  return valueRef;
+}
+;// CONCATENATED MODULE: ./node_modules/@restart/hooks/esm/useWillUnmount.js
 
 
+/**
+ * Attach a callback that fires when a component unmounts
+ *
+ * @param fn Handler to run when the component unmounts
+ * @category effects
+ */
 
-var ToggleButtonGroup = /** @class */ (function (_super) {
-    ToggleButtonGroup_extends(ToggleButtonGroup, _super);
-    function ToggleButtonGroup() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ToggleButtonGroup.prototype.onChange = function (value) {
-        if (this.props.onChange && value !== this.props.value) {
-            this.props.onChange(value);
-        }
-    };
-    ToggleButtonGroup.prototype.renderItem = function (option, index) {
-        var _this = this;
-        return (external_react_default().createElement(ToggleButton, { key: index, type: 'radio', value: option.value, icon: option.icon, onChange: function () { return _this.onChange(option.value); }, checked: this.props.value === option.value, disabled: option.disabled, tooltipMessage: option.tooltipMessage, sameSize: this.props.sameSize }, option.label));
-    };
-    ToggleButtonGroup.prototype.renderButtons = function () {
-        return this.props.options.map(this.renderItem);
-    };
-    ToggleButtonGroup.prototype.render = function () {
-        var className = external_classnames_default()(this.props.className, 'atoka-toggle-btn-group', 'btn-group-primary', "btn-group-" + this.props.size, {
-            'd-flex': this.props.sameSize === true,
-        });
-        return external_react_default().createElement((ButtonGroup_default()), { className: className }, this.renderButtons());
-    };
-    var _a, _b;
-    ToggleButtonGroup.displayName = 'ToggleButtonGroup';
-    ToggleButtonGroup.defaultProps = {
-        size: 'md',
-        options: [],
+function useWillUnmount(fn) {
+  var onUnmount = useUpdatedRef(fn);
+  (0,external_react_.useEffect)(function () {
+    return function () {
+      return onUnmount.current();
     };
-    __decorate([
-        esm/* default */.ZP,
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Object]),
-        __metadata("design:returntype", void 0)
-    ], ToggleButtonGroup.prototype, "onChange", null);
-    __decorate([
-        esm/* default */.ZP,
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Object, Number]),
-        __metadata("design:returntype", typeof (_a = typeof (external_react_default()) !== "undefined" && (external_react_default()).ReactNode) === "function" ? _a : Object)
-    ], ToggleButtonGroup.prototype, "renderItem", null);
-    __decorate([
-        esm/* default */.ZP,
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", typeof (_b = typeof (external_react_default()) !== "undefined" && (external_react_default()).ReactNode) === "function" ? _b : Object)
-    ], ToggleButtonGroup.prototype, "renderButtons", null);
-    return ToggleButtonGroup;
-}((external_react_default()).PureComponent));
-
+  }, []);
+}
+;// CONCATENATED MODULE: ./node_modules/@restart/hooks/esm/useTimeout.js
 
-;// CONCATENATED MODULE: ./src/components/ToggleButtonGroup/index.ts
 
 
+/*
+ * Browsers including Internet Explorer, Chrome, Safari, and Firefox store the
+ * delay as a 32-bit signed integer internally. This causes an integer overflow
+ * when using delays larger than 2,147,483,647 ms (about 24.8 days),
+ * resulting in the timeout being executed immediately.
+ *
+ * via: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
+ */
 
-/***/ }),
+var MAX_DELAY_MS = Math.pow(2, 31) - 1;
 
-/***/ 1512:
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+function setChainedTimeout(handleRef, fn, timeoutAtMs) {
+  var delayMs = timeoutAtMs - Date.now();
+  handleRef.current = delayMs <= MAX_DELAY_MS ? setTimeout(fn, delayMs) : setTimeout(function () {
+    return setChainedTimeout(handleRef, fn, timeoutAtMs);
+  }, MAX_DELAY_MS);
+}
+/**
+ * Returns a controller object for setting a timeout that is properly cleaned up
+ * once the component unmounts. New timeouts cancel and replace existing ones.
+ *
+ *
+ *
+ * ```tsx
+ * const { set, clear } = useTimeout();
+ * const [hello, showHello] = useState(false);
+ * //Display hello after 5 seconds
+ * set(() => showHello(true), 5000);
+ * return (
+ *   <div className="App">
+ *     {hello ? <h3>Hello</h3> : null}
+ *   </div>
+ * );
+ * ```
+ */
 
-"use strict";
 
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  "Tooltip": () => (/* reexport */ Tooltip)
-});
+function useTimeout() {
+  var isMounted = useMounted(); // types are confused between node and web here IDK
 
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(8156);
-var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
-// EXTERNAL MODULE: external "classnames"
-var external_classnames_ = __webpack_require__(8310);
-var external_classnames_default = /*#__PURE__*/__webpack_require__.n(external_classnames_);
-// EXTERNAL MODULE: external "react-bootstrap/OverlayTrigger"
-var OverlayTrigger_ = __webpack_require__(6043);
-var OverlayTrigger_default = /*#__PURE__*/__webpack_require__.n(OverlayTrigger_);
-;// CONCATENATED MODULE: ./src/components/Tooltip/Tooltip.tsx
-var __assign = (undefined && undefined.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
+  var handleRef = (0,external_react_.useRef)();
+  useWillUnmount(function () {
+    return clearTimeout(handleRef.current);
+  });
+  return (0,external_react_.useMemo)(function () {
+    var clear = function clear() {
+      return clearTimeout(handleRef.current);
     };
-    return __assign.apply(this, arguments);
-};
-var __rest = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 
+    function set(fn, delayMs) {
+      if (delayMs === void 0) {
+        delayMs = 0;
+      }
+
+      if (!isMounted()) return;
+      clear();
+
+      if (delayMs <= MAX_DELAY_MS) {
+        // For simplicity, if the timeout is short, just set a normal timeout.
+        handleRef.current = setTimeout(fn, delayMs);
+      } else {
+        setChainedTimeout(handleRef, fn, Date.now() + delayMs);
+      }
+    }
 
+    return {
+      set: set,
+      clear: clear
+    };
+  }, []);
+}
+// EXTERNAL MODULE: ./node_modules/react-transition-group/esm/Transition.js + 1 modules
+var Transition = __webpack_require__(6113);
+;// CONCATENATED MODULE: ./node_modules/dom-helpers/esm/ownerDocument.js
+function ownerDocument(node) {
+  return node && node.ownerDocument || document;
+}
+;// CONCATENATED MODULE: ./node_modules/dom-helpers/esm/ownerWindow.js
 
+function ownerWindow(node) {
+  var doc = ownerDocument(node);
+  return doc && doc.defaultView || window;
+}
+;// CONCATENATED MODULE: ./node_modules/dom-helpers/esm/getComputedStyle.js
 
+function getComputedStyle(node, psuedoElement) {
+  return ownerWindow(node).getComputedStyle(node, psuedoElement);
+}
+;// CONCATENATED MODULE: ./node_modules/dom-helpers/esm/hyphenate.js
+var rUpper = /([A-Z])/g;
+function hyphenate(string) {
+  return string.replace(rUpper, '-$1').toLowerCase();
+}
+;// CONCATENATED MODULE: ./node_modules/dom-helpers/esm/hyphenateStyle.js
 /**
- * ### Overview
- *
- * A tooltip is a short message which is triggered when the users hovers or clicks on a specific element inside the interface.
- *
- * ### Best practices
- * - Don’t use a tooltip when the information you want to place inside it is vital for the user to complete the task
- * - The text inside the tooltip should be brief but helpful
- * - Use tooltips to describe the action of icon-only buttons
- * - Make sure that the tooltip’s placement doesn’t hide its related content behind it
+ * Copyright 2013-2014, Facebook, Inc.
+ * All rights reserved.
+ * https://github.com/facebook/react/blob/2aeb8a2a6beb00617a4217f7f8284924fa2ad819/src/vendor/core/hyphenateStyleName.js
  */
-var Tooltip = external_react_default().memo(function (props) {
-    var _a;
-    var bs4v3Wrapper = document.querySelector('.bs4-v3-external-container'), placement = (_a = props.placement) !== null && _a !== void 0 ? _a : 'top', classNames = external_classnames_default()('tooltip atoka-tooltip', props.className, {
-        'top bs-tooltip-top': placement.indexOf('top') === 0,
-        'right bs-tooltip-right': placement.indexOf('right') === 0,
+
+var msPattern = /^ms-/;
+function hyphenateStyleName(string) {
+  return hyphenate(string).replace(msPattern, '-ms-');
+}
+;// CONCATENATED MODULE: ./node_modules/dom-helpers/esm/isTransform.js
+var supportedTransforms = /^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i;
+function isTransform(value) {
+  return !!(value && supportedTransforms.test(value));
+}
+;// CONCATENATED MODULE: ./node_modules/dom-helpers/esm/css.js
+
+
+
+
+function style(node, property) {
+  var css = '';
+  var transforms = '';
+
+  if (typeof property === 'string') {
+    return node.style.getPropertyValue(hyphenateStyleName(property)) || getComputedStyle(node).getPropertyValue(hyphenateStyleName(property));
+  }
+
+  Object.keys(property).forEach(function (key) {
+    var value = property[key];
+
+    if (!value && value !== 0) {
+      node.style.removeProperty(hyphenateStyleName(key));
+    } else if (isTransform(key)) {
+      transforms += key + "(" + value + ") ";
+    } else {
+      css += hyphenateStyleName(key) + ": " + value + ";";
+    }
+  });
+
+  if (transforms) {
+    css += "transform: " + transforms + ";";
+  }
+
+  node.style.cssText += ";" + css;
+}
+
+/* harmony default export */ const css = (style);
+;// CONCATENATED MODULE: ./node_modules/dom-helpers/esm/canUseDOM.js
+/* harmony default export */ const canUseDOM = (!!(typeof window !== 'undefined' && window.document && window.document.createElement));
+;// CONCATENATED MODULE: ./node_modules/dom-helpers/esm/addEventListener.js
+/* eslint-disable no-return-assign */
+
+var optionsSupported = false;
+var onceSupported = false;
+
+try {
+  var options = {
+    get passive() {
+      return optionsSupported = true;
+    },
+
+    get once() {
+      // eslint-disable-next-line no-multi-assign
+      return onceSupported = optionsSupported = true;
+    }
+
+  };
+
+  if (canUseDOM) {
+    window.addEventListener('test', options, options);
+    window.removeEventListener('test', options, true);
+  }
+} catch (e) {
+  /* */
+}
+/**
+ * An `addEventListener` ponyfill, supports the `once` option
+ */
+
+
+function addEventListener(node, eventName, handler, options) {
+  if (options && typeof options !== 'boolean' && !onceSupported) {
+    var once = options.once,
+        capture = options.capture;
+    var wrappedHandler = handler;
+
+    if (!onceSupported && once) {
+      wrappedHandler = handler.__once || function onceHandler(event) {
+        this.removeEventListener(eventName, onceHandler, capture);
+        handler.call(this, event);
+      };
+
+      handler.__once = wrappedHandler;
+    }
+
+    node.addEventListener(eventName, wrappedHandler, optionsSupported ? options : capture);
+  }
+
+  node.addEventListener(eventName, handler, options);
+}
+
+/* harmony default export */ const esm_addEventListener = (addEventListener);
+;// CONCATENATED MODULE: ./node_modules/dom-helpers/esm/removeEventListener.js
+function removeEventListener(node, eventName, handler, options) {
+  var capture = options && typeof options !== 'boolean' ? options.capture : options;
+  node.removeEventListener(eventName, handler, capture);
+
+  if (handler.__once) {
+    node.removeEventListener(eventName, handler.__once, capture);
+  }
+}
+
+/* harmony default export */ const esm_removeEventListener = (removeEventListener);
+;// CONCATENATED MODULE: ./node_modules/dom-helpers/esm/listen.js
+
+
+
+function listen(node, eventName, handler, options) {
+  esm_addEventListener(node, eventName, handler, options);
+  return function () {
+    esm_removeEventListener(node, eventName, handler, options);
+  };
+}
+
+/* harmony default export */ const esm_listen = (listen);
+;// CONCATENATED MODULE: ./node_modules/dom-helpers/esm/transitionEnd.js
+
+
+
+function parseDuration(node) {
+  var str = css(node, 'transitionDuration') || '';
+  var mult = str.indexOf('ms') === -1 ? 1000 : 1;
+  return parseFloat(str) * mult;
+}
+
+function triggerTransitionEnd(element) {
+  var evt = document.createEvent('HTMLEvents');
+  evt.initEvent('transitionend', true, true);
+  element.dispatchEvent(evt);
+}
+
+function emulateTransitionEnd(element, duration, padding) {
+  if (padding === void 0) {
+    padding = 5;
+  }
+
+  var called = false;
+  var handle = setTimeout(function () {
+    if (!called) triggerTransitionEnd(element);
+  }, duration + padding);
+  var remove = esm_listen(element, 'transitionend', function () {
+    called = true;
+  }, {
+    once: true
+  });
+  return function () {
+    clearTimeout(handle);
+    remove();
+  };
+}
+
+function transitionEnd(element, handler, duration, padding) {
+  if (duration == null) duration = parseDuration(element) || 0;
+  var removeEmulate = emulateTransitionEnd(element, duration, padding);
+  var remove = esm_listen(element, 'transitionend', handler);
+  return function () {
+    removeEmulate();
+    remove();
+  };
+}
+;// CONCATENATED MODULE: ./node_modules/react-bootstrap/esm/transitionEndListener.js
+
+
+
+function transitionEndListener_parseDuration(node, property) {
+  var str = css(node, property) || '';
+  var mult = str.indexOf('ms') === -1 ? 1000 : 1;
+  return parseFloat(str) * mult;
+}
+
+function transitionEndListener(element, handler) {
+  var duration = transitionEndListener_parseDuration(element, 'transitionDuration');
+  var delay = transitionEndListener_parseDuration(element, 'transitionDelay');
+  var remove = transitionEnd(element, function (e) {
+    if (e.target === element) {
+      remove();
+      handler(e);
+    }
+  }, duration + delay);
+}
+;// CONCATENATED MODULE: ./node_modules/react-bootstrap/esm/triggerBrowserReflow.js
+// reading a dimension prop will cause the browser to recalculate,
+// which will let our animations work
+function triggerBrowserReflow(node) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+  node.offsetHeight;
+}
+;// CONCATENATED MODULE: ./node_modules/react-bootstrap/esm/Fade.js
+
+
+
+var _fadeStyles;
+
+
+
+
+
+
+var defaultProps = {
+  "in": false,
+  timeout: 300,
+  mountOnEnter: false,
+  unmountOnExit: false,
+  appear: false
+};
+var fadeStyles = (_fadeStyles = {}, _fadeStyles[Transition/* ENTERING */.d0] = 'show', _fadeStyles[Transition/* ENTERED */.cn] = 'show', _fadeStyles);
+var Fade = /*#__PURE__*/external_react_default().forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      props = _objectWithoutPropertiesLoose(_ref, ["className", "children"]);
+
+  var handleEnter = (0,external_react_.useCallback)(function (node) {
+    triggerBrowserReflow(node);
+    if (props.onEnter) props.onEnter(node);
+  }, [props]);
+  return /*#__PURE__*/external_react_default().createElement(Transition/* default */.ZP, extends_extends({
+    ref: ref,
+    addEndListener: transitionEndListener
+  }, props, {
+    onEnter: handleEnter
+  }), function (status, innerProps) {
+    return /*#__PURE__*/external_react_default().cloneElement(children, extends_extends({}, innerProps, {
+      className: external_classnames_default()('fade', className, children.props.className, fadeStyles[status])
+    }));
+  });
+});
+Fade.defaultProps = defaultProps;
+Fade.displayName = 'Fade';
+/* harmony default export */ const esm_Fade = (Fade);
+;// CONCATENATED MODULE: ./node_modules/@restart/hooks/esm/useCommittedRef.js
+
+/**
+ * Creates a `Ref` whose value is updated in an effect, ensuring the most recent
+ * value is the one rendered with. Generally only required for Concurrent mode usage
+ * where previous work in `render()` may be discarded befor being used.
+ *
+ * This is safe to access in an event handler.
+ *
+ * @param value The `Ref` value
+ */
+
+function useCommittedRef(value) {
+  var ref = (0,external_react_.useRef)(value);
+  (0,external_react_.useEffect)(function () {
+    ref.current = value;
+  }, [value]);
+  return ref;
+}
+
+/* harmony default export */ const esm_useCommittedRef = (useCommittedRef);
+;// CONCATENATED MODULE: ./node_modules/@restart/hooks/esm/useEventCallback.js
+
+
+function useEventCallback(fn) {
+  var ref = esm_useCommittedRef(fn);
+  return (0,external_react_.useCallback)(function () {
+    return ref.current && ref.current.apply(ref, arguments);
+  }, [ref]);
+}
+;// CONCATENATED MODULE: ./node_modules/react-bootstrap/esm/ThemeProvider.js
+
+
+var ThemeContext = /*#__PURE__*/external_react_default().createContext({});
+var Consumer = ThemeContext.Consumer,
+    Provider = ThemeContext.Provider;
+
+function ThemeProvider(_ref) {
+  var prefixes = _ref.prefixes,
+      children = _ref.children;
+  var copiedPrefixes = useMemo(function () {
+    return _extends({}, prefixes);
+  }, [prefixes]);
+  return /*#__PURE__*/React.createElement(Provider, {
+    value: copiedPrefixes
+  }, children);
+}
+
+function useBootstrapPrefix(prefix, defaultPrefix) {
+  var prefixes = (0,external_react_.useContext)(ThemeContext);
+  return prefix || prefixes[defaultPrefix] || defaultPrefix;
+}
+
+function createBootstrapComponent(Component, opts) {
+  if (typeof opts === 'string') opts = {
+    prefix: opts
+  };
+  var isClassy = Component.prototype && Component.prototype.isReactComponent; // If it's a functional component make sure we don't break it with a ref
+
+  var _opts = opts,
+      prefix = _opts.prefix,
+      _opts$forwardRefAs = _opts.forwardRefAs,
+      forwardRefAs = _opts$forwardRefAs === void 0 ? isClassy ? 'ref' : 'innerRef' : _opts$forwardRefAs;
+  var Wrapped = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+    var props = _extends({}, _ref2);
+
+    props[forwardRefAs] = ref;
+    var bsPrefix = useBootstrapPrefix(props.bsPrefix, prefix);
+    return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+      bsPrefix: bsPrefix
+    }));
+  });
+  Wrapped.displayName = "Bootstrap(" + (Component.displayName || Component.name) + ")";
+  return Wrapped;
+}
+
+
+/* harmony default export */ const esm_ThemeProvider = ((/* unused pure expression or super */ null && (ThemeProvider)));
+// EXTERNAL MODULE: ./node_modules/prop-types/index.js
+var prop_types = __webpack_require__(8691);
+var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
+;// CONCATENATED MODULE: ./node_modules/react-bootstrap/esm/CloseButton.js
+
+
+
+
+
+var propTypes = {
+  label: (prop_types_default()).string.isRequired,
+  onClick: (prop_types_default()).func
+};
+var CloseButton_defaultProps = {
+  label: 'Close'
+};
+var CloseButton = /*#__PURE__*/external_react_default().forwardRef(function (_ref, ref) {
+  var label = _ref.label,
+      onClick = _ref.onClick,
+      className = _ref.className,
+      props = _objectWithoutPropertiesLoose(_ref, ["label", "onClick", "className"]);
+
+  return /*#__PURE__*/external_react_default().createElement("button", extends_extends({
+    ref: ref,
+    type: "button",
+    className: external_classnames_default()('close', className),
+    onClick: onClick
+  }, props), /*#__PURE__*/external_react_default().createElement("span", {
+    "aria-hidden": "true"
+  }, "\xD7"), /*#__PURE__*/external_react_default().createElement("span", {
+    className: "sr-only"
+  }, label));
+});
+CloseButton.displayName = 'CloseButton';
+CloseButton.propTypes = propTypes;
+CloseButton.defaultProps = CloseButton_defaultProps;
+/* harmony default export */ const esm_CloseButton = (CloseButton);
+;// CONCATENATED MODULE: ./node_modules/react-bootstrap/esm/ToastContext.js
+ // TODO: check
+
+var ToastContext = /*#__PURE__*/external_react_default().createContext({
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onClose: function onClose() {}
+});
+/* harmony default export */ const esm_ToastContext = (ToastContext);
+;// CONCATENATED MODULE: ./node_modules/react-bootstrap/esm/ToastHeader.js
+
+
+
+
+
+
+
+
+var ToastHeader_defaultProps = {
+  closeLabel: 'Close',
+  closeButton: true
+};
+var ToastHeader = /*#__PURE__*/external_react_default().forwardRef(function (_ref, ref) {
+  var bsPrefix = _ref.bsPrefix,
+      closeLabel = _ref.closeLabel,
+      closeButton = _ref.closeButton,
+      className = _ref.className,
+      children = _ref.children,
+      props = _objectWithoutPropertiesLoose(_ref, ["bsPrefix", "closeLabel", "closeButton", "className", "children"]);
+
+  bsPrefix = useBootstrapPrefix(bsPrefix, 'toast-header');
+  var context = (0,external_react_.useContext)(esm_ToastContext);
+  var handleClick = useEventCallback(function (e) {
+    if (context && context.onClose) {
+      context.onClose(e);
+    }
+  });
+  return /*#__PURE__*/external_react_default().createElement("div", extends_extends({
+    ref: ref
+  }, props, {
+    className: external_classnames_default()(bsPrefix, className)
+  }), children, closeButton && /*#__PURE__*/external_react_default().createElement(esm_CloseButton, {
+    label: closeLabel,
+    onClick: handleClick,
+    className: "ml-2 mb-1",
+    "data-dismiss": "toast"
+  }));
+});
+ToastHeader.displayName = 'ToastHeader';
+ToastHeader.defaultProps = ToastHeader_defaultProps;
+/* harmony default export */ const esm_ToastHeader = (ToastHeader);
+;// CONCATENATED MODULE: ./node_modules/dom-helpers/esm/camelize.js
+var rHyphen = /-(.)/g;
+function camelize(string) {
+  return string.replace(rHyphen, function (_, chr) {
+    return chr.toUpperCase();
+  });
+}
+;// CONCATENATED MODULE: ./node_modules/react-bootstrap/esm/createWithBsPrefix.js
+
+
+
+
+
+
+
+var pascalCase = function pascalCase(str) {
+  return str[0].toUpperCase() + camelize(str).slice(1);
+}; // TODO: emstricten & fix the typing here! `createWithBsPrefix<TElementType>...`
+
+
+function createWithBsPrefix(prefix, _temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
+      _ref$displayName = _ref.displayName,
+      displayName = _ref$displayName === void 0 ? pascalCase(prefix) : _ref$displayName,
+      Component = _ref.Component,
+      defaultProps = _ref.defaultProps;
+
+  var BsComponent = /*#__PURE__*/external_react_default().forwardRef(function (_ref2, ref) {
+    var className = _ref2.className,
+        bsPrefix = _ref2.bsPrefix,
+        _ref2$as = _ref2.as,
+        Tag = _ref2$as === void 0 ? Component || 'div' : _ref2$as,
+        props = _objectWithoutPropertiesLoose(_ref2, ["className", "bsPrefix", "as"]);
+
+    var resolvedPrefix = useBootstrapPrefix(bsPrefix, prefix);
+    return /*#__PURE__*/external_react_default().createElement(Tag, extends_extends({
+      ref: ref,
+      className: external_classnames_default()(className, resolvedPrefix)
+    }, props));
+  });
+  BsComponent.defaultProps = defaultProps;
+  BsComponent.displayName = displayName;
+  return BsComponent;
+}
+;// CONCATENATED MODULE: ./node_modules/react-bootstrap/esm/ToastBody.js
+
+/* harmony default export */ const ToastBody = (createWithBsPrefix('toast-body'));
+;// CONCATENATED MODULE: ./node_modules/react-bootstrap/esm/Toast.js
+
+
+
+
+
+
+
+
+
+
+var Toast = /*#__PURE__*/external_react_default().forwardRef(function (_ref, ref) {
+  var bsPrefix = _ref.bsPrefix,
+      className = _ref.className,
+      children = _ref.children,
+      _ref$transition = _ref.transition,
+      Transition = _ref$transition === void 0 ? esm_Fade : _ref$transition,
+      _ref$show = _ref.show,
+      show = _ref$show === void 0 ? true : _ref$show,
+      _ref$animation = _ref.animation,
+      animation = _ref$animation === void 0 ? true : _ref$animation,
+      _ref$delay = _ref.delay,
+      delay = _ref$delay === void 0 ? 3000 : _ref$delay,
+      _ref$autohide = _ref.autohide,
+      autohide = _ref$autohide === void 0 ? false : _ref$autohide,
+      onClose = _ref.onClose,
+      props = _objectWithoutPropertiesLoose(_ref, ["bsPrefix", "className", "children", "transition", "show", "animation", "delay", "autohide", "onClose"]);
+
+  bsPrefix = useBootstrapPrefix(bsPrefix, 'toast'); // We use refs for these, because we don't want to restart the autohide
+  // timer in case these values change.
+
+  var delayRef = (0,external_react_.useRef)(delay);
+  var onCloseRef = (0,external_react_.useRef)(onClose);
+  (0,external_react_.useEffect)(function () {
+    delayRef.current = delay;
+    onCloseRef.current = onClose;
+  }, [delay, onClose]);
+  var autohideTimeout = useTimeout();
+  var autohideToast = !!(autohide && show);
+  var autohideFunc = (0,external_react_.useCallback)(function () {
+    if (autohideToast) {
+      onCloseRef.current == null ? void 0 : onCloseRef.current();
+    }
+  }, [autohideToast]);
+  (0,external_react_.useEffect)(function () {
+    // Only reset timer if show or autohide changes.
+    autohideTimeout.set(autohideFunc, delayRef.current);
+  }, [autohideTimeout, autohideFunc]);
+  var toastContext = (0,external_react_.useMemo)(function () {
+    return {
+      onClose: onClose
+    };
+  }, [onClose]);
+  var hasAnimation = !!(Transition && animation);
+  var toast = /*#__PURE__*/external_react_default().createElement("div", extends_extends({}, props, {
+    ref: ref,
+    className: external_classnames_default()(bsPrefix, className, !hasAnimation && (show ? 'show' : 'hide')),
+    role: "alert",
+    "aria-live": "assertive",
+    "aria-atomic": "true"
+  }), children);
+  return /*#__PURE__*/external_react_default().createElement(esm_ToastContext.Provider, {
+    value: toastContext
+  }, hasAnimation && Transition ? /*#__PURE__*/external_react_default().createElement(Transition, {
+    "in": show,
+    unmountOnExit: true
+  }, toast) : toast);
+});
+Toast.displayName = 'Toast';
+/* harmony default export */ const esm_Toast = (Object.assign(Toast, {
+  Body: ToastBody,
+  Header: esm_ToastHeader
+}));
+// EXTERNAL MODULE: external "@fortawesome/pro-regular-svg-icons/faExclamationTriangle"
+var faExclamationTriangle_ = __webpack_require__(2628);
+// EXTERNAL MODULE: external "@fortawesome/pro-regular-svg-icons/faBellExclamation"
+var faBellExclamation_ = __webpack_require__(9870);
+// EXTERNAL MODULE: external "@fortawesome/pro-regular-svg-icons/faCheckCircle"
+var faCheckCircle_ = __webpack_require__(631);
+// EXTERNAL MODULE: external "@fortawesome/pro-regular-svg-icons/faInfoCircle"
+var faInfoCircle_ = __webpack_require__(159);
+// EXTERNAL MODULE: ./src/components/Utils/Utils.tsx
+var Utils = __webpack_require__(5654);
+// EXTERNAL MODULE: external "@fortawesome/react-fontawesome"
+var react_fontawesome_ = __webpack_require__(5692);
+;// CONCATENATED MODULE: ./src/components/Toasts/ToastHeader.tsx
+
+
+
+var ToastHeader_ToastHeader = external_react_default().memo(function (props) { return (external_react_default().createElement(esm_ToastHeader, { bsPrefix: 'oniru-toast-header', className: 'd-flex align-items-center' },
+    external_react_default().createElement(react_fontawesome_.FontAwesomeIcon, { className: 'mr-2', icon: props.icon }),
+    external_react_default().createElement("div", { className: 'w-100 text-truncate' }, props.children))); });
+ToastHeader_ToastHeader.displayName = 'ToastHeader';
+
+;// CONCATENATED MODULE: ./src/components/Toasts/Toast.tsx
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+
+
+
+
+
+
+
+
+
+/**
+ *
+ * ### Overview
+ * `Toasts` are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.
+ *
+ * There are different types of toasts depending on the message they must show:
+ *
+ * - **Danger**: this toast indicates a potentially negative action that the user must take notice of
+ * - **Warning**: this toast tells the user to proceed with caution with their actions on the platform
+ * - **Success**: this toast is indicative that the user just performed a successful or positive action
+ * - **Info**: this toast has the scope of letting the user know about a neutral and informative change or action on Atoka
+ *
+ * ### Best practices
+ * Use toasts to notify the user of information that is either time-sensitive or relevant to the action the user is performing
+ *
+ * DEVELOPER NOTE: For more information about the props, check [react bootstrap](https://react-bootstrap.netlify.app/components/toasts/#toasts)
+ */
+var Toast_Toast = /** @class */ (function (_super) {
+    __extends(Toast, _super);
+    function Toast() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.fromVariantToIcon = {
+            danger: faExclamationTriangle_.faExclamationTriangle,
+            warning: faBellExclamation_.faBellExclamation,
+            info: faInfoCircle_.faInfoCircle,
+            success: faCheckCircle_.faCheckCircle,
+        };
+        return _this;
+    }
+    Toast.prototype.getIcon = function () {
+        var _a, _b, _c;
+        if (this.props.icon != null) {
+            return this.props.icon;
+        }
+        var icon = (_a = this.fromVariantToIcon) === null || _a === void 0 ? void 0 : _a[(_c = (_b = this.props) === null || _b === void 0 ? void 0 : _b.variant) !== null && _c !== void 0 ? _c : 'light'];
+        return icon;
+    };
+    Toast.prototype.renderHeader = function (element) {
+        var header = (0,Utils/* findChildByComponent */.z8)(element, ToastHeader_ToastHeader);
+        return external_react_default().createElement(header.type, __assign({}, header.props, { icon: this.getIcon() }));
+    };
+    Toast.prototype.renderBody = function (element) {
+        return external_react_default().createElement("div", null, (0,Utils/* findChildByComponent */.z8)(element, esm_Toast.Body));
+    };
+    Toast.prototype.renderContent = function () {
+        var _this = this;
+        var ret = [], includedComponents = { ToastHeader: false, ToastBody: false };
+        external_react_default().Children.forEach(this.props.children, function (element) {
+            if (element.type) {
+                includedComponents[element.type.displayName] = true;
+                if ((element === null || element === void 0 ? void 0 : element.type) === ToastHeader_ToastHeader) {
+                    ret.push(_this.renderHeader(element));
+                }
+                if ((element === null || element === void 0 ? void 0 : element.type) === esm_Toast.Body) {
+                    ret.push(_this.renderBody(element));
+                }
+            }
+            else {
+                ret.push(element);
+            }
+        });
+        if (!includedComponents.ToastHeader) {
+            console.warn('You have to include a Header');
+            return external_react_default().createElement("h1", null, "Error!");
+        }
+        if (ret.length === 0) {
+            return null;
+        }
+        return ret;
+    };
+    Toast.prototype.render = function () {
+        var className = external_classnames_default()('py-2 px-3', 'oniru-toast', this.props.className, "variant-" + this.props.variant);
+        return (external_react_default().createElement(esm_Toast, __assign({}, this.props, { className: className }), this.renderContent()));
+    };
+    Toast.displayName = 'Toast';
+    Toast.Header = ToastHeader_ToastHeader;
+    Toast.Body = esm_Toast.Body;
+    Toast.defaultProps = {
+        variant: 'info',
+    };
+    return Toast;
+}((external_react_default()).PureComponent));
+/* harmony default export */ const Toasts_Toast = ((/* unused pure expression or super */ null && (Toast_Toast)));
+
+
+// EXTERNAL MODULE: ./src/components/Bs4V3Wrapper/index.ts + 1 modules
+var Bs4V3Wrapper = __webpack_require__(4882);
+;// CONCATENATED MODULE: ./src/components/Toasts/ToastContainer.tsx
+
+
+
+
+var ToastContainer = external_react_default().memo(function (props) {
+    var className = external_classnames_default()('oniru-toast-container', 'position-absolute pt-2', props.className);
+    return (external_react_default().createElement(Bs4V3Wrapper.Bs4V3Wrapper, null,
+        external_react_default().createElement("div", { className: className }, props.children)));
+});
+ToastContainer.displayName = 'ToastContainer';
+
+;// CONCATENATED MODULE: ./src/components/Toasts/index.ts
+// use the star because of this issue: https://github.com/babel/babel-loader/issues/603
+
+
+
+
+/***/ }),
+
+/***/ 6237:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "ToggleButtonGroup": () => (/* reexport */ ToggleButtonGroup)
+});
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(8156);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+// EXTERNAL MODULE: ./node_modules/autobind-decorator/lib/esm/index.js
+var esm = __webpack_require__(6627);
+// EXTERNAL MODULE: external "classnames"
+var external_classnames_ = __webpack_require__(8310);
+var external_classnames_default = /*#__PURE__*/__webpack_require__.n(external_classnames_);
+// EXTERNAL MODULE: external "react-bootstrap/ButtonGroup"
+var ButtonGroup_ = __webpack_require__(5901);
+var ButtonGroup_default = /*#__PURE__*/__webpack_require__.n(ButtonGroup_);
+// EXTERNAL MODULE: external "react-bootstrap/ToggleButton"
+var ToggleButton_ = __webpack_require__(3778);
+var ToggleButton_default = /*#__PURE__*/__webpack_require__.n(ToggleButton_);
+// EXTERNAL MODULE: external "@fortawesome/react-fontawesome"
+var react_fontawesome_ = __webpack_require__(5692);
+// EXTERNAL MODULE: ./src/components/Tooltip/index.ts + 1 modules
+var Tooltip = __webpack_require__(1512);
+;// CONCATENATED MODULE: ./src/components/ToggleButtonGroup/ToggleButton.tsx
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+
+
+
+
+var ToggleButton = /** @class */ (function (_super) {
+    __extends(ToggleButton, _super);
+    function ToggleButton() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ToggleButton.prototype.renderIcon = function () {
+        if (this.props.icon == null) {
+            return null;
+        }
+        return external_react_default().createElement(react_fontawesome_.FontAwesomeIcon, { icon: this.props.icon });
+    };
+    ToggleButton.prototype.renderLabelAndIcon = function () {
+        return (external_react_default().createElement("div", null,
+            external_react_default().createElement("div", { className: 'btn-children d-inline' }, this.props.children),
+            this.renderIcon()));
+    };
+    ToggleButton.prototype.renderButton = function () {
+        return (external_react_default().createElement((ToggleButton_default()), { className: 'atoka-toggle-btn text-center', type: this.props.type, value: this.props.value, checked: this.props.checked, onChange: this.props.onChange, disabled: this.props.disabled, block: this.props.sameSize }, this.renderLabelAndIcon()));
+    };
+    ToggleButton.prototype.render = function () {
+        if (this.props.tooltipMessage == null) {
+            return this.renderButton();
+        }
+        return (external_react_default().createElement(Tooltip.Tooltip, { placement: 'top', content: this.props.tooltipMessage }, this.renderButton()));
+    };
+    ToggleButton.displayName = 'ToggleButton';
+    return ToggleButton;
+}((external_react_default()).PureComponent));
+
+
+;// CONCATENATED MODULE: ./src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
+var ToggleButtonGroup_extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+
+
+
+
+
+
+var ToggleButtonGroup = /** @class */ (function (_super) {
+    ToggleButtonGroup_extends(ToggleButtonGroup, _super);
+    function ToggleButtonGroup() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ToggleButtonGroup.prototype.onChange = function (value) {
+        if (this.props.onChange && value !== this.props.value) {
+            this.props.onChange(value);
+        }
+    };
+    ToggleButtonGroup.prototype.renderItem = function (option, index) {
+        var _this = this;
+        return (external_react_default().createElement(ToggleButton, { key: index, type: 'radio', value: option.value, icon: option.icon, onChange: function () { return _this.onChange(option.value); }, checked: this.props.value === option.value, disabled: option.disabled, tooltipMessage: option.tooltipMessage, sameSize: this.props.sameSize }, option.label));
+    };
+    ToggleButtonGroup.prototype.renderButtons = function () {
+        return this.props.options.map(this.renderItem);
+    };
+    ToggleButtonGroup.prototype.render = function () {
+        var className = external_classnames_default()(this.props.className, 'atoka-toggle-btn-group', 'btn-group-primary', "btn-group-" + this.props.size, {
+            'd-flex': this.props.sameSize === true,
+        });
+        return external_react_default().createElement((ButtonGroup_default()), { className: className }, this.renderButtons());
+    };
+    var _a, _b;
+    ToggleButtonGroup.displayName = 'ToggleButtonGroup';
+    ToggleButtonGroup.defaultProps = {
+        size: 'md',
+        options: [],
+    };
+    __decorate([
+        esm/* default */.ZP,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], ToggleButtonGroup.prototype, "onChange", null);
+    __decorate([
+        esm/* default */.ZP,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Number]),
+        __metadata("design:returntype", typeof (_a = typeof (external_react_default()) !== "undefined" && (external_react_default()).ReactNode) === "function" ? _a : Object)
+    ], ToggleButtonGroup.prototype, "renderItem", null);
+    __decorate([
+        esm/* default */.ZP,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", typeof (_b = typeof (external_react_default()) !== "undefined" && (external_react_default()).ReactNode) === "function" ? _b : Object)
+    ], ToggleButtonGroup.prototype, "renderButtons", null);
+    return ToggleButtonGroup;
+}((external_react_default()).PureComponent));
+
+
+;// CONCATENATED MODULE: ./src/components/ToggleButtonGroup/index.ts
+
+
+
+/***/ }),
+
+/***/ 1512:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "Tooltip": () => (/* reexport */ Tooltip)
+});
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(8156);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+// EXTERNAL MODULE: external "classnames"
+var external_classnames_ = __webpack_require__(8310);
+var external_classnames_default = /*#__PURE__*/__webpack_require__.n(external_classnames_);
+// EXTERNAL MODULE: external "react-bootstrap/OverlayTrigger"
+var OverlayTrigger_ = __webpack_require__(6043);
+var OverlayTrigger_default = /*#__PURE__*/__webpack_require__.n(OverlayTrigger_);
+;// CONCATENATED MODULE: ./src/components/Tooltip/Tooltip.tsx
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+
+
+
+
+/**
+ * ### Overview
+ *
+ * A tooltip is a short message which is triggered when the users hovers or clicks on a specific element inside the interface.
+ *
+ * ### Best practices
+ * - Don’t use a tooltip when the information you want to place inside it is vital for the user to complete the task
+ * - The text inside the tooltip should be brief but helpful
+ * - Use tooltips to describe the action of icon-only buttons
+ * - Make sure that the tooltip’s placement doesn’t hide its related content behind it
+ */
+var Tooltip = external_react_default().memo(function (props) {
+    var _a;
+    var bs4v3Wrapper = document.querySelector('.bs4-v3-external-container'), placement = (_a = props.placement) !== null && _a !== void 0 ? _a : 'top', classNames = external_classnames_default()('tooltip atoka-tooltip', props.className, {
+        'top bs-tooltip-top': placement.indexOf('top') === 0,
+        'right bs-tooltip-right': placement.indexOf('right') === 0,
         'bottom bs-tooltip-bottom': placement.indexOf('bottom') === 0,
         'left bs-tooltip-left': placement.indexOf('left') === 0,
     });
@@ -11016,8 +11928,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "getRenderStatisticsTooltip": () => (/* reexport safe */ _StatisticsTooltip__WEBPACK_IMPORTED_MODULE_45__.getRenderStatisticsTooltip),
 /* harmony export */   "TabSwitcher": () => (/* reexport safe */ _TabSwitcher__WEBPACK_IMPORTED_MODULE_46__.TabSwitcher),
 /* harmony export */   "Title": () => (/* reexport safe */ _Title__WEBPACK_IMPORTED_MODULE_47__.Title),
-/* harmony export */   "ToggleButtonGroup": () => (/* reexport safe */ _ToggleButtonGroup__WEBPACK_IMPORTED_MODULE_48__.ToggleButtonGroup),
-/* harmony export */   "Tooltip": () => (/* reexport safe */ _Tooltip__WEBPACK_IMPORTED_MODULE_49__.Tooltip)
+/* harmony export */   "Toast": () => (/* reexport safe */ _Toasts__WEBPACK_IMPORTED_MODULE_48__.Toast),
+/* harmony export */   "ToastContainer": () => (/* reexport safe */ _Toasts__WEBPACK_IMPORTED_MODULE_48__.ToastContainer),
+/* harmony export */   "ToastProps": () => (/* reexport safe */ _Toasts__WEBPACK_IMPORTED_MODULE_48__.ToastProps),
+/* harmony export */   "ToastVariant": () => (/* reexport safe */ _Toasts__WEBPACK_IMPORTED_MODULE_48__.ToastVariant),
+/* harmony export */   "ToggleButtonGroup": () => (/* reexport safe */ _ToggleButtonGroup__WEBPACK_IMPORTED_MODULE_49__.ToggleButtonGroup),
+/* harmony export */   "Tooltip": () => (/* reexport safe */ _Tooltip__WEBPACK_IMPORTED_MODULE_50__.Tooltip)
 /* harmony export */ });
 /* harmony import */ var _Bs4V3Wrapper__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4882);
 /* harmony import */ var _AddableItems__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2044);
@@ -11068,8 +11984,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _StatisticsTooltip__WEBPACK_IMPORTED_MODULE_45__ = __webpack_require__(8805);
 /* harmony import */ var _TabSwitcher__WEBPACK_IMPORTED_MODULE_46__ = __webpack_require__(3084);
 /* harmony import */ var _Title__WEBPACK_IMPORTED_MODULE_47__ = __webpack_require__(9190);
-/* harmony import */ var _ToggleButtonGroup__WEBPACK_IMPORTED_MODULE_48__ = __webpack_require__(6237);
-/* harmony import */ var _Tooltip__WEBPACK_IMPORTED_MODULE_49__ = __webpack_require__(1512);
+/* harmony import */ var _Toasts__WEBPACK_IMPORTED_MODULE_48__ = __webpack_require__(363);
+/* harmony import */ var _ToggleButtonGroup__WEBPACK_IMPORTED_MODULE_49__ = __webpack_require__(6237);
+/* harmony import */ var _Tooltip__WEBPACK_IMPORTED_MODULE_50__ = __webpack_require__(1512);
+
 
 
 
@@ -12951,7 +13869,7 @@ module.exports = ReactPropTypesSecret;
 
 /***/ }),
 
-/***/ 1750:
+/***/ 9114:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -12997,16 +13915,9 @@ function removeClass_removeClass(element, className) {
 // EXTERNAL MODULE: external "react"
 var external_react_ = __webpack_require__(8156);
 var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
-// EXTERNAL MODULE: external "react-dom"
-var external_react_dom_ = __webpack_require__(7111);
-var external_react_dom_default = /*#__PURE__*/__webpack_require__.n(external_react_dom_);
-;// CONCATENATED MODULE: ./node_modules/react-transition-group/esm/config.js
-/* harmony default export */ const config = ({
-  disabled: false
-});
-// EXTERNAL MODULE: ./node_modules/react-transition-group/esm/TransitionGroupContext.js
-var TransitionGroupContext = __webpack_require__(3493);
-;// CONCATENATED MODULE: ./node_modules/react-transition-group/esm/Transition.js
+// EXTERNAL MODULE: ./node_modules/react-transition-group/esm/Transition.js + 1 modules
+var Transition = __webpack_require__(6113);
+;// CONCATENATED MODULE: ./node_modules/react-transition-group/esm/CSSTransition.js
 
 
 
@@ -13015,88 +13926,43 @@ var TransitionGroupContext = __webpack_require__(3493);
 
 
 
-var UNMOUNTED = 'unmounted';
-var EXITED = 'exited';
-var ENTERING = 'entering';
-var ENTERED = 'entered';
-var EXITING = 'exiting';
+
+
+var _addClass = function addClass(node, classes) {
+  return node && classes && classes.split(' ').forEach(function (c) {
+    return addClass_addClass(node, c);
+  });
+};
+
+var removeClass = function removeClass(node, classes) {
+  return node && classes && classes.split(' ').forEach(function (c) {
+    return removeClass_removeClass(node, c);
+  });
+};
 /**
- * The Transition component lets you describe a transition from one component
- * state to another _over time_ with a simple declarative API. Most commonly
- * it's used to animate the mounting and unmounting of a component, but can also
- * be used to describe in-place transition states as well.
- *
- * ---
- *
- * **Note**: `Transition` is a platform-agnostic base component. If you're using
- * transitions in CSS, you'll probably want to use
- * [`CSSTransition`](https://reactcommunity.org/react-transition-group/css-transition)
- * instead. It inherits all the features of `Transition`, but contains
- * additional features necessary to play nice with CSS transitions (hence the
- * name of the component).
- *
- * ---
- *
- * By default the `Transition` component does not alter the behavior of the
- * component it renders, it only tracks "enter" and "exit" states for the
- * components. It's up to you to give meaning and effect to those states. For
- * example we can add styles to a component when it enters or exits:
- *
- * ```jsx
- * import { Transition } from 'react-transition-group';
- *
- * const duration = 300;
- *
- * const defaultStyle = {
- *   transition: `opacity ${duration}ms ease-in-out`,
- *   opacity: 0,
- * }
- *
- * const transitionStyles = {
- *   entering: { opacity: 1 },
- *   entered:  { opacity: 1 },
- *   exiting:  { opacity: 0 },
- *   exited:  { opacity: 0 },
- * };
- *
- * const Fade = ({ in: inProp }) => (
- *   <Transition in={inProp} timeout={duration}>
- *     {state => (
- *       <div style={{
- *         ...defaultStyle,
- *         ...transitionStyles[state]
- *       }}>
- *         I'm a fade Transition!
- *       </div>
- *     )}
- *   </Transition>
- * );
- * ```
- *
- * There are 4 main states a Transition can be in:
- *  - `'entering'`
- *  - `'entered'`
- *  - `'exiting'`
- *  - `'exited'`
+ * A transition component inspired by the excellent
+ * [ng-animate](https://docs.angularjs.org/api/ngAnimate) library, you should
+ * use it if you're using CSS transitions or animations. It's built upon the
+ * [`Transition`](https://reactcommunity.org/react-transition-group/transition)
+ * component, so it inherits all of its props.
  *
- * Transition state is toggled via the `in` prop. When `true` the component
- * begins the "Enter" stage. During this stage, the component will shift from
- * its current transition state, to `'entering'` for the duration of the
- * transition and then to the `'entered'` stage once it's complete. Let's take
- * the following example (we'll use the
- * [useState](https://reactjs.org/docs/hooks-reference.html#usestate) hook):
+ * `CSSTransition` applies a pair of class names during the `appear`, `enter`,
+ * and `exit` states of the transition. The first class is applied and then a
+ * second `*-active` class in order to activate the CSS transition. After the
+ * transition, matching `*-done` class names are applied to persist the
+ * transition state.
  *
  * ```jsx
  * function App() {
  *   const [inProp, setInProp] = useState(false);
  *   return (
  *     <div>
- *       <Transition in={inProp} timeout={500}>
- *         {state => (
- *           // ...
- *         )}
- *       </Transition>
- *       <button onClick={() => setInProp(true)}>
+ *       <CSSTransition in={inProp} timeout={200} classNames="my-node">
+ *         <div>
+ *           {"I'll receive my-node-* classes"}
+ *         </div>
+ *       </CSSTransition>
+ *       <button type="button" onClick={() => setInProp(true)}>
  *         Click to Enter
  *       </button>
  *     </div>
@@ -13104,343 +13970,273 @@ var EXITING = 'exiting';
  * }
  * ```
  *
- * When the button is clicked the component will shift to the `'entering'` state
- * and stay there for 500ms (the value of `timeout`) before it finally switches
- * to `'entered'`.
+ * When the `in` prop is set to `true`, the child component will first receive
+ * the class `example-enter`, then the `example-enter-active` will be added in
+ * the next tick. `CSSTransition` [forces a
+ * reflow](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215)
+ * between before adding the `example-enter-active`. This is an important trick
+ * because it allows us to transition between `example-enter` and
+ * `example-enter-active` even though they were added immediately one after
+ * another. Most notably, this is what makes it possible for us to animate
+ * _appearance_.
+ *
+ * ```css
+ * .my-node-enter {
+ *   opacity: 0;
+ * }
+ * .my-node-enter-active {
+ *   opacity: 1;
+ *   transition: opacity 200ms;
+ * }
+ * .my-node-exit {
+ *   opacity: 1;
+ * }
+ * .my-node-exit-active {
+ *   opacity: 0;
+ *   transition: opacity 200ms;
+ * }
+ * ```
+ *
+ * `*-active` classes represent which styles you want to animate **to**, so it's
+ * important to add `transition` declaration only to them, otherwise transitions
+ * might not behave as intended! This might not be obvious when the transitions
+ * are symmetrical, i.e. when `*-enter-active` is the same as `*-exit`, like in
+ * the example above (minus `transition`), but it becomes apparent in more
+ * complex transitions.
  *
- * When `in` is `false` the same thing happens except the state moves from
- * `'exiting'` to `'exited'`.
+ * **Note**: If you're using the
+ * [`appear`](http://reactcommunity.org/react-transition-group/transition#Transition-prop-appear)
+ * prop, make sure to define styles for `.appear-*` classes as well.
  */
 
-var Transition = /*#__PURE__*/function (_React$Component) {
-  (0,inheritsLoose/* default */.Z)(Transition, _React$Component);
-
-  function Transition(props, context) {
-    var _this;
 
-    _this = _React$Component.call(this, props, context) || this;
-    var parentGroup = context; // In the context of a TransitionGroup all enters are really appears
+var CSSTransition = /*#__PURE__*/function (_React$Component) {
+  (0,inheritsLoose/* default */.Z)(CSSTransition, _React$Component);
 
-    var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;
-    var initialStatus;
-    _this.appearStatus = null;
+  function CSSTransition() {
+    var _this;
 
-    if (props["in"]) {
-      if (appear) {
-        initialStatus = EXITED;
-        _this.appearStatus = ENTERING;
-      } else {
-        initialStatus = ENTERED;
-      }
-    } else {
-      if (props.unmountOnExit || props.mountOnEnter) {
-        initialStatus = UNMOUNTED;
-      } else {
-        initialStatus = EXITED;
-      }
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
 
-    _this.state = {
-      status: initialStatus
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.appliedClasses = {
+      appear: {},
+      enter: {},
+      exit: {}
     };
-    _this.nextCallback = null;
-    return _this;
-  }
-
-  Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {
-    var nextIn = _ref["in"];
-
-    if (nextIn && prevState.status === UNMOUNTED) {
-      return {
-        status: EXITED
-      };
-    }
-
-    return null;
-  } // getSnapshotBeforeUpdate(prevProps) {
-  //   let nextStatus = null
-  //   if (prevProps !== this.props) {
-  //     const { status } = this.state
-  //     if (this.props.in) {
-  //       if (status !== ENTERING && status !== ENTERED) {
-  //         nextStatus = ENTERING
-  //       }
-  //     } else {
-  //       if (status === ENTERING || status === ENTERED) {
-  //         nextStatus = EXITING
-  //       }
-  //     }
-  //   }
-  //   return { nextStatus }
-  // }
-  ;
-
-  var _proto = Transition.prototype;
 
-  _proto.componentDidMount = function componentDidMount() {
-    this.updateStatus(true, this.appearStatus);
-  };
+    _this.onEnter = function (maybeNode, maybeAppearing) {
+      var _this$resolveArgument = _this.resolveArguments(maybeNode, maybeAppearing),
+          node = _this$resolveArgument[0],
+          appearing = _this$resolveArgument[1];
 
-  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
-    var nextStatus = null;
+      _this.removeClasses(node, 'exit');
 
-    if (prevProps !== this.props) {
-      var status = this.state.status;
+      _this.addClass(node, appearing ? 'appear' : 'enter', 'base');
 
-      if (this.props["in"]) {
-        if (status !== ENTERING && status !== ENTERED) {
-          nextStatus = ENTERING;
-        }
-      } else {
-        if (status === ENTERING || status === ENTERED) {
-          nextStatus = EXITING;
-        }
+      if (_this.props.onEnter) {
+        _this.props.onEnter(maybeNode, maybeAppearing);
       }
-    }
-
-    this.updateStatus(false, nextStatus);
-  };
-
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    this.cancelNextCallback();
-  };
-
-  _proto.getTimeouts = function getTimeouts() {
-    var timeout = this.props.timeout;
-    var exit, enter, appear;
-    exit = enter = appear = timeout;
-
-    if (timeout != null && typeof timeout !== 'number') {
-      exit = timeout.exit;
-      enter = timeout.enter; // TODO: remove fallback for next major
-
-      appear = timeout.appear !== undefined ? timeout.appear : enter;
-    }
-
-    return {
-      exit: exit,
-      enter: enter,
-      appear: appear
     };
-  };
 
-  _proto.updateStatus = function updateStatus(mounting, nextStatus) {
-    if (mounting === void 0) {
-      mounting = false;
-    }
+    _this.onEntering = function (maybeNode, maybeAppearing) {
+      var _this$resolveArgument2 = _this.resolveArguments(maybeNode, maybeAppearing),
+          node = _this$resolveArgument2[0],
+          appearing = _this$resolveArgument2[1];
 
-    if (nextStatus !== null) {
-      // nextStatus will always be ENTERING or EXITING.
-      this.cancelNextCallback();
+      var type = appearing ? 'appear' : 'enter';
 
-      if (nextStatus === ENTERING) {
-        this.performEnter(mounting);
-      } else {
-        this.performExit();
+      _this.addClass(node, type, 'active');
+
+      if (_this.props.onEntering) {
+        _this.props.onEntering(maybeNode, maybeAppearing);
       }
-    } else if (this.props.unmountOnExit && this.state.status === EXITED) {
-      this.setState({
-        status: UNMOUNTED
-      });
-    }
-  };
+    };
 
-  _proto.performEnter = function performEnter(mounting) {
-    var _this2 = this;
+    _this.onEntered = function (maybeNode, maybeAppearing) {
+      var _this$resolveArgument3 = _this.resolveArguments(maybeNode, maybeAppearing),
+          node = _this$resolveArgument3[0],
+          appearing = _this$resolveArgument3[1];
 
-    var enter = this.props.enter;
-    var appearing = this.context ? this.context.isMounting : mounting;
+      var type = appearing ? 'appear' : 'enter';
 
-    var _ref2 = this.props.nodeRef ? [appearing] : [external_react_dom_default().findDOMNode(this), appearing],
-        maybeNode = _ref2[0],
-        maybeAppearing = _ref2[1];
+      _this.removeClasses(node, type);
 
-    var timeouts = this.getTimeouts();
-    var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED
-    // if we are mounting and running this it means appear _must_ be set
+      _this.addClass(node, type, 'done');
 
-    if (!mounting && !enter || config.disabled) {
-      this.safeSetState({
-        status: ENTERED
-      }, function () {
-        _this2.props.onEntered(maybeNode);
-      });
-      return;
-    }
+      if (_this.props.onEntered) {
+        _this.props.onEntered(maybeNode, maybeAppearing);
+      }
+    };
 
-    this.props.onEnter(maybeNode, maybeAppearing);
-    this.safeSetState({
-      status: ENTERING
-    }, function () {
-      _this2.props.onEntering(maybeNode, maybeAppearing);
+    _this.onExit = function (maybeNode) {
+      var _this$resolveArgument4 = _this.resolveArguments(maybeNode),
+          node = _this$resolveArgument4[0];
 
-      _this2.onTransitionEnd(enterTimeout, function () {
-        _this2.safeSetState({
-          status: ENTERED
-        }, function () {
-          _this2.props.onEntered(maybeNode, maybeAppearing);
-        });
-      });
-    });
-  };
+      _this.removeClasses(node, 'appear');
 
-  _proto.performExit = function performExit() {
-    var _this3 = this;
+      _this.removeClasses(node, 'enter');
 
-    var exit = this.props.exit;
-    var timeouts = this.getTimeouts();
-    var maybeNode = this.props.nodeRef ? undefined : external_react_dom_default().findDOMNode(this); // no exit animation skip right to EXITED
+      _this.addClass(node, 'exit', 'base');
 
-    if (!exit || config.disabled) {
-      this.safeSetState({
-        status: EXITED
-      }, function () {
-        _this3.props.onExited(maybeNode);
-      });
-      return;
-    }
+      if (_this.props.onExit) {
+        _this.props.onExit(maybeNode);
+      }
+    };
 
-    this.props.onExit(maybeNode);
-    this.safeSetState({
-      status: EXITING
-    }, function () {
-      _this3.props.onExiting(maybeNode);
+    _this.onExiting = function (maybeNode) {
+      var _this$resolveArgument5 = _this.resolveArguments(maybeNode),
+          node = _this$resolveArgument5[0];
 
-      _this3.onTransitionEnd(timeouts.exit, function () {
-        _this3.safeSetState({
-          status: EXITED
-        }, function () {
-          _this3.props.onExited(maybeNode);
-        });
-      });
-    });
-  };
+      _this.addClass(node, 'exit', 'active');
 
-  _proto.cancelNextCallback = function cancelNextCallback() {
-    if (this.nextCallback !== null) {
-      this.nextCallback.cancel();
-      this.nextCallback = null;
-    }
-  };
+      if (_this.props.onExiting) {
+        _this.props.onExiting(maybeNode);
+      }
+    };
 
-  _proto.safeSetState = function safeSetState(nextState, callback) {
-    // This shouldn't be necessary, but there are weird race conditions with
-    // setState callbacks and unmounting in testing, so always make sure that
-    // we can cancel any pending setState callbacks after we unmount.
-    callback = this.setNextCallback(callback);
-    this.setState(nextState, callback);
-  };
+    _this.onExited = function (maybeNode) {
+      var _this$resolveArgument6 = _this.resolveArguments(maybeNode),
+          node = _this$resolveArgument6[0];
 
-  _proto.setNextCallback = function setNextCallback(callback) {
-    var _this4 = this;
+      _this.removeClasses(node, 'exit');
 
-    var active = true;
+      _this.addClass(node, 'exit', 'done');
 
-    this.nextCallback = function (event) {
-      if (active) {
-        active = false;
-        _this4.nextCallback = null;
-        callback(event);
+      if (_this.props.onExited) {
+        _this.props.onExited(maybeNode);
       }
     };
 
-    this.nextCallback.cancel = function () {
-      active = false;
+    _this.resolveArguments = function (maybeNode, maybeAppearing) {
+      return _this.props.nodeRef ? [_this.props.nodeRef.current, maybeNode] // here `maybeNode` is actually `appearing`
+      : [maybeNode, maybeAppearing];
     };
 
-    return this.nextCallback;
-  };
+    _this.getClassNames = function (type) {
+      var classNames = _this.props.classNames;
+      var isStringClassNames = typeof classNames === 'string';
+      var prefix = isStringClassNames && classNames ? classNames + "-" : '';
+      var baseClassName = isStringClassNames ? "" + prefix + type : classNames[type];
+      var activeClassName = isStringClassNames ? baseClassName + "-active" : classNames[type + "Active"];
+      var doneClassName = isStringClassNames ? baseClassName + "-done" : classNames[type + "Done"];
+      return {
+        baseClassName: baseClassName,
+        activeClassName: activeClassName,
+        doneClassName: doneClassName
+      };
+    };
 
-  _proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {
-    this.setNextCallback(handler);
-    var node = this.props.nodeRef ? this.props.nodeRef.current : external_react_dom_default().findDOMNode(this);
-    var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;
+    return _this;
+  }
 
-    if (!node || doesNotHaveTimeoutOrListener) {
-      setTimeout(this.nextCallback, 0);
-      return;
-    }
+  var _proto = CSSTransition.prototype;
 
-    if (this.props.addEndListener) {
-      var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback],
-          maybeNode = _ref3[0],
-          maybeNextCallback = _ref3[1];
+  _proto.addClass = function addClass(node, type, phase) {
+    var className = this.getClassNames(type)[phase + "ClassName"];
 
-      this.props.addEndListener(maybeNode, maybeNextCallback);
+    var _this$getClassNames = this.getClassNames('enter'),
+        doneClassName = _this$getClassNames.doneClassName;
+
+    if (type === 'appear' && phase === 'done' && doneClassName) {
+      className += " " + doneClassName;
+    } // This is for to force a repaint,
+    // which is necessary in order to transition styles when adding a class name.
+
+
+    if (phase === 'active') {
+      /* eslint-disable no-unused-expressions */
+      node && node.scrollTop;
     }
 
-    if (timeout != null) {
-      setTimeout(this.nextCallback, timeout);
+    if (className) {
+      this.appliedClasses[type][phase] = className;
+
+      _addClass(node, className);
     }
   };
 
-  _proto.render = function render() {
-    var status = this.state.status;
+  _proto.removeClasses = function removeClasses(node, type) {
+    var _this$appliedClasses$ = this.appliedClasses[type],
+        baseClassName = _this$appliedClasses$.base,
+        activeClassName = _this$appliedClasses$.active,
+        doneClassName = _this$appliedClasses$.done;
+    this.appliedClasses[type] = {};
 
-    if (status === UNMOUNTED) {
-      return null;
+    if (baseClassName) {
+      removeClass(node, baseClassName);
+    }
+
+    if (activeClassName) {
+      removeClass(node, activeClassName);
+    }
+
+    if (doneClassName) {
+      removeClass(node, doneClassName);
     }
+  };
 
+  _proto.render = function render() {
     var _this$props = this.props,
-        children = _this$props.children,
-        _in = _this$props["in"],
-        _mountOnEnter = _this$props.mountOnEnter,
-        _unmountOnExit = _this$props.unmountOnExit,
-        _appear = _this$props.appear,
-        _enter = _this$props.enter,
-        _exit = _this$props.exit,
-        _timeout = _this$props.timeout,
-        _addEndListener = _this$props.addEndListener,
-        _onEnter = _this$props.onEnter,
-        _onEntering = _this$props.onEntering,
-        _onEntered = _this$props.onEntered,
-        _onExit = _this$props.onExit,
-        _onExiting = _this$props.onExiting,
-        _onExited = _this$props.onExited,
-        _nodeRef = _this$props.nodeRef,
-        childProps = (0,objectWithoutPropertiesLoose/* default */.Z)(_this$props, ["children", "in", "mountOnEnter", "unmountOnExit", "appear", "enter", "exit", "timeout", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "nodeRef"]);
+        _ = _this$props.classNames,
+        props = (0,objectWithoutPropertiesLoose/* default */.Z)(_this$props, ["classNames"]);
 
-    return (
-      /*#__PURE__*/
-      // allows for nested Transitions
-      external_react_default().createElement(TransitionGroupContext/* default.Provider */.Z.Provider, {
-        value: null
-      }, typeof children === 'function' ? children(status, childProps) : external_react_default().cloneElement(external_react_default().Children.only(children), childProps))
-    );
+    return /*#__PURE__*/external_react_default().createElement(Transition/* default */.ZP, (0,esm_extends/* default */.Z)({}, props, {
+      onEnter: this.onEnter,
+      onEntered: this.onEntered,
+      onEntering: this.onEntering,
+      onExit: this.onExit,
+      onExiting: this.onExiting,
+      onExited: this.onExited
+    }));
   };
 
-  return Transition;
+  return CSSTransition;
 }((external_react_default()).Component);
 
-Transition.contextType = TransitionGroupContext/* default */.Z;
-Transition.propTypes =  false ? 0 : {}; // Name the function so it is clearer in the documentation
+CSSTransition.defaultProps = {
+  classNames: ''
+};
+CSSTransition.propTypes =  false ? 0 : {};
+/* harmony default export */ const esm_CSSTransition = (CSSTransition);
 
-function noop() {}
+/***/ }),
 
-Transition.defaultProps = {
-  "in": false,
-  mountOnEnter: false,
-  unmountOnExit: false,
-  appear: false,
-  enter: true,
-  exit: true,
-  onEnter: noop,
-  onEntering: noop,
-  onEntered: noop,
-  onExit: noop,
-  onExiting: noop,
-  onExited: noop
-};
-Transition.UNMOUNTED = UNMOUNTED;
-Transition.EXITED = EXITED;
-Transition.ENTERING = ENTERING;
-Transition.ENTERED = ENTERED;
-Transition.EXITING = EXITING;
-/* harmony default export */ const esm_Transition = (Transition);
-;// CONCATENATED MODULE: ./node_modules/react-transition-group/esm/CSSTransition.js
+/***/ 6113:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
 
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "cn": () => (/* binding */ ENTERED),
+  "d0": () => (/* binding */ ENTERING),
+  "ZP": () => (/* binding */ esm_Transition)
+});
 
+// UNUSED EXPORTS: EXITED, EXITING, UNMOUNTED
 
+// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js
+var objectWithoutPropertiesLoose = __webpack_require__(7038);
+// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/inheritsLoose.js + 1 modules
+var inheritsLoose = __webpack_require__(7581);
+// EXTERNAL MODULE: ./node_modules/prop-types/index.js
+var prop_types = __webpack_require__(8691);
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(8156);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+// EXTERNAL MODULE: external "react-dom"
+var external_react_dom_ = __webpack_require__(7111);
+var external_react_dom_default = /*#__PURE__*/__webpack_require__.n(external_react_dom_);
+;// CONCATENATED MODULE: ./node_modules/react-transition-group/esm/config.js
+/* harmony default export */ const config = ({
+  disabled: false
+});
+// EXTERNAL MODULE: ./node_modules/react-transition-group/esm/TransitionGroupContext.js
+var TransitionGroupContext = __webpack_require__(3493);
+;// CONCATENATED MODULE: ./node_modules/react-transition-group/esm/Transition.js
 
 
 
@@ -13448,41 +14244,89 @@ Transition.EXITING = EXITING;
 
 
 
-var _addClass = function addClass(node, classes) {
-  return node && classes && classes.split(' ').forEach(function (c) {
-    return addClass_addClass(node, c);
-  });
-};
 
-var removeClass = function removeClass(node, classes) {
-  return node && classes && classes.split(' ').forEach(function (c) {
-    return removeClass_removeClass(node, c);
-  });
-};
+var UNMOUNTED = 'unmounted';
+var EXITED = 'exited';
+var ENTERING = 'entering';
+var ENTERED = 'entered';
+var EXITING = 'exiting';
 /**
- * A transition component inspired by the excellent
- * [ng-animate](https://docs.angularjs.org/api/ngAnimate) library, you should
- * use it if you're using CSS transitions or animations. It's built upon the
- * [`Transition`](https://reactcommunity.org/react-transition-group/transition)
- * component, so it inherits all of its props.
+ * The Transition component lets you describe a transition from one component
+ * state to another _over time_ with a simple declarative API. Most commonly
+ * it's used to animate the mounting and unmounting of a component, but can also
+ * be used to describe in-place transition states as well.
+ *
+ * ---
+ *
+ * **Note**: `Transition` is a platform-agnostic base component. If you're using
+ * transitions in CSS, you'll probably want to use
+ * [`CSSTransition`](https://reactcommunity.org/react-transition-group/css-transition)
+ * instead. It inherits all the features of `Transition`, but contains
+ * additional features necessary to play nice with CSS transitions (hence the
+ * name of the component).
+ *
+ * ---
+ *
+ * By default the `Transition` component does not alter the behavior of the
+ * component it renders, it only tracks "enter" and "exit" states for the
+ * components. It's up to you to give meaning and effect to those states. For
+ * example we can add styles to a component when it enters or exits:
+ *
+ * ```jsx
+ * import { Transition } from 'react-transition-group';
+ *
+ * const duration = 300;
+ *
+ * const defaultStyle = {
+ *   transition: `opacity ${duration}ms ease-in-out`,
+ *   opacity: 0,
+ * }
+ *
+ * const transitionStyles = {
+ *   entering: { opacity: 1 },
+ *   entered:  { opacity: 1 },
+ *   exiting:  { opacity: 0 },
+ *   exited:  { opacity: 0 },
+ * };
  *
- * `CSSTransition` applies a pair of class names during the `appear`, `enter`,
- * and `exit` states of the transition. The first class is applied and then a
- * second `*-active` class in order to activate the CSS transition. After the
- * transition, matching `*-done` class names are applied to persist the
- * transition state.
+ * const Fade = ({ in: inProp }) => (
+ *   <Transition in={inProp} timeout={duration}>
+ *     {state => (
+ *       <div style={{
+ *         ...defaultStyle,
+ *         ...transitionStyles[state]
+ *       }}>
+ *         I'm a fade Transition!
+ *       </div>
+ *     )}
+ *   </Transition>
+ * );
+ * ```
+ *
+ * There are 4 main states a Transition can be in:
+ *  - `'entering'`
+ *  - `'entered'`
+ *  - `'exiting'`
+ *  - `'exited'`
+ *
+ * Transition state is toggled via the `in` prop. When `true` the component
+ * begins the "Enter" stage. During this stage, the component will shift from
+ * its current transition state, to `'entering'` for the duration of the
+ * transition and then to the `'entered'` stage once it's complete. Let's take
+ * the following example (we'll use the
+ * [useState](https://reactjs.org/docs/hooks-reference.html#usestate) hook):
  *
  * ```jsx
  * function App() {
  *   const [inProp, setInProp] = useState(false);
  *   return (
  *     <div>
- *       <CSSTransition in={inProp} timeout={200} classNames="my-node">
- *         <div>
- *           {"I'll receive my-node-* classes"}
- *         </div>
- *       </CSSTransition>
- *       <button type="button" onClick={() => setInProp(true)}>
+ *       <Transition in={inProp} timeout={500}>
+ *         {state => (
+ *           // ...
+ *         )}
+ *       </Transition>
+ *       <button onClick={() => setInProp(true)}>
  *         Click to Enter
  *       </button>
  *     </div>
@@ -13490,237 +14334,339 @@ var removeClass = function removeClass(node, classes) {
  * }
  * ```
  *
- * When the `in` prop is set to `true`, the child component will first receive
- * the class `example-enter`, then the `example-enter-active` will be added in
- * the next tick. `CSSTransition` [forces a
- * reflow](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215)
- * between before adding the `example-enter-active`. This is an important trick
- * because it allows us to transition between `example-enter` and
- * `example-enter-active` even though they were added immediately one after
- * another. Most notably, this is what makes it possible for us to animate
- * _appearance_.
- *
- * ```css
- * .my-node-enter {
- *   opacity: 0;
- * }
- * .my-node-enter-active {
- *   opacity: 1;
- *   transition: opacity 200ms;
- * }
- * .my-node-exit {
- *   opacity: 1;
- * }
- * .my-node-exit-active {
- *   opacity: 0;
- *   transition: opacity 200ms;
- * }
- * ```
- *
- * `*-active` classes represent which styles you want to animate **to**, so it's
- * important to add `transition` declaration only to them, otherwise transitions
- * might not behave as intended! This might not be obvious when the transitions
- * are symmetrical, i.e. when `*-enter-active` is the same as `*-exit`, like in
- * the example above (minus `transition`), but it becomes apparent in more
- * complex transitions.
+ * When the button is clicked the component will shift to the `'entering'` state
+ * and stay there for 500ms (the value of `timeout`) before it finally switches
+ * to `'entered'`.
  *
- * **Note**: If you're using the
- * [`appear`](http://reactcommunity.org/react-transition-group/transition#Transition-prop-appear)
- * prop, make sure to define styles for `.appear-*` classes as well.
+ * When `in` is `false` the same thing happens except the state moves from
+ * `'exiting'` to `'exited'`.
  */
 
+var Transition = /*#__PURE__*/function (_React$Component) {
+  (0,inheritsLoose/* default */.Z)(Transition, _React$Component);
 
-var CSSTransition = /*#__PURE__*/function (_React$Component) {
-  (0,inheritsLoose/* default */.Z)(CSSTransition, _React$Component);
-
-  function CSSTransition() {
+  function Transition(props, context) {
     var _this;
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+    _this = _React$Component.call(this, props, context) || this;
+    var parentGroup = context; // In the context of a TransitionGroup all enters are really appears
+
+    var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;
+    var initialStatus;
+    _this.appearStatus = null;
+
+    if (props["in"]) {
+      if (appear) {
+        initialStatus = EXITED;
+        _this.appearStatus = ENTERING;
+      } else {
+        initialStatus = ENTERED;
+      }
+    } else {
+      if (props.unmountOnExit || props.mountOnEnter) {
+        initialStatus = UNMOUNTED;
+      } else {
+        initialStatus = EXITED;
+      }
     }
 
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this.appliedClasses = {
-      appear: {},
-      enter: {},
-      exit: {}
+    _this.state = {
+      status: initialStatus
     };
+    _this.nextCallback = null;
+    return _this;
+  }
 
-    _this.onEnter = function (maybeNode, maybeAppearing) {
-      var _this$resolveArgument = _this.resolveArguments(maybeNode, maybeAppearing),
-          node = _this$resolveArgument[0],
-          appearing = _this$resolveArgument[1];
+  Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {
+    var nextIn = _ref["in"];
 
-      _this.removeClasses(node, 'exit');
+    if (nextIn && prevState.status === UNMOUNTED) {
+      return {
+        status: EXITED
+      };
+    }
 
-      _this.addClass(node, appearing ? 'appear' : 'enter', 'base');
+    return null;
+  } // getSnapshotBeforeUpdate(prevProps) {
+  //   let nextStatus = null
+  //   if (prevProps !== this.props) {
+  //     const { status } = this.state
+  //     if (this.props.in) {
+  //       if (status !== ENTERING && status !== ENTERED) {
+  //         nextStatus = ENTERING
+  //       }
+  //     } else {
+  //       if (status === ENTERING || status === ENTERED) {
+  //         nextStatus = EXITING
+  //       }
+  //     }
+  //   }
+  //   return { nextStatus }
+  // }
+  ;
 
-      if (_this.props.onEnter) {
-        _this.props.onEnter(maybeNode, maybeAppearing);
-      }
-    };
+  var _proto = Transition.prototype;
 
-    _this.onEntering = function (maybeNode, maybeAppearing) {
-      var _this$resolveArgument2 = _this.resolveArguments(maybeNode, maybeAppearing),
-          node = _this$resolveArgument2[0],
-          appearing = _this$resolveArgument2[1];
+  _proto.componentDidMount = function componentDidMount() {
+    this.updateStatus(true, this.appearStatus);
+  };
 
-      var type = appearing ? 'appear' : 'enter';
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    var nextStatus = null;
 
-      _this.addClass(node, type, 'active');
+    if (prevProps !== this.props) {
+      var status = this.state.status;
 
-      if (_this.props.onEntering) {
-        _this.props.onEntering(maybeNode, maybeAppearing);
+      if (this.props["in"]) {
+        if (status !== ENTERING && status !== ENTERED) {
+          nextStatus = ENTERING;
+        }
+      } else {
+        if (status === ENTERING || status === ENTERED) {
+          nextStatus = EXITING;
+        }
       }
-    };
+    }
 
-    _this.onEntered = function (maybeNode, maybeAppearing) {
-      var _this$resolveArgument3 = _this.resolveArguments(maybeNode, maybeAppearing),
-          node = _this$resolveArgument3[0],
-          appearing = _this$resolveArgument3[1];
+    this.updateStatus(false, nextStatus);
+  };
 
-      var type = appearing ? 'appear' : 'enter';
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    this.cancelNextCallback();
+  };
 
-      _this.removeClasses(node, type);
+  _proto.getTimeouts = function getTimeouts() {
+    var timeout = this.props.timeout;
+    var exit, enter, appear;
+    exit = enter = appear = timeout;
 
-      _this.addClass(node, type, 'done');
+    if (timeout != null && typeof timeout !== 'number') {
+      exit = timeout.exit;
+      enter = timeout.enter; // TODO: remove fallback for next major
 
-      if (_this.props.onEntered) {
-        _this.props.onEntered(maybeNode, maybeAppearing);
-      }
+      appear = timeout.appear !== undefined ? timeout.appear : enter;
+    }
+
+    return {
+      exit: exit,
+      enter: enter,
+      appear: appear
     };
+  };
+
+  _proto.updateStatus = function updateStatus(mounting, nextStatus) {
+    if (mounting === void 0) {
+      mounting = false;
+    }
+
+    if (nextStatus !== null) {
+      // nextStatus will always be ENTERING or EXITING.
+      this.cancelNextCallback();
+
+      if (nextStatus === ENTERING) {
+        this.performEnter(mounting);
+      } else {
+        this.performExit();
+      }
+    } else if (this.props.unmountOnExit && this.state.status === EXITED) {
+      this.setState({
+        status: UNMOUNTED
+      });
+    }
+  };
+
+  _proto.performEnter = function performEnter(mounting) {
+    var _this2 = this;
+
+    var enter = this.props.enter;
+    var appearing = this.context ? this.context.isMounting : mounting;
+
+    var _ref2 = this.props.nodeRef ? [appearing] : [external_react_dom_default().findDOMNode(this), appearing],
+        maybeNode = _ref2[0],
+        maybeAppearing = _ref2[1];
+
+    var timeouts = this.getTimeouts();
+    var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED
+    // if we are mounting and running this it means appear _must_ be set
+
+    if (!mounting && !enter || config.disabled) {
+      this.safeSetState({
+        status: ENTERED
+      }, function () {
+        _this2.props.onEntered(maybeNode);
+      });
+      return;
+    }
 
-    _this.onExit = function (maybeNode) {
-      var _this$resolveArgument4 = _this.resolveArguments(maybeNode),
-          node = _this$resolveArgument4[0];
+    this.props.onEnter(maybeNode, maybeAppearing);
+    this.safeSetState({
+      status: ENTERING
+    }, function () {
+      _this2.props.onEntering(maybeNode, maybeAppearing);
 
-      _this.removeClasses(node, 'appear');
+      _this2.onTransitionEnd(enterTimeout, function () {
+        _this2.safeSetState({
+          status: ENTERED
+        }, function () {
+          _this2.props.onEntered(maybeNode, maybeAppearing);
+        });
+      });
+    });
+  };
 
-      _this.removeClasses(node, 'enter');
+  _proto.performExit = function performExit() {
+    var _this3 = this;
 
-      _this.addClass(node, 'exit', 'base');
+    var exit = this.props.exit;
+    var timeouts = this.getTimeouts();
+    var maybeNode = this.props.nodeRef ? undefined : external_react_dom_default().findDOMNode(this); // no exit animation skip right to EXITED
 
-      if (_this.props.onExit) {
-        _this.props.onExit(maybeNode);
-      }
-    };
+    if (!exit || config.disabled) {
+      this.safeSetState({
+        status: EXITED
+      }, function () {
+        _this3.props.onExited(maybeNode);
+      });
+      return;
+    }
 
-    _this.onExiting = function (maybeNode) {
-      var _this$resolveArgument5 = _this.resolveArguments(maybeNode),
-          node = _this$resolveArgument5[0];
+    this.props.onExit(maybeNode);
+    this.safeSetState({
+      status: EXITING
+    }, function () {
+      _this3.props.onExiting(maybeNode);
 
-      _this.addClass(node, 'exit', 'active');
+      _this3.onTransitionEnd(timeouts.exit, function () {
+        _this3.safeSetState({
+          status: EXITED
+        }, function () {
+          _this3.props.onExited(maybeNode);
+        });
+      });
+    });
+  };
 
-      if (_this.props.onExiting) {
-        _this.props.onExiting(maybeNode);
-      }
-    };
+  _proto.cancelNextCallback = function cancelNextCallback() {
+    if (this.nextCallback !== null) {
+      this.nextCallback.cancel();
+      this.nextCallback = null;
+    }
+  };
 
-    _this.onExited = function (maybeNode) {
-      var _this$resolveArgument6 = _this.resolveArguments(maybeNode),
-          node = _this$resolveArgument6[0];
+  _proto.safeSetState = function safeSetState(nextState, callback) {
+    // This shouldn't be necessary, but there are weird race conditions with
+    // setState callbacks and unmounting in testing, so always make sure that
+    // we can cancel any pending setState callbacks after we unmount.
+    callback = this.setNextCallback(callback);
+    this.setState(nextState, callback);
+  };
 
-      _this.removeClasses(node, 'exit');
+  _proto.setNextCallback = function setNextCallback(callback) {
+    var _this4 = this;
 
-      _this.addClass(node, 'exit', 'done');
+    var active = true;
 
-      if (_this.props.onExited) {
-        _this.props.onExited(maybeNode);
+    this.nextCallback = function (event) {
+      if (active) {
+        active = false;
+        _this4.nextCallback = null;
+        callback(event);
       }
     };
 
-    _this.resolveArguments = function (maybeNode, maybeAppearing) {
-      return _this.props.nodeRef ? [_this.props.nodeRef.current, maybeNode] // here `maybeNode` is actually `appearing`
-      : [maybeNode, maybeAppearing];
-    };
-
-    _this.getClassNames = function (type) {
-      var classNames = _this.props.classNames;
-      var isStringClassNames = typeof classNames === 'string';
-      var prefix = isStringClassNames && classNames ? classNames + "-" : '';
-      var baseClassName = isStringClassNames ? "" + prefix + type : classNames[type];
-      var activeClassName = isStringClassNames ? baseClassName + "-active" : classNames[type + "Active"];
-      var doneClassName = isStringClassNames ? baseClassName + "-done" : classNames[type + "Done"];
-      return {
-        baseClassName: baseClassName,
-        activeClassName: activeClassName,
-        doneClassName: doneClassName
-      };
+    this.nextCallback.cancel = function () {
+      active = false;
     };
 
-    return _this;
-  }
-
-  var _proto = CSSTransition.prototype;
-
-  _proto.addClass = function addClass(node, type, phase) {
-    var className = this.getClassNames(type)[phase + "ClassName"];
-
-    var _this$getClassNames = this.getClassNames('enter'),
-        doneClassName = _this$getClassNames.doneClassName;
-
-    if (type === 'appear' && phase === 'done' && doneClassName) {
-      className += " " + doneClassName;
-    } // This is for to force a repaint,
-    // which is necessary in order to transition styles when adding a class name.
+    return this.nextCallback;
+  };
 
+  _proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {
+    this.setNextCallback(handler);
+    var node = this.props.nodeRef ? this.props.nodeRef.current : external_react_dom_default().findDOMNode(this);
+    var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;
 
-    if (phase === 'active') {
-      /* eslint-disable no-unused-expressions */
-      node && node.scrollTop;
+    if (!node || doesNotHaveTimeoutOrListener) {
+      setTimeout(this.nextCallback, 0);
+      return;
     }
 
-    if (className) {
-      this.appliedClasses[type][phase] = className;
+    if (this.props.addEndListener) {
+      var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback],
+          maybeNode = _ref3[0],
+          maybeNextCallback = _ref3[1];
 
-      _addClass(node, className);
+      this.props.addEndListener(maybeNode, maybeNextCallback);
     }
-  };
-
-  _proto.removeClasses = function removeClasses(node, type) {
-    var _this$appliedClasses$ = this.appliedClasses[type],
-        baseClassName = _this$appliedClasses$.base,
-        activeClassName = _this$appliedClasses$.active,
-        doneClassName = _this$appliedClasses$.done;
-    this.appliedClasses[type] = {};
 
-    if (baseClassName) {
-      removeClass(node, baseClassName);
+    if (timeout != null) {
+      setTimeout(this.nextCallback, timeout);
     }
+  };
 
-    if (activeClassName) {
-      removeClass(node, activeClassName);
-    }
+  _proto.render = function render() {
+    var status = this.state.status;
 
-    if (doneClassName) {
-      removeClass(node, doneClassName);
+    if (status === UNMOUNTED) {
+      return null;
     }
-  };
 
-  _proto.render = function render() {
     var _this$props = this.props,
-        _ = _this$props.classNames,
-        props = (0,objectWithoutPropertiesLoose/* default */.Z)(_this$props, ["classNames"]);
+        children = _this$props.children,
+        _in = _this$props["in"],
+        _mountOnEnter = _this$props.mountOnEnter,
+        _unmountOnExit = _this$props.unmountOnExit,
+        _appear = _this$props.appear,
+        _enter = _this$props.enter,
+        _exit = _this$props.exit,
+        _timeout = _this$props.timeout,
+        _addEndListener = _this$props.addEndListener,
+        _onEnter = _this$props.onEnter,
+        _onEntering = _this$props.onEntering,
+        _onEntered = _this$props.onEntered,
+        _onExit = _this$props.onExit,
+        _onExiting = _this$props.onExiting,
+        _onExited = _this$props.onExited,
+        _nodeRef = _this$props.nodeRef,
+        childProps = (0,objectWithoutPropertiesLoose/* default */.Z)(_this$props, ["children", "in", "mountOnEnter", "unmountOnExit", "appear", "enter", "exit", "timeout", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "nodeRef"]);
 
-    return /*#__PURE__*/external_react_default().createElement(esm_Transition, (0,esm_extends/* default */.Z)({}, props, {
-      onEnter: this.onEnter,
-      onEntered: this.onEntered,
-      onEntering: this.onEntering,
-      onExit: this.onExit,
-      onExiting: this.onExiting,
-      onExited: this.onExited
-    }));
+    return (
+      /*#__PURE__*/
+      // allows for nested Transitions
+      external_react_default().createElement(TransitionGroupContext/* default.Provider */.Z.Provider, {
+        value: null
+      }, typeof children === 'function' ? children(status, childProps) : external_react_default().cloneElement(external_react_default().Children.only(children), childProps))
+    );
   };
 
-  return CSSTransition;
+  return Transition;
 }((external_react_default()).Component);
 
-CSSTransition.defaultProps = {
-  classNames: ''
+Transition.contextType = TransitionGroupContext/* default */.Z;
+Transition.propTypes =  false ? 0 : {}; // Name the function so it is clearer in the documentation
+
+function noop() {}
+
+Transition.defaultProps = {
+  "in": false,
+  mountOnEnter: false,
+  unmountOnExit: false,
+  appear: false,
+  enter: true,
+  exit: true,
+  onEnter: noop,
+  onEntering: noop,
+  onEntered: noop,
+  onExit: noop,
+  onExiting: noop,
+  onExited: noop
 };
-CSSTransition.propTypes =  false ? 0 : {};
-/* harmony default export */ const esm_CSSTransition = (CSSTransition);
+Transition.UNMOUNTED = UNMOUNTED;
+Transition.EXITED = EXITED;
+Transition.ENTERING = ENTERING;
+Transition.ENTERED = ENTERED;
+Transition.EXITING = EXITING;
+/* harmony default export */ const esm_Transition = (Transition);
 
 /***/ }),
 
@@ -14653,6 +15599,22 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__6550__;
 
 /***/ }),
 
+/***/ 9870:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__9870__;
+
+/***/ }),
+
+/***/ 631:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__631__;
+
+/***/ }),
+
 /***/ 1349:
 /***/ ((module) => {
 
@@ -14669,6 +15631,22 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__3041__;
 
 /***/ }),
 
+/***/ 2628:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__2628__;
+
+/***/ }),
+
+/***/ 159:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__159__;
+
+/***/ }),
+
 /***/ 1326:
 /***/ ((module) => {
 
@@ -15279,10 +16257,11 @@ function _typeof(obj) {
 /******/ 			6074: 0,
 /******/ 			2197: 0,
 /******/ 			7564: 0,
+/******/ 			8557: 0,
 /******/ 			1030: 0,
 /******/ 			2823: 0,
 /******/ 			496: 0,
-/******/ 			563: 0
+/******/ 			3813: 0
 /******/ 		};
 /******/ 		
 /******/ 		// no chunk on demand loading
@@ -15332,7 +16311,7 @@ function _typeof(obj) {
 /******/ 	// startup
 /******/ 	// Load entry module and return exports
 /******/ 	// This entry module depends on other loaded chunks and execution need to be delayed
-/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, [563], () => (__webpack_require__(8505)))
+/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, [3813], () => (__webpack_require__(8505)))
 /******/ 	__webpack_exports__ = __webpack_require__.O(__webpack_exports__);
 /******/ 	
 /******/ 	return __webpack_exports__;