cdbreact
Version:
Elegant UI Kit and reusable components for building mobile-first, responsive webistes and web apps
606 lines (593 loc) • 375 kB
JavaScript
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
require('bootstrap/dist/css/bootstrap.min.css');
require('@fortawesome/fontawesome-free/css/all.min.css');
var React = require('react');
var React__default = _interopDefault(React);
var PropTypes = _interopDefault(require('prop-types'));
var classNames = _interopDefault(require('classnames'));
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var styledSystem = require('styled-system');
var useDeepCompareEffect = _interopDefault(require('use-deep-compare-effect'));
var tinycolor = _interopDefault(require('tinycolor2'));
var reactPopper = require('react-popper');
var renderprops = require('react-spring/renderprops');
var reactRouterDom = require('react-router-dom');
var reactTransitionGroup = require('react-transition-group');
var FocusTrap = _interopDefault(require('focus-trap-react'));
var Popper = _interopDefault(require('popper.js'));
require('react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css');
var RangeSlider = _interopDefault(require('react-bootstrap-range-slider'));
var reactScroll = require('react-scroll');
var ReactTooltip = _interopDefault(require('react-tooltip'));
function _extends() {
_extends = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _taggedTemplateLiteralLoose(strings, raw) {
if (!raw) {
raw = strings.slice(0);
}
strings.raw = raw;
return strings;
}
var _templateObject;
var Component = styled__default.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var colors = {
white: "#FFFFFF",
info: "#17A2B8",
light: "#EEEEEE",
primary: "#3b82f6",
primary50: "#eff6ff",
primary100: "#dbeafe",
primary200: "#bfdbfe",
primary300: "#93c5fd",
primary400: "#60a5fa",
primary500: "#3b82f6",
primary600: "#2563eb",
primary700: "#1d4ed8",
primary800: "#1e40af",
primary900: "#1e3a8a",
secondary: "#6366f1",
secondary50: "#eef2ff",
secondary100: "#e0e7ff",
secondary200: "#c7d2fe",
secondary300: "#a5b4fc",
secondary400: "#818cf8",
secondary500: "#6366f1",
secondary600: "#4f46e5",
secondary700: "#4338ca",
secondary800: "#3730a3",
secondary900: "#312e81",
danger: "#ef4444",
danger50: "#fef2f2",
danger100: "#fee2e2",
danger200: "#fecaca",
danger300: "#fca5a5",
danger400: "#f87171",
danger500: "#ef4444",
danger600: "#dc2626",
danger700: "#b91c1c",
danger800: "#991b1b",
danger900: "#7f1d1d",
success: "#22c55e",
success50: "#f0fdf4",
success100: "#dcfce7",
success200: "#bbf7d0",
success300: "#86efac",
success400: "#4ade80",
success500: "#22c55e",
success600: "#16a34a",
success700: "#15803d",
success800: "#166534",
success900: "#14532d",
warning: "#eab308",
warning50: "#fefce8",
warning100: "#fef9c3",
warning200: "#fef08a",
warning300: "#fde047",
warning400: "#facc15",
warning500: "#eab308",
warning600: "#ca8a04",
warning700: "#a16207",
warning800: "#854d0e",
warning900: "#713f12",
brown: "#bfa094",
brown50: "#fdf8f6",
brown100: "#f2e8e5",
brown200: "#eaddd7",
brown300: "#e0cec7",
brown400: "#d2bab0",
brown500: "#bfa094",
brown600: "#a18072",
brown700: "#977669",
brown800: "#846358",
brown900: "#43302b",
dark: "#111827",
dark50: "#f9fafb",
dark100: "#f3f4f6",
dark200: "#e5e7eb",
dark300: "#d1d5db",
dark400: "#9ca3af",
dark500: "#6b7280",
dark600: "#4b5563",
dark700: "#374151",
dark800: "#1f2937",
dark900: "#111827",
primaryHover: "#276EF1BD",
secondaryHover: "#7356BFBD",
successHover: "#05944FBD",
warningHover: "#FFE975BD",
dangerHover: "#E11900BD",
whiteHover: "#FFFFFFD5",
darkHover: "#000000BD",
infoHover: "#17A2B8BD",
lightHover: "#EEEEEEBD"
};
var theme = {
colors: colors,
colorStyles: {
primary: {
color: colors.white,
borderColor: colors.primary,
backgroundColor: colors.primary,
"&:hover": {
color: colors.white,
backgroundColor: colors.primaryHover
}
},
secondary: {
color: colors.white,
borderColor: colors.secondary,
backgroundColor: colors.secondary,
"&:hover": {
color: colors.white,
backgroundColor: colors.secondaryHover
}
},
light: {
color: colors.dark,
borderColor: colors.light,
backgroundColor: colors.light,
"&:hover": {
color: colors.dark,
backgroundColor: colors.lightHover
}
},
success: {
color: colors.white,
borderColor: colors.success,
backgroundColor: colors.success,
"&:hover": {
color: colors.white,
backgroundColor: colors.successHover
}
},
danger: {
color: colors.white,
borderColor: colors.danger,
backgroundColor: colors.danger,
"&:hover": {
color: colors.white,
backgroundColor: colors.dangerHover
}
},
warning: {
color: colors.dark,
borderColor: colors.warning,
backgroundColor: colors.warning,
"&:hover": {
color: colors.dark,
backgroundColor: colors.warningHover
}
},
dark: {
color: colors.white,
borderColor: colors.dark,
backgroundColor: colors.dark,
"&:hover": {
color: colors.white,
backgroundColor: colors.darkHover
}
},
white: {
color: colors.dark,
borderColor: colors.white,
backgroundColor: colors.white,
"&:hover": {
color: colors.dark,
backgroundColor: colors.whiteHover
}
},
info: {
color: colors.white,
borderColor: colors.info,
backgroundColor: colors.info,
"&:hover": {
color: colors.white,
backgroundColor: colors.infoHover
}
}
},
buttonStyle: {
primary: {
color: colors.white,
borderColor: colors.primary,
backgroundColor: colors.primary
},
secondary: {
color: colors.white,
borderColor: colors.secondary,
backgroundColor: colors.secondary
},
light: {
color: colors.dark,
borderColor: colors.light,
backgroundColor: colors.light
},
success: {
color: colors.white,
borderColor: colors.success,
backgroundColor: colors.success
},
danger: {
color: colors.white,
borderColor: colors.danger,
backgroundColor: colors.danger
},
warning: {
color: colors.dark,
borderColor: colors.warning,
backgroundColor: colors.warning
},
dark: {
color: colors.white,
borderColor: colors.dark,
backgroundColor: colors.dark
},
white: {
color: colors.dark,
borderColor: colors.white,
backgroundColor: colors.white
},
info: {
color: colors.white,
borderColor: colors.info,
backgroundColor: colors.info
}
},
lightStyle: {
primary: {
color: colors.primary,
borderColor: colors.primary,
backgroundColor: "#E6E6FF"
},
secondary: {
color: colors.secondary,
borderColor: colors.secondary,
backgroundColor: "#F0EDF8"
},
success: {
color: colors.success,
borderColor: colors.success,
backgroundColor: "#E7FAE7"
},
danger: {
color: colors.danger,
borderColor: colors.danger,
backgroundColor: "#FCE9E9"
},
warning: {
color: colors.dark,
borderColor: colors.warning,
backgroundColor: "#FFFBE6"
},
dark: {
color: colors.white,
borderColor: colors.dark,
backgroundColor: "#333333"
},
white: {
color: colors.dark,
borderColor: colors.dark,
backgroundColor: "#F9F9F9"
},
light: {
color: colors.dark,
borderColor: colors.light,
backgroundColor: colors.light
},
info: {
color: colors.white,
borderColor: colors.info,
backgroundColor: colors.info
}
}
};
var AccordionItem = function AccordionItem(props) {
var _useState = React.useState(false),
opened = _useState[0],
setOpened = _useState[1];
var title = props.title,
content = props.content,
style = props.style;
var accordionItemClassName = classNames("accordion", opened ? "accordion-item--opened" : false);
var handleAccordionToggle = function handleAccordionToggle() {
setOpened(!opened);
};
var accordionItemComp = React__default.createElement(styled.ThemeProvider, {
theme: theme
}, React__default.createElement(Component, {
className: accordionItemClassName,
onClick: handleAccordionToggle,
style: style
}, React__default.createElement("div", {
className: "accordion-item__line"
}, React__default.createElement("h3", {
className: "accordion-item__title"
}, title), React__default.createElement("span", {
className: "accordion-item__icon"
})), React__default.createElement("div", {
className: "accordion-item__inner"
}, React__default.createElement("div", {
className: "accordion-item__content"
}, React__default.createElement("p", {
className: "accordion-item__paragraph"
}, content)))));
return accordionItemComp;
};
AccordionItem.defaultProps = {
tag: "div"
};
AccordionItem.propTypes = {
className: PropTypes.string,
onClick: PropTypes.func,
accordionClass: PropTypes.string,
accordionHeaderClass: PropTypes.string,
accordionBodyClass: PropTypes.string,
hideIcon: PropTypes.bool,
tag: PropTypes.string
};
var _templateObject$1, _templateObject2;
var Component$1 = styled__default.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n width: 100%;\n ", ";\n .accordion-list {\n list-style: none;\n margin: 0;\n padding: 0;\n overflow: hidden;\n border: 1px solid #f4f4f4;\n }\n .accordion-list__item + .accordion-list__item {\n border-top: 1px solid #f4f4f4;\n }\n .accordion-item--opened .accordion-item__icon {\n transform: rotate(180deg);\n }\n .accordion-item--opened .accordion-item__inner {\n max-height: 100rem;\n transition-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);\n transition-duration: 0.5s;\n transition-property: max-height;\n }\n .accordion-item--opened .accordion-item__content {\n opacity: 1;\n transform: translateY(0);\n transition-delay: 0.2s;\n transition-timing-function: ease-in-out;\n transition-duration: 0.2s;\n transition-property: opacity, transform;\n }\n .accordion-item__line {\n display: block;\n padding: 0.8rem 1.2rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n background-color: #fff;\n z-index: 2;\n position: relative;\n }\n .accordion-item__title {\n font-size: 1.2rem;\n margin: 0;\n font-weight: 500;\n color: #121212;\n }\n .accordion-item__icon {\n width: 1.5rem;\n height: 1.5rem;\n transition: transform 0.3s ease-in-out;\n background-size: contain;\n background-repeat: no-repeat;\n background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAQAAABIkb+zAAABGklEQVR4Ae3RAcZCQRiF4buDfwshBGi+2UQgcIGAVtpSIuS/KyilG+UTcbk6zIH3GQBm3mM6AAAAAAAAAACA+eqf/yZBXcV/2XeCVPYx1FXj/FjGUMd45AQp/1HHGGLZNL+e61jHnKDmv8652YT1IvPfE2LX/Sh27/ycsF60yT/lk58JYn6eU4MJccjnlAmZ/33i0OAH4jg9Qcw/5g9YJpS+m6n0xvzpCfVe+nn59S7kGyYo+YYJWz3fO+E2PaFs9XzPhMy/6fmWCXq+YUJs9HzrhLh+JsQmrnq+bYKeb52g53snXPR88wQ93z9Bz/dP0PP9E/R89wQ93zpBz7dO0POtE/R86wQ93zpBzzdP+MoHAAAAAAAAAADAExTnTW20AtjhAAAAAElFTkSuQmCC);\n opacity: 0.6;\n }\n .accordion-item__inner {\n max-height: 0;\n overflow: hidden;\n text-transform: cubic-bezier(0.95, 0.05, 0.795, 0.035);\n transition-duration: 0.5s;\n transition-property: max-height;\n z-index: 1;\n position: relative;\n }\n .accordion-item__content {\n opacity: 0;\n transform: translateY(-1rem);\n transition-timing-function: linear, ease;\n transition-duration: 0.1s;\n transition-property: opacity, transform;\n transition-delay: 0.5s;\n padding: 0 1.2rem 1.2rem;\n }\n .accordion-item__paragraph {\n margin: 0;\n font-size: 1rem;\n color: #333;\n font-weight: 300;\n line-height: 1.3;\n }\n"])), function (props) {
return props.hideIcon ? styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n .accordion-item__icon {\n display: none;\n }\n "]))) : null;
});
var Accordion = function Accordion(props) {
var data = props.data,
accordionClass = props.accordionClass,
accordionHeaderClass = props.accordionHeaderClass,
accordionBodyClass = props.accordionBodyClass,
_props$hideIcon = props.hideIcon,
hideIcon = _props$hideIcon === void 0 ? false : _props$hideIcon;
var accordionClassName = classNames("wrapper", accordionClass);
return React__default.createElement(styled.ThemeProvider, {
theme: theme
}, React__default.createElement(Component$1, {
className: accordionClassName,
hideIcon: hideIcon
}, React__default.createElement("ul", {
className: "accordion-list"
}, data.map(function (data, key) {
return React__default.createElement("li", {
className: "accordion-list__item",
key: key
}, React__default.createElement(AccordionItem, Object.assign({}, data, {
accordionHeaderClass: accordionHeaderClass,
accordionBodyClass: accordionBodyClass
})));
}))));
};
Accordion.prototype = {
accordionClass: PropTypes.string,
accordionHeaderClass: PropTypes.string,
accordionBodyClass: PropTypes.string,
hideIcon: PropTypes.bool,
tag: PropTypes.string,
data: PropTypes.arrayOf(PropTypes.any)
};
var _templateObject$2, _templateObject2$1;
var Component$2 = styled__default.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n ", "\n border-radius: 0px;\n align-items:center;\n justify-content:space-between;\n min-width:500px;\n"])), styledSystem.colorStyle);
var Button = styled__default.button(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n\tcolor:inherit;\n\tborder:none;\n\tbackground-color:transparent;\n right: 0px;\n position: absolute;\n padding: 0px 1.2em;\n\t:focus { outline:none;\t}\n"])));
var _excluded = ["className", "tag", "color", "children", "dismiss"];
var Alert = function Alert(props) {
var className = props.className,
tag = props.tag,
color = props.color,
children = props.children,
dismiss = props.dismiss,
attributes = _objectWithoutPropertiesLoose(props, _excluded);
var alertClasses = classNames("alert", className);
var close = function close(e) {
e.target.parentNode.remove();
};
var alertComponent = React__default.createElement(styled.ThemeProvider, {
theme: theme
}, React__default.createElement(Component$2, Object.assign({}, attributes, {
className: alertClasses,
role: "alert",
as: tag,
colors: color
}), children, dismiss ? React__default.createElement(Button, {
onClick: close
}, "\xD7") : null));
return alertComponent;
};
Alert.defaultProps = {
color: "primary",
tag: "div"
};
Alert.propTypes = {
className: PropTypes.string,
color: PropTypes.oneOf(["primary", "secondary", "success", "danger", "warning", "info", "dark", "light"]),
onClose: PropTypes.func,
onClosed: PropTypes.func,
tag: PropTypes.string,
dismiss: PropTypes.bool
};
var _templateObject$3, _templateObject2$2;
var Component$3 = styled__default.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose([""])));
var Container = styled__default.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n .animated {\n animation-duration: 1s;\n animation-fill-mode: both;\n }\n .animated.infinite {\n animation-iteration-count: infinite;\n }\n .animated.delay-1s {\n animation-delay: 1s;\n }\n .animated.delay-2s {\n animation-delay: 2s;\n }\n .animated.delay-3s {\n animation-delay: 3s;\n }\n .animated.delay-4s {\n animation-delay: 4s;\n }\n .animated.delay-5s {\n animation-delay: 5s;\n }\n .animated.fast {\n animation-duration: 800ms;\n }\n .animated.faster {\n animation-duration: 500ms;\n }\n .animated.slow {\n animation-duration: 2s;\n }\n .animated.slower {\n animation-duration: 3s;\n }\n @media (prefers-reduced-motion) {\n .animated {\n transition: none !important;\n animation: unset !important;\n }\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n .fadeIn {\n animation-name: fadeIn;\n }\n @keyframes fadeInDown {\n from {\n opacity: 0;\n transform: translate3d(0, -100%, 0);\n }\n to {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n }\n .fadeInDown {\n animation-name: fadeInDown;\n }\n @keyframes fadeInLeft {\n from {\n opacity: 0;\n transform: translate3d(-100%, 0, 0);\n }\n to {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n }\n .fadeInLeft {\n animation-name: fadeInLeft;\n }\n @keyframes fadeInRight {\n from {\n opacity: 0;\n transform: translate3d(100%, 0, 0);\n }\n to {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n }\n .fadeInRight {\n animation-name: fadeInRight;\n }\n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translate3d(0, 100%, 0);\n }\n to {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n }\n .fadeInUp {\n animation-name: fadeInUp;\n }\n @keyframes fadeOut {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n .fadeOut {\n animation-name: fadeOut;\n }\n @keyframes fadeOutDown {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n transform: translate3d(0, 100%, 0);\n }\n }\n .fadeOutDown {\n animation-name: fadeOutDown;\n }\n @keyframes fadeOutLeft {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n transform: translate3d(-100%, 0, 0);\n }\n }\n .fadeOutLeft {\n animation-name: fadeOutLeft;\n }\n @keyframes fadeOutRight {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n transform: translate3d(100%, 0, 0);\n }\n }\n .fadeOutRight {\n animation-name: fadeOutRight;\n }\n @keyframes fadeOutUp {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n transform: translate3d(0, -100%, 0);\n }\n }\n .fadeOutUp {\n animation-name: fadeOutUp;\n } /*!\n * animate.css -http://daneden.me/animate\n * Version - 3.7.0\n * Licensed under the MIT license - http://opensource.org/licenses/MIT\n *\n * Copyright (c) 2018 Daniel Eden\n */\n @keyframes bounce {\n from,\n 20%,\n 53%,\n 80%,\n to {\n transform: translate3d(0, 0, 0);\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n 40%,\n 43% {\n transform: translate3d(0, -30px, 0);\n animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n }\n 70% {\n transform: translate3d(0, -15px, 0);\n animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n }\n 90% {\n transform: translate3d(0, -4px, 0);\n }\n }\n .bounce {\n transform-origin: center bottom;\n animation-name: bounce;\n }\n @keyframes flash {\n from,\n 50%,\n to {\n opacity: 1;\n }\n 25%,\n 75% {\n opacity: 0;\n }\n }\n .flash {\n animation-name: flash;\n }\n @keyframes pulse {\n from {\n transform: scale3d(1, 1, 1);\n }\n 50% {\n transform: scale3d(1.05, 1.05, 1.05);\n }\n to {\n transform: scale3d(1, 1, 1);\n }\n }\n .pulse {\n animation-name: pulse;\n }\n @keyframes rubberBand {\n from {\n transform: scale3d(1, 1, 1);\n }\n 30% {\n transform: scale3d(1.25, 0.75, 1);\n }\n 40% {\n transform: scale3d(0.75, 1.25, 1);\n }\n 50% {\n transform: scale3d(1.15, 0.85, 1);\n }\n 65% {\n transform: scale3d(0.95, 1.05, 1);\n }\n 75% {\n transform: scale3d(1.05, 0.95, 1);\n }\n to {\n transform: scale3d(1, 1, 1);\n }\n }\n .rubberBand {\n animation-name: rubberBand;\n }\n @keyframes shake {\n from,\n to {\n transform: translate3d(0, 0, 0);\n }\n 10%,\n 30%,\n 50%,\n 70%,\n 90% {\n transform: translate3d(-10px, 0, 0);\n }\n 20%,\n 40%,\n 60%,\n 80% {\n transform: translate3d(10px, 0, 0);\n }\n }\n .shake {\n animation-name: shake;\n }\n @keyframes headShake {\n 0% {\n transform: translateX(0);\n }\n 6.5% {\n transform: translateX(-6px) rotateY(-9deg);\n }\n 18.5% {\n transform: translateX(5px) rotateY(7deg);\n }\n 31.5% {\n transform: translateX(-3px) rotateY(-5deg);\n }\n 43.5% {\n transform: translateX(2px) rotateY(3deg);\n }\n 50% {\n transform: translateX(0);\n }\n }\n .headShake {\n animation-name: headShake;\n animation-timing-function: ease-in-out;\n }\n @keyframes swing {\n 20% {\n transform: rotate3d(0, 0, 1, 15deg);\n }\n 40% {\n transform: rotate3d(0, 0, 1, -10deg);\n }\n 60% {\n transform: rotate3d(0, 0, 1, 5deg);\n }\n 80% {\n transform: rotate3d(0, 0, 1, -5deg);\n }\n to {\n transform: rotate3d(0, 0, 1, 0deg);\n }\n }\n .swing {\n transform-origin: top center;\n animation-name: swing;\n }\n @keyframes tada {\n from {\n transform: scale3d(1, 1, 1);\n }\n 10%,\n 20% {\n transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);\n }\n 30%,\n 50%,\n 70%,\n 90% {\n transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);\n }\n 40%,\n 60%,\n 80% {\n transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);\n }\n to {\n transform: scale3d(1, 1, 1);\n }\n }\n .tada {\n animation-name: tada;\n }\n @keyframes wobble {\n from {\n transform: translate3d(0, 0, 0);\n }\n 15% {\n transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);\n }\n 30% {\n transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);\n }\n 45% {\n transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);\n }\n 60% {\n transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);\n }\n 75% {\n transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n .wobble {\n animation-name: wobble;\n }\n @keyframes jello {\n from,\n 11.1%,\n to {\n transform: translate3d(0, 0, 0);\n }\n 22.2% {\n transform: skewX(-12.5deg) skewY(-12.5deg);\n }\n 33.3% {\n transform: skewX(6.25deg) skewY(6.25deg);\n }\n 44.4% {\n transform: skewX(-3.125deg) skewY(-3.125deg);\n }\n 55.5% {\n transform: skewX(1.5625deg) skewY(1.5625deg);\n }\n 66.6% {\n transform: skewX(-0.78125deg) skewY(-0.78125deg);\n }\n 77.7% {\n transform: skewX(0.39063deg) skewY(0.39063deg);\n }\n 88.8% {\n transform: skewX(-0.19531deg) skewY(-0.19531deg);\n }\n }\n .jello {\n transform-origin: center;\n animation-name: jello;\n }\n @keyframes heartBeat {\n 0% {\n transform: scale(1);\n }\n 14% {\n transform: scale(1.3);\n }\n 28% {\n transform: scale(1);\n }\n 42% {\n transform: scale(1.3);\n }\n 70% {\n transform: scale(1);\n }\n }\n .heartBeat {\n animation-name: heartBeat;\n animation-duration: 1.3s;\n animation-timing-function: ease-in-out;\n }\n @keyframes bounceIn {\n from,\n 20%,\n 40%,\n 60%,\n 80%,\n to {\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n 0% {\n opacity: 0;\n transform: scale3d(0.3, 0.3, 0.3);\n }\n 20% {\n transform: scale3d(1.1, 1.1, 1.1);\n }\n 40% {\n transform: scale3d(0.9, 0.9, 0.9);\n }\n 60% {\n opacity: 1;\n transform: scale3d(1.03, 1.03, 1.03);\n }\n 80% {\n transform: scale3d(0.97, 0.97, 0.97);\n }\n to {\n opacity: 1;\n transform: scale3d(1, 1, 1);\n }\n }\n .bounceIn {\n animation-name: bounceIn;\n animation-duration: 0.75s;\n }\n @keyframes bounceInDown {\n from,\n 60%,\n 75%,\n 90%,\n to {\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n 0% {\n opacity: 0;\n transform: translate3d(0, -3000px, 0);\n }\n 60% {\n opacity: 1;\n transform: translate3d(0, 25px, 0);\n }\n 75% {\n transform: translate3d(0, -10px, 0);\n }\n 90% {\n transform: translate3d(0, 5px, 0);\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n .bounceInDown {\n animation-name: bounceInDown;\n }\n @keyframes bounceInLeft {\n from,\n 60%,\n 75%,\n 90%,\n to {\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n 0% {\n opacity: 0;\n transform: translate3d(-3000px, 0, 0);\n }\n 60% {\n opacity: 1;\n transform: translate3d(25px, 0, 0);\n }\n 75% {\n transform: translate3d(-10px, 0, 0);\n }\n 90% {\n transform: translate3d(5px, 0, 0);\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n .bounceInLeft {\n animation-name: bounceInLeft;\n }\n @keyframes bounceInRight {\n from,\n 60%,\n 75%,\n 90%,\n to {\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n from {\n opacity: 0;\n transform: translate3d(3000px, 0, 0);\n }\n 60% {\n opacity: 1;\n transform: translate3d(-25px, 0, 0);\n }\n 75% {\n transform: translate3d(10px, 0, 0);\n }\n 90% {\n transform: translate3d(-5px, 0, 0);\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n .bounceInRight {\n animation-name: bounceInRight;\n }\n @keyframes bounceInUp {\n from,\n 60%,\n 75%,\n 90%,\n to {\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n from {\n opacity: 0;\n transform: translate3d(0, 3000px, 0);\n }\n 60% {\n opacity: 1;\n transform: translate3d(0, -20px, 0);\n }\n 75% {\n transform: translate3d(0, 10px, 0);\n }\n 90% {\n transform: translate3d(0, -5px, 0);\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n .bounceInUp {\n animation-name: bounceInUp;\n }\n @keyframes bounceOut {\n 20% {\n transform: scale3d(0.9, 0.9, 0.9);\n }\n 50%,\n 55% {\n opacity: 1;\n transform: scale3d(1.1, 1.1, 1.1);\n }\n to {\n opacity: 0;\n transform: scale3d(0.3, 0.3, 0.3);\n }\n }\n .bounceOut {\n animation-name: bounceOut;\n animation-duration: 0.75s;\n }\n @keyframes bounceOutDown {\n 20% {\n transform: translate3d(0, 10px, 0);\n }\n 40%,\n 45% {\n opacity: 1;\n transform: translate3d(0, -20px, 0);\n }\n to {\n opacity: 0;\n transform: translate3d(0, 2000px, 0);\n }\n }\n .bounceOutDown {\n animation-name: bounceOutDown;\n }\n @keyframes bounceOutLeft {\n 20% {\n opacity: 1;\n transform: translate3d(20px, 0, 0);\n }\n to {\n opacity: 0;\n transform: translate3d(-2000px, 0, 0);\n }\n }\n .bounceOutLeft {\n animation-name: bounceOutLeft;\n }\n @keyframes bounceOutRight {\n 20% {\n opacity: 1;\n transform: translate3d(-20px, 0, 0);\n }\n to {\n opacity: 0;\n transform: translate3d(2000px, 0, 0);\n }\n }\n .bounceOutRight {\n animation-name: bounceOutRight;\n }\n @keyframes bounceOutUp {\n 20% {\n transform: translate3d(0, -10px, 0);\n }\n 40%,\n 45% {\n opacity: 1;\n transform: translate3d(0, 20px, 0);\n }\n to {\n opacity: 0;\n transform: translate3d(0, -2000px, 0);\n }\n }\n .bounceOutUp {\n animation-name: bounceOutUp;\n }\n @keyframes fadeInDownBig {\n from {\n opacity: 0;\n transform: translate3d(0, -2000px, 0);\n }\n to {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n }\n .fadeInDownBig {\n animation-name: fadeInDownBig;\n }\n @keyframes fadeInLeftBig {\n from {\n opacity: 0;\n transform: translate3d(-2000px, 0, 0);\n }\n to {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n }\n .fadeInLeftBig {\n animation-name: fadeInLeftBig;\n }\n @keyframes fadeInRightBig {\n from {\n opacity: 0;\n transform: translate3d(2000px, 0, 0);\n }\n to {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n }\n .fadeInRightBig {\n animation-name: fadeInRightBig;\n }\n @keyframes fadeInUpBig {\n from {\n opacity: 0;\n transform: translate3d(0, 2000px, 0);\n }\n to {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n }\n .fadeInUpBig {\n animation-name: fadeInUpBig;\n }\n @keyframes fadeOutDownBig {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n transform: translate3d(0, 2000px, 0);\n }\n }\n .fadeOutDownBig {\n animation-name: fadeOutDownBig;\n }\n @keyframes fadeOutLeftBig {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n transform: translate3d(-2000px, 0, 0);\n }\n }\n .fadeOutLeftBig {\n animation-name: fadeOutLeftBig;\n }\n @keyframes fadeOutRightBig {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n transform: translate3d(2000px, 0, 0);\n }\n }\n .fadeOutRightBig {\n animation-name: fadeOutRightBig;\n }\n @keyframes fadeOutUpBig {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n transform: translate3d(0, -2000px, 0);\n }\n }\n .fadeOutUpBig {\n animation-name: fadeOutUpBig;\n }\n @keyframes flip {\n from {\n transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)\n rotate3d(0, 1, 0, -360deg);\n animation-timing-function: ease-out;\n }\n 40% {\n transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)\n rotate3d(0, 1, 0, -190deg);\n animation-timing-function: ease-out;\n }\n 50% {\n transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)\n rotate3d(0, 1, 0, -170deg);\n animation-timing-function: ease-in;\n }\n 80% {\n transform: perspective(400px) scale3d(0.95, 0.95, 0.95)\n translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);\n animation-timing-function: ease-in;\n }\n to {\n transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)\n rotate3d(0, 1, 0, 0deg);\n animation-timing-function: ease-in;\n }\n }\n .flip {\n backface-visibility: visible;\n animation-name: flip;\n }\n @keyframes flipInX {\n from {\n opacity: 0;\n transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n animation-timing-function: ease-in;\n }\n 40% {\n transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n animation-timing-function: ease-in;\n }\n 60% {\n opacity: 1;\n transform: perspective(400px) rotate3d(1, 0, 0, 10deg);\n }\n 80% {\n transform: perspective(400px) rotate3d(1, 0, 0, -5deg);\n }\n to {\n transform: perspective(400px);\n }\n }\n .flipInX {\n backface-visibility: visible;\n animation-name: flipInX;\n }\n @keyframes flipInY {\n from {\n opacity: 0;\n transform: perspective(400px) rotate3d(0, 1, 0, 90deg);\n animation-timing-function: ease-in;\n }\n 40% {\n transform: perspective(400px) rotate3d(0, 1, 0, -20deg);\n animation-timing-function: ease-in;\n }\n 60% {\n opacity: 1;\n transform: perspective(400px) rotate3d(0, 1, 0, 10deg);\n }\n 80% {\n transform: perspective(400px) rotate3d(0, 1, 0, -5deg);\n }\n to {\n transform: perspective(400px);\n }\n }\n .flipInY {\n backface-visibility: visible;\n animation-name: flipInY;\n }\n @keyframes flipOutX {\n from {\n transform: perspective(400px);\n }\n 30% {\n opacity: 1;\n transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n }\n to {\n opacity: 0;\n transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n }\n }\n .flipOutX {\n animation-name: flipOutX;\n animation-duration: 0.75s;\n backface-visibility: visible;\n }\n @keyframes flipOutY {\n from {\n transform: perspective(400px);\n }\n 30% {\n opacity: 1;\n transform: perspective(400px) rotate3d(0, 1, 0, -15deg);\n }\n to {\n opacity: 0;\n transform: perspective(400px) rotate3d(0, 1, 0, 90deg);\n }\n }\n .flipOutY {\n animation-name: flipOutY;\n animation-duration: 0.75s;\n backface-visibility: visible;\n }\n @keyframes lightSpeedIn {\n from {\n opacity: 0;\n transform: translate3d(100%, 0, 0) skewX(-30deg);\n }\n 60% {\n opacity: 1;\n transform: skewX(20deg);\n }\n 80% {\n transform: skewX(-5deg);\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n .lightSpeedIn {\n animation-name: lightSpeedIn;\n animation-timing-function: ease-out;\n }\n @keyframes lightSpeedOut {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n transform: translate3d(100%, 0, 0) skewX(30deg);\n }\n }\n .lightSpeedOut {\n animation-name: lightSpeedOut;\n animation-timing-function: ease-in;\n }\n @keyframes rotateIn {\n from {\n opacity: 0;\n transform: rotate3d(0, 0, 1, -200deg);\n transform-origin: center;\n }\n to {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n transform-origin: center;\n }\n }\n .rotateIn {\n animation-name: rotateIn;\n }\n @keyframes rotateInDownLeft {\n from {\n opacity: 0;\n transform: rotate3d(0, 0, 1, -45deg);\n transform-origin: left bottom;\n }\n to {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n transform-origin: left bottom;\n }\n }\n .rotateInDownLeft {\n animation-name: rotateInDownLeft;\n }\n @keyframes rotateInDownRight {\n from {\n opacity: 0;\n transform: rotate3d(0, 0, 1, 45deg);\n transform-origin: right bottom;\n }\n to {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n transform-origin: right bottom;\n }\n }\n .rotateInDownRight {\n animation-name: rotateInDownRight;\n }\n @keyframes rotateInUpLeft {\n from {\n opacity: 0;\n transform: rotate3d(0, 0, 1, 45deg);\n transform-origin: left bottom;\n }\n to {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n transform-origin: left bottom;\n }\n }\n .rotateInUpLeft {\n animation-name: rotateInUpLeft;\n }\n @keyframes rotateInUpRight {\n from {\n opacity: 0;\n transform: rotate3d(0, 0, 1, -90deg);\n transform-origin: right bottom;\n }\n to {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n transform-origin: right bottom;\n }\n }\n .rotateInUpRight {\n animation-name: rotateInUpRight;\n }\n @keyframes rotateOut {\n from {\n opacity: 1;\n transform-origin: center;\n }\n to {\n opacity: 0;\n transform: rotate3d(0, 0, 1, 200deg);\n transform-origin: center;\n }\n }\n .rotateOut {\n animation-name: rotateOut;\n }\n @keyframes rotateOutDownLeft {\n from {\n opacity: 1;\n transform-origin: left bottom;\n }\n to {\n opacity: 0;\n transform: rotate3d(0, 0, 1, 45deg);\n transform-origin: left bottom;\n }\n }\n .rotateOutDownLeft {\n animation-name: rotateOutDownLeft;\n }\n @keyframes rotateOutDownRight {\n from {\n opacity: 1;\n transform-origin: right bottom;\n }\n to {\n opacity: 0;\n transform: rotate3d(0, 0, 1, -45deg);\n transform-origin: right bottom;\n }\n }\n .rotateOutDownRight {\n animation-name: rotateOutDownRight;\n }\n @keyframes rotateOutUpLeft {\n from {\n opacity: 1;\n transform-origin: left bottom;\n }\n to {\n opacity: 0;\n transform: rotate3d(0, 0, 1, -45deg);\n transform-origin: left bottom;\n }\n }\n .rotateOutUpLeft {\n animation-name: rotateOutUpLeft;\n }\n @keyframes rotateOutUpRight {\n from {\n opacity: 1;\n transform-origin: right bottom;\n }\n to {\n opacity: 0;\n transform: rotate3d(0, 0, 1, 90deg);\n transform-origin: right bottom;\n }\n }\n .rotateOutUpRight {\n animation-name: rotateOutUpRight;\n }\n @keyframes hinge {\n 0% {\n transform-origin: top left;\n animation-timing-function: ease-in-out;\n }\n 20%,\n 60% {\n transform: rotate3d(0, 0, 1, 80deg);\n transform-origin: top left;\n animation-timing-function: ease-in-out;\n }\n 40%,\n 80% {\n opacity: 1;\n transform: rotate3d(0, 0, 1, 60deg);\n transform-origin: top left;\n animation-timing-function: ease-in-out;\n }\n to {\n opacity: 0;\n transform: translate3d(0, 700px, 0);\n }\n }\n .hinge {\n animation-name: hinge;\n animation-duration: 2s;\n }\n @keyframes jackInTheBox {\n from {\n opacity: 0;\n transform: scale(0.1) rotate(30deg);\n transform-origin: center bottom;\n }\n 50% {\n transform: rotate(-10deg);\n }\n 70% {\n transform: rotate(3deg);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n .jackInTheBox {\n animation-name: jackInTheBox;\n }\n @keyframes rollIn {\n from {\n opacity: 0;\n transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);\n }\n to {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n }\n .rollIn {\n animation-name: rollIn;\n }\n @keyframes rollOut {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);\n }\n }\n .rollOut {\n animation-name: rollOut;\n }\n @keyframes zoomIn {\n from {\n opacity: 0;\n transform: scale3d(0.3, 0.3, 0.3);\n }\n 50% {\n opacity: 1;\n }\n }\n .zoomIn {\n animation-name: zoomIn;\n }\n @keyframes zoomInDown {\n from {\n opacity: 0;\n transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);\n animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n }\n 60% {\n opacity: 1;\n transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n }\n }\n .zoomInDown {\n animation-name: zoomInDown;\n }\n @keyframes zoomInLeft {\n from {\n opacity: 0;\n transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);\n animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n }\n 60% {\n opacity: 1;\n transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n }\n }\n .zoomInLeft {\n animation-name: zoomInLeft;\n }\n @keyframes zoomInRight {\n from {\n opacity: 0;\n transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);\n animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n }\n 60% {\n opacity: 1;\n transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n }\n }\n .zoomInRight {\n animation-name: zoomInRight;\n }\n @keyframes zoomInUp {\n from {\n opacity: 0;\n transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);\n animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n }\n 60% {\n opacity: 1;\n transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n }\n }\n .zoomInUp {\n animation-name: zoomInUp;\n }\n @keyframes zoomOut {\n from {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n transform: scale3d(0.3, 0.3, 0.3);\n }\n to {\n opacity: 0;\n }\n }\n .zoomOut {\n animation-name: zoomOut;\n }\n @keyframes zoomOutDown {\n 40% {\n opacity: 1;\n transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);\n animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n }\n to {\n opacity: 0;\n transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);\n transform-origin: center bottom;\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n }\n }\n .zoomOutDown {\n animation-name: zoomOutDown;\n }\n @keyframes zoomOutLeft {\n 40% {\n opacity: 1;\n transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);\n }\n to {\n opacity: 0;\n transform: scale(0.1) translate3d(-2000px, 0, 0);\n transform-origin: left center;\n }\n }\n .zoomOutLeft {\n animation-name: zoomOutLeft;\n }\n @keyframes zoomOutRight {\n 40% {\n opacity: 1;\n transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);\n }\n to {\n opacity: 0;\n transform: scale(0.1) translate3d(2000px, 0, 0);\n transform-origin: right center;\n }\n }\n .zoomOutRight {\n animation-name: zoomOutRight;\n }\n @keyframes zoomOutUp {\n 40% {\n opacity: 1;\n transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);\n animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n }\n to {\n opacity: 0;\n transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);\n transform-origin: center bottom;\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n }\n }\n .zoomOutUp {\n animation-name: zoomOutUp;\n }\n @keyframes slideInDown {\n from {\n visibility: visible;\n transform: translate3d(0, -100%, 0);\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n .slideInDown {\n animation-name: slideInDown;\n }\n @keyframes slideInLeft {\n from {\n visibility: visible;\n transform: translate3d(-100%, 0, 0);\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n .slideInLeft {\n animation-name: slideInLeft;\n }\n @keyframes slideInRight {\n from {\n visibility: visible;\n transform: translate3d(100%, 0, 0);\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n .slideInRight {\n animation-name: slideInRight;\n }\n @keyframes slideInUp {\n from {\n visibility: visible;\n transform: translate3d(0, 100%, 0);\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n .slideInUp {\n animation-name: slideInUp;\n }\n @keyframes slideOutDown {\n from {\n transform: translate3d(0, 0, 0);\n }\n to {\n visibility: hidden;\n transform: translate3d(0, 100%, 0);\n }\n }\n .slideOutDown {\n animation-name: slideOutDown;\n }\n @keyframes slideOutLeft {\n from {\n transform: translate3d(0, 0, 0);\n }\n to {\n visibility: hidden;\n transform: translate3d(-100%, 0, 0);\n }\n }\n .slideOutLeft {\n animation-name: slideOutLeft;\n }\n @keyframes slideOutRight {\n from {\n transform: translate3d(0, 0, 0);\n }\n to {\n visibility: hidden;\n transform: translate3d(100%, 0, 0);\n }\n }\n .slideOutRight {\n animation-name: slideOutRight;\n }\n @keyframes slideOutUp {\n from {\n transform: translate3d(0, 0, 0);\n }\n to {\n visibility: hidden;\n transform: translate3d(0, -100%, 0);\n }\n }\n .slideOutUp {\n animation-name: slideOutUp;\n }\n"])));
var _excluded$1 = ["tag", "children", "className", "count", "delay", "duration", "infinite", "reveal", "style", "currentRef", "clientHeight", "type", "countIterations", "onAnimationStart", "onAnimationIteration", "onAnimationEnd"];
var Animation = function Animation(props) {
var tag = props.tag,
children = props.children,
className = props.className,
count = props.count,
delay = props.delay,
duration = props.duration,
infinite = props.infinite,
reveal = props.reveal,
style = props.style,
type = props.type,
countIterations = props.countIterations,
onAnimationStart = props.onAnimationStart,
onAnimationIteration = props.onAnimationIteration,
onAnimationEnd = props.onAnimationEnd,
attributes = _objectWithoutPropertiesLoose(props, _excluded$1);
var _useState = React.useState({
isVisible: false,
revealed: false,
countIterations: 0
}),
state = _useState[0],
setState = _useState[1];
var elemRef = React.createRef();
var handleStart = function handleStart() {
setState(_extends({}, state, {
countIterations: countIterations + 1
}));
if (onAnimationStart) {
onAnimationStart();
}
};
var handleIteration = function handleIteration() {
if (onAnimationIteration) {
setState(_extends({}, state, {
countIterations: countIterations + 1
}));
onAnimationIteration();
}
};
var handleEnd = function handleEnd() {
setState(_extends({}, state, {
countIterations: countIterations + 1
}));
if (onAnimationEnd && count === countIterations) {
onAnimationEnd();
}
};
var getOffset = function getOffset(elem) {
var box = elem.getBoundingClientRect();
var _document = document,
body = _document.body;
var docEl = document.documentElement;
var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
var clientTop = docEl.clientTop || body.clientTop || 0;
var top = box.top + scrollTop - clientTop;
return Math.round(top);
};
var updatePredicate = React.useCallback(function () {
var windowHeight = window.innerHeight;
var scroll = window.scrollY;
var docHeight = document.documentElement.offsetHeight;
var currentRef = elemRef.current;
if (windowHeight + scroll - 100 > getOffset(currentRef) && scroll < getOffset(currentRef) || windowHeight + scroll - 100 > getOffset(currentRef) + currentRef.clientHeight && scroll < getOffset(currentRef) + currentRef.clientHeight || windowHeight + scroll === docHeight && getOffset(currentRef) + 100 > docHeight) {
setState(_extends({}, state, {
isVisible: true,
revealed: true
}));
} else if (!state.revealed) {
setState(_extends({}, state, {
isVisible: false,
revealed: true
}));
}
}, [state, elemRef]);
useDeepCompareEffect(function () {
setState(_extends({}, state, {
isVisible: !reveal,
revealed: !reveal
}));
if (state.revealed) {
window.addEventListener("scroll", updatePredicate);
updatePredicate();
}
return function () {
if (state.revealed) {
window.removeEventListener("scroll", updatePredicate);
}
};
}, [state, reveal]);
var styleObject = {
animationDuration: duration,
animationDelay: delay,
animationIterationCount: infinite ? false : count,
visibility: state.isVisible ? "visible" : "hidden",
animationName: type
};
var hiddenStyles = {
animationName: "none",
visibility: "hidden"
};
var getAllStyles = Object.assign(styleObject, style);
var classes = classNames(state.isVisible && "animated", type && type, infinite && "infinite", className);
var animationComponent = React__default.createElement(styled.ThemeProvider, {
theme: theme
}, React__default.createElement(Container, null, React__default.createElement(Component$3, Object.assign({
as: tag,
"data-test": "animation",
className: classes,
onAnimationEnd: handleEnd,
onAnimationIteration: handleIteration,
onAnimationStart: handleStart,
ref: elemRef,
style: state.isVisible && state.revealed ? getAllStyles : hiddenStyles
}, attributes), children)));
return animationComponent;
};
Animation.propTypes = {
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
className: PropTypes.string,
count: PropTypes.number,
delay: PropTypes.string,
duration: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
infinite: PropTypes.bool,
onAnimationEnd: PropTypes.func,
onAnimationIteration: PropTypes.func,
onAnimationStart: PropTypes.func,
reveal: PropTypes.bool,
style: PropTypes.node,
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
type: PropTypes.string,
countIterations: PropTypes.number
};
Animation.defaultProps = {
tag: "div",
reveal: false,
duration: 1,
count: 1
};
var _templateObject$4;
var Component$4 = styled__default.span(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n ", "\n ", "\n font-weight:200;\n box-shadow: ", ";\n\n ", ";\n ", "\n .i