` will be\n passed to the HTML element, allowing you set the `className`, `style`, etc.\n\n ```jsx\n import { InView } from 'react-intersection-observer';\n\n const Component = () => (\n console.log('Inview:', inView)}>\n Plain children are always rendered. Use onChange to monitor state.
\n \n );\n\n export default Component;\n ```\n */\nexport class InView extends React.Component<\n IntersectionObserverProps | PlainChildrenProps,\n State\n> {\n node: Element | null = null;\n _unobserveCb: (() => void) | null = null;\n\n constructor(props: IntersectionObserverProps | PlainChildrenProps) {\n super(props);\n this.state = {\n inView: !!props.initialInView,\n entry: undefined,\n };\n }\n\n componentDidMount() {\n this.unobserve();\n this.observeNode();\n }\n\n componentDidUpdate(prevProps: IntersectionObserverProps) {\n // If a IntersectionObserver option changed, reinit the observer\n if (\n prevProps.rootMargin !== this.props.rootMargin ||\n prevProps.root !== this.props.root ||\n prevProps.threshold !== this.props.threshold ||\n prevProps.skip !== this.props.skip ||\n prevProps.trackVisibility !== this.props.trackVisibility ||\n prevProps.delay !== this.props.delay\n ) {\n this.unobserve();\n this.observeNode();\n }\n }\n\n componentWillUnmount() {\n this.unobserve();\n }\n\n observeNode() {\n if (!this.node || this.props.skip) return;\n const {\n threshold,\n root,\n rootMargin,\n trackVisibility,\n delay,\n fallbackInView,\n } = this.props;\n\n this._unobserveCb = observe(\n this.node,\n this.handleChange,\n {\n threshold,\n root,\n rootMargin,\n // @ts-ignore\n trackVisibility,\n // @ts-ignore\n delay,\n },\n fallbackInView,\n );\n }\n\n unobserve() {\n if (this._unobserveCb) {\n this._unobserveCb();\n this._unobserveCb = null;\n }\n }\n\n handleNode = (node?: Element | null) => {\n if (this.node) {\n // Clear the old observer, before we start observing a new element\n this.unobserve();\n\n if (!node && !this.props.triggerOnce && !this.props.skip) {\n // Reset the state if we get a new node, and we aren't ignoring updates\n this.setState({ inView: !!this.props.initialInView, entry: undefined });\n }\n }\n\n this.node = node ? node : null;\n this.observeNode();\n };\n\n handleChange = (inView: boolean, entry: IntersectionObserverEntry) => {\n if (inView && this.props.triggerOnce) {\n // If `triggerOnce` is true, we should stop observing the element.\n this.unobserve();\n }\n if (!isPlainChildren(this.props)) {\n // Store the current State, so we can pass it to the children in the next render update\n // There's no reason to update the state for plain children, since it's not used in the rendering.\n this.setState({ inView, entry });\n }\n if (this.props.onChange) {\n // If the user is actively listening for onChange, always trigger it\n this.props.onChange(inView, entry);\n }\n };\n\n render() {\n const { children } = this.props;\n if (typeof children === \"function\") {\n const { inView, entry } = this.state;\n return children({ inView, entry, ref: this.handleNode });\n }\n\n const {\n as,\n triggerOnce,\n threshold,\n root,\n rootMargin,\n onChange,\n skip,\n trackVisibility,\n delay,\n initialInView,\n fallbackInView,\n ...props\n } = this.props as PlainChildrenProps;\n\n return React.createElement(\n as || \"div\",\n { ref: this.handleNode, ...props },\n children,\n );\n }\n}\n","import * as React from \"react\";\nimport type { InViewHookResponse, IntersectionOptions } from \"./index\";\nimport { observe } from \"./observe\";\n\ntype State = {\n inView: boolean;\n entry?: IntersectionObserverEntry;\n};\n\n/**\n * React Hooks make it easy to monitor the `inView` state of your components. Call\n * the `useInView` hook with the (optional) [options](#options) you need. It will\n * return an array containing a `ref`, the `inView` status and the current\n * [`entry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry).\n * Assign the `ref` to the DOM element you want to monitor, and the hook will\n * report the status.\n *\n * @example\n * ```jsx\n * import React from 'react';\n * import { useInView } from 'react-intersection-observer';\n *\n * const Component = () => {\n * const { ref, inView, entry } = useInView({\n * threshold: 0,\n * });\n *\n * return (\n * \n *
{`Header inside viewport ${inView}.`}
\n * \n * );\n * };\n * ```\n */\nexport function useInView({\n threshold,\n delay,\n trackVisibility,\n rootMargin,\n root,\n triggerOnce,\n skip,\n initialInView,\n fallbackInView,\n onChange,\n}: IntersectionOptions = {}): InViewHookResponse {\n const [ref, setRef] = React.useState(null);\n const callback = React.useRef();\n const [state, setState] = React.useState({\n inView: !!initialInView,\n entry: undefined,\n });\n\n // Store the onChange callback in a `ref`, so we can access the latest instance\n // inside the `useEffect`, but without triggering a rerender.\n callback.current = onChange;\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: threshold is not correctly detected as a dependency\n React.useEffect(\n () => {\n // Ensure we have node ref, and that we shouldn't skip observing\n if (skip || !ref) return;\n\n let unobserve: (() => void) | undefined;\n unobserve = observe(\n ref,\n (inView, entry) => {\n setState({\n inView,\n entry,\n });\n if (callback.current) callback.current(inView, entry);\n\n if (entry.isIntersecting && triggerOnce && unobserve) {\n // If it should only trigger once, unobserve the element after it's inView\n unobserve();\n unobserve = undefined;\n }\n },\n {\n root,\n rootMargin,\n threshold,\n // @ts-ignore\n trackVisibility,\n // @ts-ignore\n delay,\n },\n fallbackInView,\n );\n\n return () => {\n if (unobserve) {\n unobserve();\n }\n };\n },\n // We break the rule here, because we aren't including the actual `threshold` variable\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n // If the threshold is an array, convert it to a string, so it won't change between renders.\n Array.isArray(threshold) ? threshold.toString() : threshold,\n ref,\n root,\n rootMargin,\n triggerOnce,\n skip,\n trackVisibility,\n fallbackInView,\n delay,\n ],\n );\n\n const entryTarget = state.entry?.target;\n const previousEntryTarget = React.useRef();\n if (\n !ref &&\n entryTarget &&\n !triggerOnce &&\n !skip &&\n previousEntryTarget.current !== entryTarget\n ) {\n // If we don't have a node ref, then reset the state (unless the hook is set to only `triggerOnce` or `skip`)\n // This ensures we correctly reflect the current state - If you aren't observing anything, then nothing is inView\n previousEntryTarget.current = entryTarget;\n setState({\n inView: !!initialInView,\n entry: undefined,\n });\n }\n\n const result = [setRef, state.inView, state.entry] as InViewHookResponse;\n\n // Support object destructuring, by adding the specific values.\n result.ref = result[0];\n result.inView = result[1];\n result.entry = result[2];\n\n return result;\n}\n","import { jsx, Fragment } from '@emotion/react/jsx-runtime';\nimport { keyframes, css, ClassNames } from '@emotion/react';\nimport { useMemo, Children, isValidElement } from 'react';\nimport { InView, useInView } from 'react-intersection-observer';\nimport { isFragment } from 'react-is';\n\nconst bounce = keyframes`\n from,\n 20%,\n 53%,\n to {\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n transform: translate3d(0, 0, 0);\n }\n\n 40%,\n 43% {\n animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n transform: translate3d(0, -30px, 0) scaleY(1.1);\n }\n\n 70% {\n animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n transform: translate3d(0, -15px, 0) scaleY(1.05);\n }\n\n 80% {\n transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n transform: translate3d(0, 0, 0) scaleY(0.95);\n }\n\n 90% {\n transform: translate3d(0, -4px, 0) scaleY(1.02);\n }\n`;\n\nconst flash = keyframes`\n from,\n 50%,\n to {\n opacity: 1;\n }\n\n 25%,\n 75% {\n opacity: 0;\n }\n`;\n\nconst headShake = keyframes`\n 0% {\n transform: translateX(0);\n }\n\n 6.5% {\n transform: translateX(-6px) rotateY(-9deg);\n }\n\n 18.5% {\n transform: translateX(5px) rotateY(7deg);\n }\n\n 31.5% {\n transform: translateX(-3px) rotateY(-5deg);\n }\n\n 43.5% {\n transform: translateX(2px) rotateY(3deg);\n }\n\n 50% {\n transform: translateX(0);\n }\n`;\n\nconst heartBeat = keyframes`\n 0% {\n transform: scale(1);\n }\n\n 14% {\n transform: scale(1.3);\n }\n\n 28% {\n transform: scale(1);\n }\n\n 42% {\n transform: scale(1.3);\n }\n\n 70% {\n transform: scale(1);\n }\n`;\n\nconst jello = keyframes`\n from,\n 11.1%,\n to {\n transform: translate3d(0, 0, 0);\n }\n\n 22.2% {\n transform: skewX(-12.5deg) skewY(-12.5deg);\n }\n\n 33.3% {\n transform: skewX(6.25deg) skewY(6.25deg);\n }\n\n 44.4% {\n transform: skewX(-3.125deg) skewY(-3.125deg);\n }\n\n 55.5% {\n transform: skewX(1.5625deg) skewY(1.5625deg);\n }\n\n 66.6% {\n transform: skewX(-0.78125deg) skewY(-0.78125deg);\n }\n\n 77.7% {\n transform: skewX(0.390625deg) skewY(0.390625deg);\n }\n\n 88.8% {\n transform: skewX(-0.1953125deg) skewY(-0.1953125deg);\n }\n`;\n\nconst pulse = keyframes`\n from {\n transform: scale3d(1, 1, 1);\n }\n\n 50% {\n transform: scale3d(1.05, 1.05, 1.05);\n }\n\n to {\n transform: scale3d(1, 1, 1);\n }\n`;\n\nconst rubberBand = keyframes`\n from {\n transform: scale3d(1, 1, 1);\n }\n\n 30% {\n transform: scale3d(1.25, 0.75, 1);\n }\n\n 40% {\n transform: scale3d(0.75, 1.25, 1);\n }\n\n 50% {\n transform: scale3d(1.15, 0.85, 1);\n }\n\n 65% {\n transform: scale3d(0.95, 1.05, 1);\n }\n\n 75% {\n transform: scale3d(1.05, 0.95, 1);\n }\n\n to {\n transform: scale3d(1, 1, 1);\n }\n`;\n\nconst shake = keyframes`\n from,\n to {\n transform: translate3d(0, 0, 0);\n }\n\n 10%,\n 30%,\n 50%,\n 70%,\n 90% {\n transform: translate3d(-10px, 0, 0);\n }\n\n 20%,\n 40%,\n 60%,\n 80% {\n transform: translate3d(10px, 0, 0);\n }\n`;\n\nconst shakeX = keyframes`\n from,\n to {\n transform: translate3d(0, 0, 0);\n }\n\n 10%,\n 30%,\n 50%,\n 70%,\n 90% {\n transform: translate3d(-10px, 0, 0);\n }\n\n 20%,\n 40%,\n 60%,\n 80% {\n transform: translate3d(10px, 0, 0);\n }\n`;\n\nconst shakeY = keyframes`\n from,\n to {\n transform: translate3d(0, 0, 0);\n }\n\n 10%,\n 30%,\n 50%,\n 70%,\n 90% {\n transform: translate3d(0, -10px, 0);\n }\n\n 20%,\n 40%,\n 60%,\n 80% {\n transform: translate3d(0, 10px, 0);\n }\n`;\n\nconst swing = keyframes`\n 20% {\n transform: rotate3d(0, 0, 1, 15deg);\n }\n\n 40% {\n transform: rotate3d(0, 0, 1, -10deg);\n }\n\n 60% {\n transform: rotate3d(0, 0, 1, 5deg);\n }\n\n 80% {\n transform: rotate3d(0, 0, 1, -5deg);\n }\n\n to {\n transform: rotate3d(0, 0, 1, 0deg);\n }\n`;\n\nconst tada = keyframes`\n from {\n transform: scale3d(1, 1, 1);\n }\n\n 10%,\n 20% {\n transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);\n }\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\n 40%,\n 60%,\n 80% {\n transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);\n }\n\n to {\n transform: scale3d(1, 1, 1);\n }\n`;\n\nconst wobble = keyframes`\n from {\n transform: translate3d(0, 0, 0);\n }\n\n 15% {\n transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);\n }\n\n 30% {\n transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);\n }\n\n 45% {\n transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);\n }\n\n 60% {\n transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);\n }\n\n 75% {\n transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);\n }\n\n to {\n transform: translate3d(0, 0, 0);\n }\n`;\n\nconst fadeIn = keyframes`\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n`;\n\nconst fadeInBottomLeft = keyframes`\n from {\n opacity: 0;\n transform: translate3d(-100%, 100%, 0);\n }\n\n to {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n`;\n\nconst fadeInBottomRight = keyframes`\n from {\n opacity: 0;\n transform: translate3d(100%, 100%, 0);\n }\n\n to {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n`;\n\nconst fadeInDown = keyframes`\n from {\n opacity: 0;\n transform: translate3d(0, -100%, 0);\n }\n\n to {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n`;\n\nconst fadeInDownBig = keyframes`\n from {\n opacity: 0;\n transform: translate3d(0, -2000px, 0);\n }\n\n to {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n`;\n\nconst fadeInLeft = keyframes`\n from {\n opacity: 0;\n transform: translate3d(-100%, 0, 0);\n }\n\n to {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n`;\n\nconst fadeInLeftBig = keyframes`\n from {\n opacity: 0;\n transform: translate3d(-2000px, 0, 0);\n }\n\n to {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n`;\n\nconst fadeInRight = keyframes`\n from {\n opacity: 0;\n transform: translate3d(100%, 0, 0);\n }\n\n to {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n`;\n\nconst fadeInRightBig = keyframes`\n from {\n opacity: 0;\n transform: translate3d(2000px, 0, 0);\n }\n\n to {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n`;\n\nconst fadeInTopLeft = keyframes`\n from {\n opacity: 0;\n transform: translate3d(-100%, -100%, 0);\n }\n\n to {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n`;\n\nconst fadeInTopRight = keyframes`\n from {\n opacity: 0;\n transform: translate3d(100%, -100%, 0);\n }\n\n to {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n`;\n\nconst fadeInUp = keyframes`\n from {\n opacity: 0;\n transform: translate3d(0, 100%, 0);\n }\n\n to {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n`;\n\nconst fadeInUpBig = keyframes`\n from {\n opacity: 0;\n transform: translate3d(0, 2000px, 0);\n }\n\n to {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n`;\n\nfunction getAnimationCss({\n duration = 1e3,\n delay = 0,\n timingFunction = \"ease\",\n keyframes = fadeInLeft,\n iterationCount = 1\n}) {\n return css`\n animation-duration: ${duration}ms;\n animation-timing-function: ${timingFunction};\n animation-delay: ${delay}ms;\n animation-name: ${keyframes};\n animation-direction: normal;\n animation-fill-mode: both;\n animation-iteration-count: ${iterationCount};\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n `;\n}\n\nfunction isNullable(a) {\n return a == void 0;\n}\nfunction isStringLike(value) {\n return typeof value === \"string\" || typeof value === \"number\" || typeof value === \"boolean\";\n}\n\nfunction matchIf(onTrue, onFalse) {\n return (condition) => condition ? onTrue() : onFalse();\n}\nfunction matchIfOrNull(onTrue) {\n return matchIf(onTrue, () => null);\n}\n\nfunction hideWhen(condition) {\n return matchIfOrNull(() => ({ opacity: 0 }))(condition);\n}\nconst Reveal = (props) => {\n const {\n cascade = false,\n damping = 0.5,\n delay = 0,\n duration = 1e3,\n fraction = 0,\n keyframes = fadeInLeft,\n triggerOnce = false,\n className,\n style,\n childClassName,\n childStyle,\n children,\n onVisibilityChange\n } = props;\n const animationStyles = useMemo(\n () => getAnimationCss({\n keyframes,\n duration\n }),\n [duration, keyframes]\n );\n if (isNullable(children))\n return null;\n if (isStringLike(children))\n return /* @__PURE__ */ jsx(TextReveal, { ...props, animationStyles, children: String(children) });\n if (isFragment(children))\n return /* @__PURE__ */ jsx(FragmentReveal, { ...props, animationStyles });\n return /* @__PURE__ */ jsx(Fragment, { children: Children.map(children, (node, index) => {\n if (!isValidElement(node))\n return null;\n const nodeDelay = delay + (cascade ? index * duration * damping : 0);\n switch (node.type) {\n case \"ol\":\n case \"ul\":\n return /* @__PURE__ */ jsx(ClassNames, { children: ({ cx }) => /* @__PURE__ */ jsx(\n node.type,\n {\n ...node.props,\n className: cx(className, node.props.className),\n style: Object.assign({}, style, node.props.style),\n children: /* @__PURE__ */ jsx(Reveal, { ...props, children: node.props.children })\n }\n ) });\n case \"li\":\n return /* @__PURE__ */ jsx(\n InView,\n {\n threshold: fraction,\n triggerOnce,\n onChange: onVisibilityChange,\n children: ({ inView, ref }) => /* @__PURE__ */ jsx(ClassNames, { children: ({ cx }) => /* @__PURE__ */ jsx(\n node.type,\n {\n ...node.props,\n ref,\n className: cx(childClassName, node.props.className),\n css: matchIfOrNull(() => animationStyles)(inView),\n style: Object.assign(\n {},\n childStyle,\n node.props.style,\n hideWhen(!inView),\n {\n animationDelay: nodeDelay + \"ms\"\n }\n )\n }\n ) })\n }\n );\n default:\n return /* @__PURE__ */ jsx(\n InView,\n {\n threshold: fraction,\n triggerOnce,\n onChange: onVisibilityChange,\n children: ({ inView, ref }) => /* @__PURE__ */ jsx(\n \"div\",\n {\n ref,\n className,\n css: matchIfOrNull(() => animationStyles)(inView),\n style: Object.assign({}, style, hideWhen(!inView), {\n animationDelay: nodeDelay + \"ms\"\n }),\n children: /* @__PURE__ */ jsx(ClassNames, { children: ({ cx }) => /* @__PURE__ */ jsx(\n node.type,\n {\n ...node.props,\n className: cx(childClassName, node.props.className),\n style: Object.assign(\n {},\n childStyle,\n node.props.style\n )\n }\n ) })\n }\n )\n }\n );\n }\n }) });\n};\nconst textBaseStyles = {\n display: \"inline-block\",\n whiteSpace: \"pre\"\n};\nconst TextReveal = (props) => {\n const {\n animationStyles,\n cascade = false,\n damping = 0.5,\n delay = 0,\n duration = 1e3,\n fraction = 0,\n triggerOnce = false,\n className,\n style,\n children,\n onVisibilityChange\n } = props;\n const { ref, inView } = useInView({\n triggerOnce,\n threshold: fraction,\n onChange: onVisibilityChange\n });\n return matchIf(\n () => /* @__PURE__ */ jsx(\n \"div\",\n {\n ref,\n className,\n style: Object.assign({}, style, textBaseStyles),\n children: children.split(\"\").map((char, index) => /* @__PURE__ */ jsx(\n \"span\",\n {\n css: matchIfOrNull(() => animationStyles)(inView),\n style: {\n animationDelay: delay + index * duration * damping + \"ms\"\n },\n children: char\n },\n index\n ))\n }\n ),\n () => /* @__PURE__ */ jsx(FragmentReveal, { ...props, children })\n )(cascade);\n};\nconst FragmentReveal = (props) => {\n const {\n animationStyles,\n fraction = 0,\n triggerOnce = false,\n className,\n style,\n children,\n onVisibilityChange\n } = props;\n const { ref, inView } = useInView({\n triggerOnce,\n threshold: fraction,\n onChange: onVisibilityChange\n });\n return /* @__PURE__ */ jsx(\n \"div\",\n {\n ref,\n className,\n css: matchIfOrNull(() => animationStyles)(inView),\n style: Object.assign({}, style, hideWhen(!inView)),\n children\n }\n );\n};\n\nfunction getStyles$7(effect) {\n switch (effect) {\n case \"bounce\":\n return [bounce, { transformOrigin: \"center bottom\" }];\n case \"flash\":\n return [flash];\n case \"headShake\":\n return [headShake, { animationTimingFunction: \"ease-in-out\" }];\n case \"heartBeat\":\n return [heartBeat, { animationTimingFunction: \"ease-in-out\" }];\n case \"jello\":\n return [jello, { transformOrigin: \"center\" }];\n case \"pulse\":\n return [pulse, { animationTimingFunction: \"ease-in-out\" }];\n case \"rubberBand\":\n return [rubberBand];\n case \"shake\":\n return [shake];\n case \"shakeX\":\n return [shakeX];\n case \"shakeY\":\n return [shakeY];\n case \"swing\":\n return [swing, { transformOrigin: \"top center\" }];\n case \"tada\":\n return [tada];\n case \"wobble\":\n return [wobble];\n }\n}\nconst AttentionSeeker = (props) => {\n const { effect = \"bounce\", style, ...rest } = props;\n const [keyframes, animationCss] = useMemo(() => getStyles$7(effect), [effect]);\n return /* @__PURE__ */ jsx(\n Reveal,\n {\n keyframes,\n style: Object.assign({}, style, animationCss),\n ...rest\n }\n );\n};\n\nconst bounceIn = keyframes`\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\n 0% {\n opacity: 0;\n transform: scale3d(0.3, 0.3, 0.3);\n }\n\n 20% {\n transform: scale3d(1.1, 1.1, 1.1);\n }\n\n 40% {\n transform: scale3d(0.9, 0.9, 0.9);\n }\n\n 60% {\n opacity: 1;\n transform: scale3d(1.03, 1.03, 1.03);\n }\n\n 80% {\n transform: scale3d(0.97, 0.97, 0.97);\n }\n\n to {\n opacity: 1;\n transform: scale3d(1, 1, 1);\n }\n`;\n\nconst bounceInDown = keyframes`\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\n 0% {\n opacity: 0;\n transform: translate3d(0, -3000px, 0) scaleY(3);\n }\n\n 60% {\n opacity: 1;\n transform: translate3d(0, 25px, 0) scaleY(0.9);\n }\n\n 75% {\n transform: translate3d(0, -10px, 0) scaleY(0.95);\n }\n\n 90% {\n transform: translate3d(0, 5px, 0) scaleY(0.985);\n }\n\n to {\n transform: translate3d(0, 0, 0);\n }\n`;\n\nconst bounceInLeft = keyframes`\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\n 0% {\n opacity: 0;\n transform: translate3d(-3000px, 0, 0) scaleX(3);\n }\n\n 60% {\n opacity: 1;\n transform: translate3d(25px, 0, 0) scaleX(1);\n }\n\n 75% {\n transform: translate3d(-10px, 0, 0) scaleX(0.98);\n }\n\n 90% {\n transform: translate3d(5px, 0, 0) scaleX(0.995);\n }\n\n to {\n transform: translate3d(0, 0, 0);\n }\n`;\n\nconst bounceInRight = keyframes`\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\n from {\n opacity: 0;\n transform: translate3d(3000px, 0, 0) scaleX(3);\n }\n\n 60% {\n opacity: 1;\n transform: translate3d(-25px, 0, 0) scaleX(1);\n }\n\n 75% {\n transform: translate3d(10px, 0, 0) scaleX(0.98);\n }\n\n 90% {\n transform: translate3d(-5px, 0, 0) scaleX(0.995);\n }\n\n to {\n transform: translate3d(0, 0, 0);\n }\n`;\n\nconst bounceInUp = keyframes`\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\n from {\n opacity: 0;\n transform: translate3d(0, 3000px, 0) scaleY(5);\n }\n\n 60% {\n opacity: 1;\n transform: translate3d(0, -20px, 0) scaleY(0.9);\n }\n\n 75% {\n transform: translate3d(0, 10px, 0) scaleY(0.95);\n }\n\n 90% {\n transform: translate3d(0, -5px, 0) scaleY(0.985);\n }\n\n to {\n transform: translate3d(0, 0, 0);\n }\n`;\n\nconst bounceOut = keyframes`\n 20% {\n transform: scale3d(0.9, 0.9, 0.9);\n }\n\n 50%,\n 55% {\n opacity: 1;\n transform: scale3d(1.1, 1.1, 1.1);\n }\n\n to {\n opacity: 0;\n transform: scale3d(0.3, 0.3, 0.3);\n }\n`;\n\nconst bounceOutDown = keyframes`\n 20% {\n transform: translate3d(0, 10px, 0) scaleY(0.985);\n }\n\n 40%,\n 45% {\n opacity: 1;\n transform: translate3d(0, -20px, 0) scaleY(0.9);\n }\n\n to {\n opacity: 0;\n transform: translate3d(0, 2000px, 0) scaleY(3);\n }\n`;\n\nconst bounceOutLeft = keyframes`\n 20% {\n opacity: 1;\n transform: translate3d(20px, 0, 0) scaleX(0.9);\n }\n\n to {\n opacity: 0;\n transform: translate3d(-2000px, 0, 0) scaleX(2);\n }\n`;\n\nconst bounceOutRight = keyframes`\n 20% {\n opacity: 1;\n transform: translate3d(-20px, 0, 0) scaleX(0.9);\n }\n\n to {\n opacity: 0;\n transform: translate3d(2000px, 0, 0) scaleX(2);\n }\n`;\n\nconst bounceOutUp = keyframes`\n 20% {\n transform: translate3d(0, -10px, 0) scaleY(0.985);\n }\n\n 40%,\n 45% {\n opacity: 1;\n transform: translate3d(0, 20px, 0) scaleY(0.9);\n }\n\n to {\n opacity: 0;\n transform: translate3d(0, -2000px, 0) scaleY(3);\n }\n`;\n\nfunction getStyles$6(reverse, direction) {\n switch (direction) {\n case \"down\":\n return reverse ? bounceOutDown : bounceInDown;\n case \"left\":\n return reverse ? bounceOutLeft : bounceInLeft;\n case \"right\":\n return reverse ? bounceOutRight : bounceInRight;\n case \"up\":\n return reverse ? bounceOutUp : bounceInUp;\n default:\n return reverse ? bounceOut : bounceIn;\n }\n}\nconst Bounce = (props) => {\n const { direction, reverse = false, ...rest } = props;\n const keyframes = useMemo(\n () => getStyles$6(reverse, direction),\n [direction, reverse]\n );\n return /* @__PURE__ */ jsx(Reveal, { keyframes, ...rest });\n};\n\nconst fadeOut = keyframes`\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n`;\n\nconst fadeOutBottomLeft = keyframes`\n from {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n\n to {\n opacity: 0;\n transform: translate3d(-100%, 100%, 0);\n }\n`;\n\nconst fadeOutBottomRight = keyframes`\n from {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n\n to {\n opacity: 0;\n transform: translate3d(100%, 100%, 0);\n }\n`;\n\nconst fadeOutDown = keyframes`\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n transform: translate3d(0, 100%, 0);\n }\n`;\n\nconst fadeOutDownBig = keyframes`\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n transform: translate3d(0, 2000px, 0);\n }\n`;\n\nconst fadeOutLeft = keyframes`\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n transform: translate3d(-100%, 0, 0);\n }\n`;\n\nconst fadeOutLeftBig = keyframes`\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n transform: translate3d(-2000px, 0, 0);\n }\n`;\n\nconst fadeOutRight = keyframes`\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n transform: translate3d(100%, 0, 0);\n }\n`;\n\nconst fadeOutRightBig = keyframes`\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n transform: translate3d(2000px, 0, 0);\n }\n`;\n\nconst fadeOutTopLeft = keyframes`\n from {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n\n to {\n opacity: 0;\n transform: translate3d(-100%, -100%, 0);\n }\n`;\n\nconst fadeOutTopRight = keyframes`\n from {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n\n to {\n opacity: 0;\n transform: translate3d(100%, -100%, 0);\n }\n`;\n\nconst fadeOutUp = keyframes`\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n transform: translate3d(0, -100%, 0);\n }\n`;\n\nconst fadeOutUpBig = keyframes`\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n transform: translate3d(0, -2000px, 0);\n }\n`;\n\nfunction getStyles$5(big, reverse, direction) {\n switch (direction) {\n case \"bottom-left\":\n return reverse ? fadeOutBottomLeft : fadeInBottomLeft;\n case \"bottom-right\":\n return reverse ? fadeOutBottomRight : fadeInBottomRight;\n case \"down\":\n return big ? reverse ? fadeOutDownBig : fadeInDownBig : reverse ? fadeOutDown : fadeInDown;\n case \"left\":\n return big ? reverse ? fadeOutLeftBig : fadeInLeftBig : reverse ? fadeOutLeft : fadeInLeft;\n case \"right\":\n return big ? reverse ? fadeOutRightBig : fadeInRightBig : reverse ? fadeOutRight : fadeInRight;\n case \"top-left\":\n return reverse ? fadeOutTopLeft : fadeInTopLeft;\n case \"top-right\":\n return reverse ? fadeOutTopRight : fadeInTopRight;\n case \"up\":\n return big ? reverse ? fadeOutUpBig : fadeInUpBig : reverse ? fadeOutUp : fadeInUp;\n default:\n return reverse ? fadeOut : fadeIn;\n }\n}\nconst Fade = (props) => {\n const { big = false, direction, reverse = false, ...rest } = props;\n const keyframes = useMemo(\n () => getStyles$5(big, reverse, direction),\n [big, direction, reverse]\n );\n return /* @__PURE__ */ jsx(Reveal, { keyframes, ...rest });\n};\n\nconst flip = keyframes`\n from {\n transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);\n animation-timing-function: ease-out;\n }\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\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\n 80% {\n transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)\n rotate3d(0, 1, 0, 0deg);\n animation-timing-function: ease-in;\n }\n\n to {\n transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);\n animation-timing-function: ease-in;\n }\n`;\n\nconst flipInX = keyframes`\n from {\n transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n animation-timing-function: ease-in;\n opacity: 0;\n }\n\n 40% {\n transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n animation-timing-function: ease-in;\n }\n\n 60% {\n transform: perspective(400px) rotate3d(1, 0, 0, 10deg);\n opacity: 1;\n }\n\n 80% {\n transform: perspective(400px) rotate3d(1, 0, 0, -5deg);\n }\n\n to {\n transform: perspective(400px);\n }\n`;\n\nconst flipInY = keyframes`\n from {\n transform: perspective(400px) rotate3d(0, 1, 0, 90deg);\n animation-timing-function: ease-in;\n opacity: 0;\n }\n\n 40% {\n transform: perspective(400px) rotate3d(0, 1, 0, -20deg);\n animation-timing-function: ease-in;\n }\n\n 60% {\n transform: perspective(400px) rotate3d(0, 1, 0, 10deg);\n opacity: 1;\n }\n\n 80% {\n transform: perspective(400px) rotate3d(0, 1, 0, -5deg);\n }\n\n to {\n transform: perspective(400px);\n }\n`;\n\nconst flipOutX = keyframes`\n from {\n transform: perspective(400px);\n }\n\n 30% {\n transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n opacity: 1;\n }\n\n to {\n transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n opacity: 0;\n }\n`;\n\nconst flipOutY = keyframes`\n from {\n transform: perspective(400px);\n }\n\n 30% {\n transform: perspective(400px) rotate3d(0, 1, 0, -15deg);\n opacity: 1;\n }\n\n to {\n transform: perspective(400px) rotate3d(0, 1, 0, 90deg);\n opacity: 0;\n }\n`;\n\nfunction getStyles$4(reverse, direction) {\n switch (direction) {\n case \"horizontal\":\n return reverse ? flipOutX : flipInX;\n case \"vertical\":\n return reverse ? flipOutY : flipInY;\n default:\n return flip;\n }\n}\nconst animationCss$1 = {\n backfaceVisibility: \"visible\"\n};\nconst Flip = (props) => {\n const { direction, reverse = false, style, ...rest } = props;\n const keyframes = useMemo(\n () => getStyles$4(reverse, direction),\n [direction, reverse]\n );\n return /* @__PURE__ */ jsx(\n Reveal,\n {\n keyframes,\n style: Object.assign({}, style, animationCss$1),\n ...rest\n }\n );\n};\n\nconst hinge = keyframes`\n 0% {\n animation-timing-function: ease-in-out;\n }\n\n 20%,\n 60% {\n transform: rotate3d(0, 0, 1, 80deg);\n animation-timing-function: ease-in-out;\n }\n\n 40%,\n 80% {\n transform: rotate3d(0, 0, 1, 60deg);\n animation-timing-function: ease-in-out;\n opacity: 1;\n }\n\n to {\n transform: translate3d(0, 700px, 0);\n opacity: 0;\n }\n`;\n\nconst jackInTheBox = keyframes`\n from {\n opacity: 0;\n transform: scale(0.1) rotate(30deg);\n transform-origin: center bottom;\n }\n\n 50% {\n transform: rotate(-10deg);\n }\n\n 70% {\n transform: rotate(3deg);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n }\n`;\n\nconst rollIn = keyframes`\n from {\n opacity: 0;\n transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);\n }\n\n to {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n`;\n\nconst rollOut = keyframes`\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);\n }\n`;\n\nconst animationCss = {\n transformOrigin: \"top left\"\n};\nconst Hinge = (props) => {\n const { style, ...rest } = props;\n return /* @__PURE__ */ jsx(\n Reveal,\n {\n keyframes: hinge,\n style: Object.assign({}, style, animationCss),\n ...rest\n }\n );\n};\n\nconst JackInTheBox = (props) => {\n return /* @__PURE__ */ jsx(Reveal, { keyframes: jackInTheBox, ...props });\n};\n\nfunction getStyles$3(reverse) {\n return reverse ? rollOut : rollIn;\n}\nconst Roll = (props) => {\n const { reverse = false, ...rest } = props;\n const keyframes = useMemo(() => getStyles$3(reverse), [reverse]);\n return /* @__PURE__ */ jsx(Reveal, { keyframes, ...rest });\n};\n\nconst rotateIn = keyframes`\n from {\n transform: rotate3d(0, 0, 1, -200deg);\n opacity: 0;\n }\n\n to {\n transform: translate3d(0, 0, 0);\n opacity: 1;\n }\n`;\n\nconst rotateInDownLeft = keyframes`\n from {\n transform: rotate3d(0, 0, 1, -45deg);\n opacity: 0;\n }\n\n to {\n transform: translate3d(0, 0, 0);\n opacity: 1;\n }\n`;\n\nconst rotateInDownRight = keyframes`\n from {\n transform: rotate3d(0, 0, 1, 45deg);\n opacity: 0;\n }\n\n to {\n transform: translate3d(0, 0, 0);\n opacity: 1;\n }\n`;\n\nconst rotateInUpLeft = keyframes`\n from {\n transform: rotate3d(0, 0, 1, 45deg);\n opacity: 0;\n }\n\n to {\n transform: translate3d(0, 0, 0);\n opacity: 1;\n }\n`;\n\nconst rotateInUpRight = keyframes`\n from {\n transform: rotate3d(0, 0, 1, -90deg);\n opacity: 0;\n }\n\n to {\n transform: translate3d(0, 0, 0);\n opacity: 1;\n }\n`;\n\nconst rotateOut = keyframes`\n from {\n opacity: 1;\n }\n\n to {\n transform: rotate3d(0, 0, 1, 200deg);\n opacity: 0;\n }\n`;\n\nconst rotateOutDownLeft = keyframes`\n from {\n opacity: 1;\n }\n\n to {\n transform: rotate3d(0, 0, 1, 45deg);\n opacity: 0;\n }\n`;\n\nconst rotateOutDownRight = keyframes`\n from {\n opacity: 1;\n }\n\n to {\n transform: rotate3d(0, 0, 1, -45deg);\n opacity: 0;\n }\n`;\n\nconst rotateOutUpLeft = keyframes`\n from {\n opacity: 1;\n }\n\n to {\n transform: rotate3d(0, 0, 1, -45deg);\n opacity: 0;\n }\n`;\n\nconst rotateOutUpRight = keyframes`\n from {\n opacity: 1;\n }\n\n to {\n transform: rotate3d(0, 0, 1, 90deg);\n opacity: 0;\n }\n`;\n\nfunction getStyles$2(reverse, direction) {\n switch (direction) {\n case \"bottom-left\":\n return reverse ? [rotateOutDownLeft, { transformOrigin: \"left bottom\" }] : [rotateInDownLeft, { transformOrigin: \"left bottom\" }];\n case \"bottom-right\":\n return reverse ? [rotateOutDownRight, { transformOrigin: \"right bottom\" }] : [rotateInDownRight, { transformOrigin: \"right bottom\" }];\n case \"top-left\":\n return reverse ? [rotateOutUpLeft, { transformOrigin: \"left bottom\" }] : [rotateInUpLeft, { transformOrigin: \"left bottom\" }];\n case \"top-right\":\n return reverse ? [rotateOutUpRight, { transformOrigin: \"right bottom\" }] : [rotateInUpRight, { transformOrigin: \"right bottom\" }];\n default:\n return reverse ? [rotateOut, { transformOrigin: \"center\" }] : [rotateIn, { transformOrigin: \"center\" }];\n }\n}\nconst Rotate = (props) => {\n const { direction, reverse = false, style, ...rest } = props;\n const [keyframes, animationCss] = useMemo(\n () => getStyles$2(reverse, direction),\n [direction, reverse]\n );\n return /* @__PURE__ */ jsx(\n Reveal,\n {\n keyframes,\n style: Object.assign({}, style, animationCss),\n ...rest\n }\n );\n};\n\nconst slideInDown = keyframes`\n from {\n transform: translate3d(0, -100%, 0);\n visibility: visible;\n }\n\n to {\n transform: translate3d(0, 0, 0);\n }\n`;\n\nconst slideInLeft = keyframes`\n from {\n transform: translate3d(-100%, 0, 0);\n visibility: visible;\n }\n\n to {\n transform: translate3d(0, 0, 0);\n }\n`;\n\nconst slideInRight = keyframes`\n from {\n transform: translate3d(100%, 0, 0);\n visibility: visible;\n }\n\n to {\n transform: translate3d(0, 0, 0);\n }\n`;\n\nconst slideInUp = keyframes`\n from {\n transform: translate3d(0, 100%, 0);\n visibility: visible;\n }\n\n to {\n transform: translate3d(0, 0, 0);\n }\n`;\n\nconst slideOutDown = keyframes`\n from {\n transform: translate3d(0, 0, 0);\n }\n\n to {\n visibility: hidden;\n transform: translate3d(0, 100%, 0);\n }\n`;\n\nconst slideOutLeft = keyframes`\n from {\n transform: translate3d(0, 0, 0);\n }\n\n to {\n visibility: hidden;\n transform: translate3d(-100%, 0, 0);\n }\n`;\n\nconst slideOutRight = keyframes`\n from {\n transform: translate3d(0, 0, 0);\n }\n\n to {\n visibility: hidden;\n transform: translate3d(100%, 0, 0);\n }\n`;\n\nconst slideOutUp = keyframes`\n from {\n transform: translate3d(0, 0, 0);\n }\n\n to {\n visibility: hidden;\n transform: translate3d(0, -100%, 0);\n }\n`;\n\nfunction getStyles$1(reverse, direction) {\n switch (direction) {\n case \"down\":\n return reverse ? slideOutDown : slideInDown;\n case \"right\":\n return reverse ? slideOutRight : slideInRight;\n case \"up\":\n return reverse ? slideOutUp : slideInUp;\n case \"left\":\n default:\n return reverse ? slideOutLeft : slideInLeft;\n }\n}\nconst Slide = (props) => {\n const { direction, reverse = false, ...rest } = props;\n const keyframes = useMemo(\n () => getStyles$1(reverse, direction),\n [direction, reverse]\n );\n return /* @__PURE__ */ jsx(Reveal, { keyframes, ...rest });\n};\n\nconst zoomIn = keyframes`\n from {\n opacity: 0;\n transform: scale3d(0.3, 0.3, 0.3);\n }\n\n 50% {\n opacity: 1;\n }\n`;\n\nconst zoomInDown = keyframes`\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\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\nconst zoomInLeft = keyframes`\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\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\nconst zoomInRight = keyframes`\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\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\nconst zoomInUp = keyframes`\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\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\nconst zoomOut = keyframes`\n from {\n opacity: 1;\n }\n\n 50% {\n opacity: 0;\n transform: scale3d(0.3, 0.3, 0.3);\n }\n\n to {\n opacity: 0;\n }\n`;\n\nconst zoomOutDown = keyframes`\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\n to {\n opacity: 0;\n transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n }\n`;\n\nconst zoomOutLeft = keyframes`\n 40% {\n opacity: 1;\n transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);\n }\n\n to {\n opacity: 0;\n transform: scale(0.1) translate3d(-2000px, 0, 0);\n }\n`;\n\nconst zoomOutRight = keyframes`\n 40% {\n opacity: 1;\n transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);\n }\n\n to {\n opacity: 0;\n transform: scale(0.1) translate3d(2000px, 0, 0);\n }\n`;\n\nconst zoomOutUp = keyframes`\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\n to {\n opacity: 0;\n transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n }\n`;\n\nfunction getStyles(reverse, direction) {\n switch (direction) {\n case \"down\":\n return reverse ? zoomOutDown : zoomInDown;\n case \"left\":\n return reverse ? zoomOutLeft : zoomInLeft;\n case \"right\":\n return reverse ? zoomOutRight : zoomInRight;\n case \"up\":\n return reverse ? zoomOutUp : zoomInUp;\n default:\n return reverse ? zoomOut : zoomIn;\n }\n}\nconst Zoom = (props) => {\n const { direction, reverse = false, ...rest } = props;\n const keyframes = useMemo(\n () => getStyles(reverse, direction),\n [direction, reverse]\n );\n return /* @__PURE__ */ jsx(Reveal, { keyframes, ...rest });\n};\n\nexport { AttentionSeeker, Bounce, Fade, Flip, Hinge, JackInTheBox, Reveal, Roll, Rotate, Slide, Zoom, Reveal as default };\n"],"names":["reactIs","require","REACT_STATICS","childContextTypes","contextType","contextTypes","defaultProps","displayName","getDefaultProps","getDerivedStateFromError","getDerivedStateFromProps","mixins","propTypes","type","KNOWN_STATICS","name","length","prototype","caller","callee","arguments","arity","MEMO_STATICS","compare","TYPE_STATICS","getStatics","component","isMemo","ForwardRef","render","Memo","defineProperty","Object","getOwnPropertyNames","getOwnPropertySymbols","getOwnPropertyDescriptor","getPrototypeOf","objectPrototype","module","exports","hoistNonReactStatics","targetComponent","sourceComponent","blacklist","inheritedComponent","keys","concat","targetStatics","sourceStatics","i","key","descriptor","e","u","b","Symbol","for","c","d","f","g","h","k","l","m","n","p","q","t","v","a","r","$$typeof","isFragment","w","x","y","z","A","AsyncMode","ConcurrentMode","ContextConsumer","ContextProvider","Element","Fragment","Lazy","Portal","Profiler","StrictMode","Suspense","isAsyncMode","isConcurrentMode","isContextConsumer","isContextProvider","isElement","isForwardRef","isLazy","isPortal","isProfiler","isStrictMode","isSuspense","isValidElementType","typeOf","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","StyleSheet","options","_this","this","_insertTag","tag","before","tags","insertionPoint","nextSibling","prepend","container","firstChild","insertBefore","push","isSpeedy","undefined","speedy","ctr","nonce","_proto","hydrate","nodes","forEach","insert","rule","document","createElement","setAttribute","appendChild","createTextNode","createStyleElement","sheet","styleSheets","ownerNode","sheetForTag","insertRule","cssRules","process","flush","parentNode","removeChild","abs","Math","from","String","fromCharCode","assign","trim","replace","pattern","replacement","indexof","search","indexOf","charat","index","charCodeAt","substr","begin","end","strlen","sizeof","append","array","line","column","position","character","characters","node","root","parent","props","children","return","copy","prev","next","peek","caret","token","alloc","dealloc","delimit","delimiter","whitespace","escaping","count","commenter","identifier","MS","MOZ","WEBKIT","COMMENT","RULESET","DECLARATION","KEYFRAMES","serialize","callback","output","stringify","element","join","compile","parse","rules","rulesets","pseudo","points","declarations","offset","atrule","property","previous","variable","scanning","ampersand","reference","comment","declaration","ruleset","post","size","j","identifierWithPointTracking","getRules","parsed","toRules","fixedElements","WeakMap","compat","isImplicitRule","get","set","parentRules","removeLabel","prefix","hash","defaultStylisPlugins","map","combine","exec","match","createCache","ssrStyles","querySelectorAll","Array","call","getAttribute","head","stylisPlugins","_insert","inserted","nodesToHydrate","attrib","split","currentSheet","finalizingPlugins","serializer","collection","middleware","selector","serialized","shouldCache","styles","cache","registered","getRegisteredStyles","registeredStyles","classNames","rawClassName","className","registerStyles","isStringTag","insertStyles","current","unitlessKeys","animationIterationCount","aspectRatio","borderImageOutset","borderImageSlice","borderImageWidth","boxFlex","boxFlexGroup","boxOrdinalGroup","columnCount","columns","flex","flexGrow","flexPositive","flexShrink","flexNegative","flexOrder","gridRow","gridRowEnd","gridRowSpan","gridRowStart","gridColumn","gridColumnEnd","gridColumnSpan","gridColumnStart","msGridRow","msGridRowSpan","msGridColumn","msGridColumnSpan","fontWeight","lineHeight","opacity","order","orphans","tabSize","widows","zIndex","zoom","WebkitLineClamp","fillOpacity","floodOpacity","stopOpacity","strokeDasharray","strokeDashoffset","strokeMiterlimit","strokeOpacity","strokeWidth","memoize","fn","create","arg","hyphenateRegex","animationRegex","isCustomProperty","isProcessableValue","processStyleName","styleName","toLowerCase","processStyleValue","p1","p2","cursor","unitless","handleInterpolation","mergedProps","interpolation","__emotion_styles","anim","obj","string","isArray","_key","interpolated","_i","createStringFromObject","previousCursor","result","cached","labelPattern","serializeStyles","args","stringMode","lastIndex","identifierName","str","len","toString","hashString","useInsertionEffect","React","useInsertionEffectAlwaysWithSyncFallback","hasOwn","hasOwnProperty","EmotionCacheContext","HTMLElement","Provider","withEmotionCache","func","forwardRef","ref","useContext","ThemeContext","typePropName","Insertion","_ref","Emotion$1","cssProp","css","WrappedComponent","newProps","ReactJSXRuntime","jsx","Emotion","createEmotionProps","_len","keyframes","insertable","apply","classnames","cls","toAdd","serializedArr","ClassNames","content","cx","_len2","_key2","merge","theme","ele","observerMap","Map","RootIds","rootId","unsupportedValue","optionsToId","sort","filter","has","observe","fallbackInView","window","IntersectionObserver","bounds","getBoundingClientRect","isIntersecting","target","intersectionRatio","threshold","time","boundingClientRect","intersectionRect","rootBounds","_createObserver","id","instance","thresholds","elements","observer","entries","entry","_a","inView","some","trackVisibility","isVisible","createObserver","callbacks","splice","delete","unobserve","disconnect","InView","_React$Component","_classCallCheck","_callSuper","__publicField","triggerOnce","skip","setState","initialInView","observeNode","isPlainChildren","onChange","state","_inherits","_createClass","prevProps","rootMargin","delay","_this$props","_unobserveCb","handleChange","_this$state","handleNode","_this$props2","as","_objectWithoutProperties","_excluded","_objectSpread","useInView","_React2$useState","React2","_React2$useState2","_slicedToArray","setRef","_React2$useState3","_React2$useState4","entryTarget","previousEntryTarget","fadeInLeft","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_templateObject14","_templateObject15","_templateObject16","_templateObject17","_templateObject18","_templateObject19","_templateObject20","_templateObject21","_templateObject22","_templateObject23","_templateObject24","_templateObject25","_templateObject26","matchIf","onTrue","onFalse","condition","matchIfOrNull","hideWhen","Reveal","_props$cascade","cascade","_props$damping","damping","_props$delay","_props$duration","duration","_props$fraction","fraction","_props$keyframes","_props$triggerOnce","style","childClassName","childStyle","onVisibilityChange","animationStyles","useMemo","_ref$duration","_ref$delay","_ref$timingFunction","timingFunction","_ref$keyframes","_ref$iterationCount","iterationCount","_templateObject27","getAnimationCss","TextReveal","FragmentReveal","Children","isValidElement","nodeDelay","_ref2","_ref3","_ref4","animationDelay","_ref5","_ref6","textBaseStyles","display","whiteSpace","_props$cascade2","_props$damping2","_props$delay2","_props$duration2","_props$fraction2","_props$triggerOnce2","_useInView","char","_props$fraction3","_props$triggerOnce3","_useInView2","_templateObject28","_templateObject29","_templateObject30","_templateObject31","_templateObject32","_templateObject33","_templateObject34","_templateObject35","_templateObject36","_templateObject37","_templateObject38","_templateObject39","_templateObject40","_templateObject41","_templateObject42","_templateObject43","_templateObject44","_templateObject45","_templateObject46","_templateObject47","_templateObject48","_templateObject49","_templateObject50","_templateObject51","_templateObject52","_templateObject53","_templateObject54","_templateObject55","_templateObject56","_templateObject57","_templateObject58","_templateObject59","_templateObject60","_templateObject61","_templateObject62","_templateObject63","_templateObject64","_templateObject65","_templateObject66","_templateObject67","_templateObject68","_templateObject69","_templateObject70","_templateObject71","_templateObject72","_templateObject73","_templateObject74","_templateObject75","_templateObject76","_templateObject77","_templateObject78","_templateObject79","_templateObject80","_templateObject81","_templateObject82","_templateObject83","_templateObject84","_templateObject85","_templateObject86","_templateObject87"],"sourceRoot":""}