react-awesome-reveal 4.2.4 → 4.2.6

package/dist/{index.mjs → index.cjs}

@@ -1,9 +1,14 @@
-// src/components/AttentionSeeker.tsx
-import { useMemo as useMemo2 } from "react";
+'use strict';
 
-// src/animations/attention_seekers/bounce.ts
-import { keyframes } from "@emotion/react";
-var bounce = keyframes`
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const react = require('@emotion/react');
+const react$1 = require('react');
+const reactIntersectionObserver = require('react-intersection-observer');
+const reactIs = require('react-is');
+
+const bounce = react.keyframes`
   from,
   20%,
   53%,
@@ -33,9 +38,7 @@ var bounce = keyframes`
   }
 `;
 
-// src/animations/attention_seekers/flash.ts
-import { keyframes as keyframes2 } from "@emotion/react";
-var flash = keyframes2`
+const flash = react.keyframes`
   from,
   50%,
   to {
@@ -48,9 +51,7 @@ var flash = keyframes2`
   }
 `;
 
-// src/animations/attention_seekers/headShake.ts
-import { keyframes as keyframes3 } from "@emotion/react";
-var headShake = keyframes3`
+const headShake = react.keyframes`
   0% {
     transform: translateX(0);
   }
@@ -76,9 +77,7 @@ var headShake = keyframes3`
   }
 `;
 
-// src/animations/attention_seekers/heartBeat.ts
-import { keyframes as keyframes4 } from "@emotion/react";
-var heartBeat = keyframes4`
+const heartBeat = react.keyframes`
   0% {
     transform: scale(1);
   }
@@ -100,9 +99,7 @@ var heartBeat = keyframes4`
   }
 `;
 
-// src/animations/attention_seekers/jello.ts
-import { keyframes as keyframes5 } from "@emotion/react";
-var jello = keyframes5`
+const jello = react.keyframes`
   from,
   11.1%,
   to {
@@ -138,9 +135,7 @@ var jello = keyframes5`
   }
 `;
 
-// src/animations/attention_seekers/pulse.ts
-import { keyframes as keyframes6 } from "@emotion/react";
-var pulse = keyframes6`
+const pulse = react.keyframes`
   from {
     transform: scale3d(1, 1, 1);
   }
@@ -154,9 +149,7 @@ var pulse = keyframes6`
   }
 `;
 
-// src/animations/attention_seekers/rubberBand.ts
-import { keyframes as keyframes7 } from "@emotion/react";
-var rubberBand = keyframes7`
+const rubberBand = react.keyframes`
   from {
     transform: scale3d(1, 1, 1);
   }
@@ -186,9 +179,7 @@ var rubberBand = keyframes7`
   }
 `;
 
-// src/animations/attention_seekers/shake.ts
-import { keyframes as keyframes8 } from "@emotion/react";
-var shake = keyframes8`
+const shake = react.keyframes`
   from,
   to {
     transform: translate3d(0, 0, 0);
@@ -210,9 +201,7 @@ var shake = keyframes8`
   }
 `;
 
-// src/animations/attention_seekers/shakeX.ts
-import { keyframes as keyframes9 } from "@emotion/react";
-var shakeX = keyframes9`
+const shakeX = react.keyframes`
   from,
   to {
     transform: translate3d(0, 0, 0);
@@ -234,9 +223,7 @@ var shakeX = keyframes9`
   }
 `;
 
-// src/animations/attention_seekers/shakeY.ts
-import { keyframes as keyframes10 } from "@emotion/react";
-var shakeY = keyframes10`
+const shakeY = react.keyframes`
   from,
   to {
     transform: translate3d(0, 0, 0);
@@ -258,9 +245,7 @@ var shakeY = keyframes10`
   }
 `;
 
-// src/animations/attention_seekers/swing.ts
-import { keyframes as keyframes11 } from "@emotion/react";
-var swing = keyframes11`
+const swing = react.keyframes`
   20% {
     transform: rotate3d(0, 0, 1, 15deg);
   }
@@ -282,9 +267,7 @@ var swing = keyframes11`
   }
 `;
 
-// src/animations/attention_seekers/tada.ts
-import { keyframes as keyframes12 } from "@emotion/react";
-var tada = keyframes12`
+const tada = react.keyframes`
   from {
     transform: scale3d(1, 1, 1);
   }
@@ -312,9 +295,7 @@ var tada = keyframes12`
   }
 `;
 
-// src/animations/attention_seekers/wobble.ts
-import { keyframes as keyframes13 } from "@emotion/react";
-var wobble = keyframes13`
+const wobble = react.keyframes`
   from {
     transform: translate3d(0, 0, 0);
   }
@@ -344,15 +325,7 @@ var wobble = keyframes13`
   }
 `;
 
-// src/Reveal.tsx
-import { ClassNames } from "@emotion/react";
-import { Children, isValidElement, useMemo } from "react";
-import { InView, useInView } from "react-intersection-observer";
-import { isFragment } from "react-is";
-
-// src/animations/fading_entrances/fadeIn.ts
-import { keyframes as keyframes14 } from "@emotion/react";
-var fadeIn = keyframes14`
+const fadeIn = react.keyframes`
   from {
     opacity: 0;
   }
@@ -362,9 +335,7 @@ var fadeIn = keyframes14`
   }
 `;
 
-// src/animations/fading_entrances/fadeInBottomLeft.ts
-import { keyframes as keyframes15 } from "@emotion/react";
-var fadeInBottomLeft = keyframes15`
+const fadeInBottomLeft = react.keyframes`
   from {
     opacity: 0;
     transform: translate3d(-100%, 100%, 0);
@@ -376,9 +347,7 @@ var fadeInBottomLeft = keyframes15`
   }
 `;
 
-// src/animations/fading_entrances/fadeInBottomRight.ts
-import { keyframes as keyframes16 } from "@emotion/react";
-var fadeInBottomRight = keyframes16`
+const fadeInBottomRight = react.keyframes`
   from {
     opacity: 0;
     transform: translate3d(100%, 100%, 0);
@@ -390,9 +359,7 @@ var fadeInBottomRight = keyframes16`
   }
 `;
 
-// src/animations/fading_entrances/fadeInDown.ts
-import { keyframes as keyframes17 } from "@emotion/react";
-var fadeInDown = keyframes17`
+const fadeInDown = react.keyframes`
   from {
     opacity: 0;
     transform: translate3d(0, -100%, 0);
@@ -404,9 +371,7 @@ var fadeInDown = keyframes17`
   }
 `;
 
-// src/animations/fading_entrances/fadeInDownBig.ts
-import { keyframes as keyframes18 } from "@emotion/react";
-var fadeInDownBig = keyframes18`
+const fadeInDownBig = react.keyframes`
   from {
     opacity: 0;
     transform: translate3d(0, -2000px, 0);
@@ -418,9 +383,7 @@ var fadeInDownBig = keyframes18`
   }
 `;
 
-// src/animations/fading_entrances/fadeInLeft.ts
-import { keyframes as keyframes19 } from "@emotion/react";
-var fadeInLeft = keyframes19`
+const fadeInLeft = react.keyframes`
   from {
     opacity: 0;
     transform: translate3d(-100%, 0, 0);
@@ -432,9 +395,7 @@ var fadeInLeft = keyframes19`
   }
 `;
 
-// src/animations/fading_entrances/fadeInLeftBig.ts
-import { keyframes as keyframes20 } from "@emotion/react";
-var fadeInLeftBig = keyframes20`
+const fadeInLeftBig = react.keyframes`
   from {
     opacity: 0;
     transform: translate3d(-2000px, 0, 0);
@@ -446,9 +407,7 @@ var fadeInLeftBig = keyframes20`
   }
 `;
 
-// src/animations/fading_entrances/fadeInRight.ts
-import { keyframes as keyframes21 } from "@emotion/react";
-var fadeInRight = keyframes21`
+const fadeInRight = react.keyframes`
   from {
     opacity: 0;
     transform: translate3d(100%, 0, 0);
@@ -460,9 +419,7 @@ var fadeInRight = keyframes21`
   }
 `;
 
-// src/animations/fading_entrances/fadeInRightBig.ts
-import { keyframes as keyframes22 } from "@emotion/react";
-var fadeInRightBig = keyframes22`
+const fadeInRightBig = react.keyframes`
   from {
     opacity: 0;
     transform: translate3d(2000px, 0, 0);
@@ -474,9 +431,7 @@ var fadeInRightBig = keyframes22`
   }
 `;
 
-// src/animations/fading_entrances/fadeInTopLeft.ts
-import { keyframes as keyframes23 } from "@emotion/react";
-var fadeInTopLeft = keyframes23`
+const fadeInTopLeft = react.keyframes`
   from {
     opacity: 0;
     transform: translate3d(-100%, -100%, 0);
@@ -488,9 +443,7 @@ var fadeInTopLeft = keyframes23`
   }
 `;
 
-// src/animations/fading_entrances/fadeInTopRight.ts
-import { keyframes as keyframes24 } from "@emotion/react";
-var fadeInTopRight = keyframes24`
+const fadeInTopRight = react.keyframes`
   from {
     opacity: 0;
     transform: translate3d(100%, -100%, 0);
@@ -502,9 +455,7 @@ var fadeInTopRight = keyframes24`
   }
 `;
 
-// src/animations/fading_entrances/fadeInUp.ts
-import { keyframes as keyframes25 } from "@emotion/react";
-var fadeInUp = keyframes25`
+const fadeInUp = react.keyframes`
   from {
     opacity: 0;
     transform: translate3d(0, 100%, 0);
@@ -516,9 +467,7 @@ var fadeInUp = keyframes25`
   }
 `;
 
-// src/animations/fading_entrances/fadeInUpBig.ts
-import { keyframes as keyframes26 } from "@emotion/react";
-var fadeInUpBig = keyframes26`
+const fadeInUpBig = react.keyframes`
   from {
     opacity: 0;
     transform: translate3d(0, 2000px, 0);
@@ -530,20 +479,18 @@ var fadeInUpBig = keyframes26`
   }
 `;
 
-// src/utils/animations.ts
-import { css } from "@emotion/react";
 function getAnimationCss({
   duration = 1e3,
   delay = 0,
   timingFunction = "ease",
-  keyframes: keyframes87 = fadeInLeft,
+  keyframes = fadeInLeft,
   iterationCount = 1
 }) {
-  return css`
+  return react.css`
     animation-duration: ${duration}ms;
     animation-timing-function: ${timingFunction};
     animation-delay: ${delay}ms;
-    animation-name: ${keyframes87};
+    animation-name: ${keyframes};
     animation-direction: normal;
     animation-fill-mode: both;
     animation-iteration-count: ${iterationCount};
@@ -554,7 +501,6 @@ function getAnimationCss({
   `;
 }
 
-// src/utils/guards.ts
 function isNullable(a) {
   return a == void 0;
 }
@@ -562,7 +508,6 @@ function isStringLike(value) {
   return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
 }
 
-// src/utils/patterns.ts
 function matchIf(onTrue, onFalse) {
   return (condition) => condition ? onTrue() : onFalse();
 }
@@ -570,19 +515,17 @@ function matchIfOrNull(onTrue) {
   return matchIf(onTrue, () => null);
 }
 
-// src/Reveal.tsx
-import { Fragment, jsx } from "@emotion/react/jsx-runtime";
 function hideWhen(condition) {
   return matchIfOrNull(() => ({ opacity: 0 }))(condition);
 }
-var Reveal = (props) => {
+const Reveal = (props) => {
   const {
     cascade = false,
     damping = 0.5,
     delay = 0,
     duration = 1e3,
     fraction = 0,
-    keyframes: keyframes87 = fadeInLeft,
+    keyframes = fadeInLeft,
     triggerOnce = false,
     className,
     style,
@@ -591,43 +534,43 @@ var Reveal = (props) => {
     children,
     onVisibilityChange
   } = props;
-  const animationStyles = useMemo(
+  const animationStyles = react$1.useMemo(
     () => getAnimationCss({
-      keyframes: keyframes87,
+      keyframes,
       duration
     }),
-    [duration, keyframes87]
+    [duration, keyframes]
   );
   if (isNullable(children))
     return null;
   if (isStringLike(children))
-    return /* @__PURE__ */ jsx(TextReveal, { ...props, animationStyles, children: String(children) });
-  if (isFragment(children))
-    return /* @__PURE__ */ jsx(FragmentReveal, { ...props, animationStyles });
-  return /* @__PURE__ */ jsx(Fragment, { children: Children.map(children, (node, index) => {
-    if (!isValidElement(node))
+    return /* @__PURE__ */ jsxRuntime.jsx(TextReveal, { ...props, animationStyles, children: String(children) });
+  if (reactIs.isFragment(children))
+    return /* @__PURE__ */ jsxRuntime.jsx(FragmentReveal, { ...props, animationStyles });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: react$1.Children.map(children, (node, index) => {
+    if (!react$1.isValidElement(node))
       return null;
     const nodeDelay = delay + (cascade ? index * duration * damping : 0);
     switch (node.type) {
       case "ol":
       case "ul":
-        return /* @__PURE__ */ jsx(ClassNames, { children: ({ cx }) => /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, { children: ({ cx }) => /* @__PURE__ */ jsxRuntime.jsx(
           node.type,
           {
             ...node.props,
             className: cx(className, node.props.className),
             style: Object.assign({}, style, node.props.style),
-            children: /* @__PURE__ */ jsx(Reveal, { ...props, children: node.props.children })
+            children: /* @__PURE__ */ jsxRuntime.jsx(Reveal, { ...props, children: node.props.children })
           }
         ) });
       case "li":
-        return /* @__PURE__ */ jsx(
-          InView,
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          reactIntersectionObserver.InView,
           {
             threshold: fraction,
             triggerOnce,
             onChange: onVisibilityChange,
-            children: ({ inView, ref }) => /* @__PURE__ */ jsx(ClassNames, { children: ({ cx }) => /* @__PURE__ */ jsx(
+            children: ({ inView, ref }) => /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, { children: ({ cx }) => /* @__PURE__ */ jsxRuntime.jsx(
               node.type,
               {
                 ...node.props,
@@ -648,13 +591,13 @@ var Reveal = (props) => {
           }
         );
       default:
-        return /* @__PURE__ */ jsx(
-          InView,
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          reactIntersectionObserver.InView,
           {
             threshold: fraction,
             triggerOnce,
             onChange: onVisibilityChange,
-            children: ({ inView, ref }) => /* @__PURE__ */ jsx(
+            children: ({ inView, ref }) => /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
                 ref,
@@ -663,7 +606,7 @@ var Reveal = (props) => {
                 style: Object.assign({}, style, hideWhen(!inView), {
                   animationDelay: nodeDelay + "ms"
                 }),
-                children: /* @__PURE__ */ jsx(ClassNames, { children: ({ cx }) => /* @__PURE__ */ jsx(
+                children: /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, { children: ({ cx }) => /* @__PURE__ */ jsxRuntime.jsx(
                   node.type,
                   {
                     ...node.props,
@@ -682,11 +625,11 @@ var Reveal = (props) => {
     }
   }) });
 };
-var textBaseStyles = {
+const textBaseStyles = {
   display: "inline-block",
   whiteSpace: "pre"
 };
-var TextReveal = (props) => {
+const TextReveal = (props) => {
   const {
     animationStyles,
     cascade = false,
@@ -700,19 +643,19 @@ var TextReveal = (props) => {
     children,
     onVisibilityChange
   } = props;
-  const { ref, inView } = useInView({
+  const { ref, inView } = reactIntersectionObserver.useInView({
     triggerOnce,
     threshold: fraction,
     onChange: onVisibilityChange
   });
   return matchIf(
-    () => /* @__PURE__ */ jsx(
+    () => /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         className,
         style: Object.assign({}, style, textBaseStyles),
-        children: children.split("").map((char, index) => /* @__PURE__ */ jsx(
+        children: children.split("").map((char, index) => /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
             css: matchIfOrNull(() => animationStyles)(inView),
@@ -725,10 +668,10 @@ var TextReveal = (props) => {
         ))
       }
     ),
-    () => /* @__PURE__ */ jsx(FragmentReveal, { ...props, children })
+    () => /* @__PURE__ */ jsxRuntime.jsx(FragmentReveal, { ...props, children })
   )(cascade);
 };
-var FragmentReveal = (props) => {
+const FragmentReveal = (props) => {
   const {
     animationStyles,
     fraction = 0,
@@ -738,12 +681,12 @@ var FragmentReveal = (props) => {
     children,
     onVisibilityChange
   } = props;
-  const { ref, inView } = useInView({
+  const { ref, inView } = reactIntersectionObserver.useInView({
     triggerOnce,
     threshold: fraction,
     onChange: onVisibilityChange
   });
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ref,
@@ -755,9 +698,7 @@ var FragmentReveal = (props) => {
   );
 };
 
-// src/components/AttentionSeeker.tsx
-import { jsx as jsx2 } from "@emotion/react/jsx-runtime";
-function getStyles(effect) {
+function getStyles$7(effect) {
   switch (effect) {
     case "bounce":
       return [bounce, { transformOrigin: "center bottom" }];
@@ -787,25 +728,20 @@ function getStyles(effect) {
       return [wobble];
   }
 }
-var AttentionSeeker = (props) => {
+const AttentionSeeker = (props) => {
   const { effect = "bounce", style, ...rest } = props;
-  const [keyframes87, animationCss3] = useMemo2(() => getStyles(effect), [effect]);
-  return /* @__PURE__ */ jsx2(
+  const [keyframes, animationCss] = react$1.useMemo(() => getStyles$7(effect), [effect]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Reveal,
     {
-      keyframes: keyframes87,
-      style: Object.assign({}, style, animationCss3),
+      keyframes,
+      style: Object.assign({}, style, animationCss),
       ...rest
     }
   );
 };
 
-// src/components/Bounce.tsx
-import { useMemo as useMemo3 } from "react";
-
-// src/animations/bouncing_entrances/bounceIn.ts
-import { keyframes as keyframes27 } from "@emotion/react";
-var bounceIn = keyframes27`
+const bounceIn = react.keyframes`
   from,
   20%,
   40%,
@@ -843,9 +779,7 @@ var bounceIn = keyframes27`
   }
 `;
 
-// src/animations/bouncing_entrances/bounceInDown.ts
-import { keyframes as keyframes28 } from "@emotion/react";
-var bounceInDown = keyframes28`
+const bounceInDown = react.keyframes`
   from,
   60%,
   75%,
@@ -877,9 +811,7 @@ var bounceInDown = keyframes28`
   }
 `;
 
-// src/animations/bouncing_entrances/bounceInLeft.ts
-import { keyframes as keyframes29 } from "@emotion/react";
-var bounceInLeft = keyframes29`
+const bounceInLeft = react.keyframes`
   from,
   60%,
   75%,
@@ -911,9 +843,7 @@ var bounceInLeft = keyframes29`
   }
 `;
 
-// src/animations/bouncing_entrances/bounceInRight.ts
-import { keyframes as keyframes30 } from "@emotion/react";
-var bounceInRight = keyframes30`
+const bounceInRight = react.keyframes`
   from,
   60%,
   75%,
@@ -945,9 +875,7 @@ var bounceInRight = keyframes30`
   }
 `;
 
-// src/animations/bouncing_entrances/bounceInUp.ts
-import { keyframes as keyframes31 } from "@emotion/react";
-var bounceInUp = keyframes31`
+const bounceInUp = react.keyframes`
   from,
   60%,
   75%,
@@ -979,9 +907,7 @@ var bounceInUp = keyframes31`
   }
 `;
 
-// src/animations/bouncing_exits/bounceOut.ts
-import { keyframes as keyframes32 } from "@emotion/react";
-var bounceOut = keyframes32`
+const bounceOut = react.keyframes`
   20% {
     transform: scale3d(0.9, 0.9, 0.9);
   }
@@ -998,9 +924,7 @@ var bounceOut = keyframes32`
   }
 `;
 
-// src/animations/bouncing_exits/bounceOutDown.ts
-import { keyframes as keyframes33 } from "@emotion/react";
-var bounceOutDown = keyframes33`
+const bounceOutDown = react.keyframes`
   20% {
     transform: translate3d(0, 10px, 0) scaleY(0.985);
   }
@@ -1017,9 +941,7 @@ var bounceOutDown = keyframes33`
   }
 `;
 
-// src/animations/bouncing_exits/bounceOutLeft.ts
-import { keyframes as keyframes34 } from "@emotion/react";
-var bounceOutLeft = keyframes34`
+const bounceOutLeft = react.keyframes`
   20% {
     opacity: 1;
     transform: translate3d(20px, 0, 0) scaleX(0.9);
@@ -1031,9 +953,7 @@ var bounceOutLeft = keyframes34`
   }
 `;
 
-// src/animations/bouncing_exits/bounceOutRight.ts
-import { keyframes as keyframes35 } from "@emotion/react";
-var bounceOutRight = keyframes35`
+const bounceOutRight = react.keyframes`
   20% {
     opacity: 1;
     transform: translate3d(-20px, 0, 0) scaleX(0.9);
@@ -1045,9 +965,7 @@ var bounceOutRight = keyframes35`
   }
 `;
 
-// src/animations/bouncing_exits/bounceOutUp.ts
-import { keyframes as keyframes36 } from "@emotion/react";
-var bounceOutUp = keyframes36`
+const bounceOutUp = react.keyframes`
   20% {
     transform: translate3d(0, -10px, 0) scaleY(0.985);
   }
@@ -1064,9 +982,7 @@ var bounceOutUp = keyframes36`
   }
 `;
 
-// src/components/Bounce.tsx
-import { jsx as jsx3 } from "@emotion/react/jsx-runtime";
-function getStyles2(reverse, direction) {
+function getStyles$6(reverse, direction) {
   switch (direction) {
     case "down":
       return reverse ? bounceOutDown : bounceInDown;
@@ -1080,21 +996,16 @@ function getStyles2(reverse, direction) {
       return reverse ? bounceOut : bounceIn;
   }
 }
-var Bounce = (props) => {
+const Bounce = (props) => {
   const { direction, reverse = false, ...rest } = props;
-  const keyframes87 = useMemo3(
-    () => getStyles2(reverse, direction),
+  const keyframes = react$1.useMemo(
+    () => getStyles$6(reverse, direction),
     [direction, reverse]
   );
-  return /* @__PURE__ */ jsx3(Reveal, { keyframes: keyframes87, ...rest });
+  return /* @__PURE__ */ jsxRuntime.jsx(Reveal, { keyframes, ...rest });
 };
 
-// src/components/Fade.tsx
-import { useMemo as useMemo4 } from "react";
-
-// src/animations/fading_exits/fadeOut.ts
-import { keyframes as keyframes37 } from "@emotion/react";
-var fadeOut = keyframes37`
+const fadeOut = react.keyframes`
   from {
     opacity: 1;
   }
@@ -1104,9 +1015,7 @@ var fadeOut = keyframes37`
   }
 `;
 
-// src/animations/fading_exits/fadeOutBottomLeft.ts
-import { keyframes as keyframes38 } from "@emotion/react";
-var fadeOutBottomLeft = keyframes38`
+const fadeOutBottomLeft = react.keyframes`
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);
@@ -1118,9 +1027,7 @@ var fadeOutBottomLeft = keyframes38`
   }
 `;
 
-// src/animations/fading_exits/fadeOutBottomRight.ts
-import { keyframes as keyframes39 } from "@emotion/react";
-var fadeOutBottomRight = keyframes39`
+const fadeOutBottomRight = react.keyframes`
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);
@@ -1132,9 +1039,7 @@ var fadeOutBottomRight = keyframes39`
   }
 `;
 
-// src/animations/fading_exits/fadeOutDown.ts
-import { keyframes as keyframes40 } from "@emotion/react";
-var fadeOutDown = keyframes40`
+const fadeOutDown = react.keyframes`
   from {
     opacity: 1;
   }
@@ -1145,9 +1050,7 @@ var fadeOutDown = keyframes40`
   }
 `;
 
-// src/animations/fading_exits/fadeOutDownBig.ts
-import { keyframes as keyframes41 } from "@emotion/react";
-var fadeOutDownBig = keyframes41`
+const fadeOutDownBig = react.keyframes`
   from {
     opacity: 1;
   }
@@ -1158,9 +1061,7 @@ var fadeOutDownBig = keyframes41`
   }
 `;
 
-// src/animations/fading_exits/fadeOutLeft.ts
-import { keyframes as keyframes42 } from "@emotion/react";
-var fadeOutLeft = keyframes42`
+const fadeOutLeft = react.keyframes`
   from {
     opacity: 1;
   }
@@ -1171,9 +1072,7 @@ var fadeOutLeft = keyframes42`
   }
 `;
 
-// src/animations/fading_exits/fadeOutLeftBig.ts
-import { keyframes as keyframes43 } from "@emotion/react";
-var fadeOutLeftBig = keyframes43`
+const fadeOutLeftBig = react.keyframes`
   from {
     opacity: 1;
   }
@@ -1184,9 +1083,7 @@ var fadeOutLeftBig = keyframes43`
   }
 `;
 
-// src/animations/fading_exits/fadeOutRight.ts
-import { keyframes as keyframes44 } from "@emotion/react";
-var fadeOutRight = keyframes44`
+const fadeOutRight = react.keyframes`
   from {
     opacity: 1;
   }
@@ -1197,9 +1094,7 @@ var fadeOutRight = keyframes44`
   }
 `;
 
-// src/animations/fading_exits/fadeOutRightBig.ts
-import { keyframes as keyframes45 } from "@emotion/react";
-var fadeOutRightBig = keyframes45`
+const fadeOutRightBig = react.keyframes`
   from {
     opacity: 1;
   }
@@ -1210,9 +1105,7 @@ var fadeOutRightBig = keyframes45`
   }
 `;
 
-// src/animations/fading_exits/fadeOutTopLeft.ts
-import { keyframes as keyframes46 } from "@emotion/react";
-var fadeOutTopLeft = keyframes46`
+const fadeOutTopLeft = react.keyframes`
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);
@@ -1224,9 +1117,7 @@ var fadeOutTopLeft = keyframes46`
   }
 `;
 
-// src/animations/fading_exits/fadeOutTopRight.ts
-import { keyframes as keyframes47 } from "@emotion/react";
-var fadeOutTopRight = keyframes47`
+const fadeOutTopRight = react.keyframes`
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);
@@ -1238,9 +1129,7 @@ var fadeOutTopRight = keyframes47`
   }
 `;
 
-// src/animations/fading_exits/fadeOutUp.ts
-import { keyframes as keyframes48 } from "@emotion/react";
-var fadeOutUp = keyframes48`
+const fadeOutUp = react.keyframes`
   from {
     opacity: 1;
   }
@@ -1251,9 +1140,7 @@ var fadeOutUp = keyframes48`
   }
 `;
 
-// src/animations/fading_exits/fadeOutUpBig.ts
-import { keyframes as keyframes49 } from "@emotion/react";
-var fadeOutUpBig = keyframes49`
+const fadeOutUpBig = react.keyframes`
   from {
     opacity: 1;
   }
@@ -1264,9 +1151,7 @@ var fadeOutUpBig = keyframes49`
   }
 `;
 
-// src/components/Fade.tsx
-import { jsx as jsx4 } from "@emotion/react/jsx-runtime";
-function getStyles3(big, reverse, direction) {
+function getStyles$5(big, reverse, direction) {
   switch (direction) {
     case "bottom-left":
       return reverse ? fadeOutBottomLeft : fadeInBottomLeft;
@@ -1288,21 +1173,16 @@ function getStyles3(big, reverse, direction) {
       return reverse ? fadeOut : fadeIn;
   }
 }
-var Fade = (props) => {
+const Fade = (props) => {
   const { big = false, direction, reverse = false, ...rest } = props;
-  const keyframes87 = useMemo4(
-    () => getStyles3(big, reverse, direction),
+  const keyframes = react$1.useMemo(
+    () => getStyles$5(big, reverse, direction),
     [big, direction, reverse]
   );
-  return /* @__PURE__ */ jsx4(Reveal, { keyframes: keyframes87, ...rest });
+  return /* @__PURE__ */ jsxRuntime.jsx(Reveal, { keyframes, ...rest });
 };
 
-// src/components/Flip.tsx
-import { useMemo as useMemo5 } from "react";
-
-// src/animations/flippers/flip.ts
-import { keyframes as keyframes50 } from "@emotion/react";
-var flip = keyframes50`
+const flip = react.keyframes`
   from {
     transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
     animation-timing-function: ease-out;
@@ -1332,9 +1212,7 @@ var flip = keyframes50`
   }
 `;
 
-// src/animations/flippers/flipInX.ts
-import { keyframes as keyframes51 } from "@emotion/react";
-var flipInX = keyframes51`
+const flipInX = react.keyframes`
   from {
     transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
     animation-timing-function: ease-in;
@@ -1360,9 +1238,7 @@ var flipInX = keyframes51`
   }
 `;
 
-// src/animations/flippers/flipInY.ts
-import { keyframes as keyframes52 } from "@emotion/react";
-var flipInY = keyframes52`
+const flipInY = react.keyframes`
   from {
     transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
     animation-timing-function: ease-in;
@@ -1388,9 +1264,7 @@ var flipInY = keyframes52`
   }
 `;
 
-// src/animations/flippers/flipOutX.ts
-import { keyframes as keyframes53 } from "@emotion/react";
-var flipOutX = keyframes53`
+const flipOutX = react.keyframes`
   from {
     transform: perspective(400px);
   }
@@ -1406,9 +1280,7 @@ var flipOutX = keyframes53`
   }
 `;
 
-// src/animations/flippers/flipOutY.ts
-import { keyframes as keyframes54 } from "@emotion/react";
-var flipOutY = keyframes54`
+const flipOutY = react.keyframes`
   from {
     transform: perspective(400px);
   }
@@ -1424,9 +1296,7 @@ var flipOutY = keyframes54`
   }
 `;
 
-// src/components/Flip.tsx
-import { jsx as jsx5 } from "@emotion/react/jsx-runtime";
-function getStyles4(reverse, direction) {
+function getStyles$4(reverse, direction) {
   switch (direction) {
     case "horizontal":
       return reverse ? flipOutX : flipInX;
@@ -1436,28 +1306,26 @@ function getStyles4(reverse, direction) {
       return flip;
   }
 }
-var animationCss = {
+const animationCss$1 = {
   backfaceVisibility: "visible"
 };
-var Flip = (props) => {
+const Flip = (props) => {
   const { direction, reverse = false, style, ...rest } = props;
-  const keyframes87 = useMemo5(
-    () => getStyles4(reverse, direction),
+  const keyframes = react$1.useMemo(
+    () => getStyles$4(reverse, direction),
     [direction, reverse]
   );
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Reveal,
     {
-      keyframes: keyframes87,
-      style: Object.assign({}, style, animationCss),
+      keyframes,
+      style: Object.assign({}, style, animationCss$1),
       ...rest
     }
   );
 };
 
-// src/animations/specials/hinge.ts
-import { keyframes as keyframes55 } from "@emotion/react";
-var hinge = keyframes55`
+const hinge = react.keyframes`
   0% {
     animation-timing-function: ease-in-out;
   }
@@ -1481,9 +1349,7 @@ var hinge = keyframes55`
   }
 `;
 
-// src/animations/specials/jackInTheBox.ts
-import { keyframes as keyframes56 } from "@emotion/react";
-var jackInTheBox = keyframes56`
+const jackInTheBox = react.keyframes`
   from {
     opacity: 0;
     transform: scale(0.1) rotate(30deg);
@@ -1504,9 +1370,7 @@ var jackInTheBox = keyframes56`
   }
 `;
 
-// src/animations/specials/rollIn.ts
-import { keyframes as keyframes57 } from "@emotion/react";
-var rollIn = keyframes57`
+const rollIn = react.keyframes`
   from {
     opacity: 0;
     transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
@@ -1518,9 +1382,7 @@ var rollIn = keyframes57`
   }
 `;
 
-// src/animations/specials/rollOut.ts
-import { keyframes as keyframes58 } from "@emotion/react";
-var rollOut = keyframes58`
+const rollOut = react.keyframes`
   from {
     opacity: 1;
   }
@@ -1531,47 +1393,35 @@ var rollOut = keyframes58`
   }
 `;
 
-// src/components/Hinge.tsx
-import { jsx as jsx6 } from "@emotion/react/jsx-runtime";
-var animationCss2 = {
+const animationCss = {
   transformOrigin: "top left"
 };
-var Hinge = (props) => {
+const Hinge = (props) => {
   const { style, ...rest } = props;
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Reveal,
     {
       keyframes: hinge,
-      style: Object.assign({}, style, animationCss2),
+      style: Object.assign({}, style, animationCss),
       ...rest
     }
   );
 };
 
-// src/components/JackInTheBox.tsx
-import { jsx as jsx7 } from "@emotion/react/jsx-runtime";
-var JackInTheBox = (props) => {
-  return /* @__PURE__ */ jsx7(Reveal, { keyframes: jackInTheBox, ...props });
+const JackInTheBox = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Reveal, { keyframes: jackInTheBox, ...props });
 };
 
-// src/components/Roll.tsx
-import { useMemo as useMemo6 } from "react";
-import { jsx as jsx8 } from "@emotion/react/jsx-runtime";
-function getStyles5(reverse) {
+function getStyles$3(reverse) {
   return reverse ? rollOut : rollIn;
 }
-var Roll = (props) => {
+const Roll = (props) => {
   const { reverse = false, ...rest } = props;
-  const keyframes87 = useMemo6(() => getStyles5(reverse), [reverse]);
-  return /* @__PURE__ */ jsx8(Reveal, { keyframes: keyframes87, ...rest });
+  const keyframes = react$1.useMemo(() => getStyles$3(reverse), [reverse]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Reveal, { keyframes, ...rest });
 };
 
-// src/components/Rotate.tsx
-import { useMemo as useMemo7 } from "react";
-
-// src/animations/rotating_entrances/rotateIn.ts
-import { keyframes as keyframes59 } from "@emotion/react";
-var rotateIn = keyframes59`
+const rotateIn = react.keyframes`
   from {
     transform: rotate3d(0, 0, 1, -200deg);
     opacity: 0;
@@ -1583,9 +1433,7 @@ var rotateIn = keyframes59`
   }
 `;
 
-// src/animations/rotating_entrances/rotateInDownLeft.ts
-import { keyframes as keyframes60 } from "@emotion/react";
-var rotateInDownLeft = keyframes60`
+const rotateInDownLeft = react.keyframes`
   from {
     transform: rotate3d(0, 0, 1, -45deg);
     opacity: 0;
@@ -1597,9 +1445,7 @@ var rotateInDownLeft = keyframes60`
   }
 `;
 
-// src/animations/rotating_entrances/rotateInDownRight.ts
-import { keyframes as keyframes61 } from "@emotion/react";
-var rotateInDownRight = keyframes61`
+const rotateInDownRight = react.keyframes`
   from {
     transform: rotate3d(0, 0, 1, 45deg);
     opacity: 0;
@@ -1611,9 +1457,7 @@ var rotateInDownRight = keyframes61`
   }
 `;
 
-// src/animations/rotating_entrances/rotateInUpLeft.ts
-import { keyframes as keyframes62 } from "@emotion/react";
-var rotateInUpLeft = keyframes62`
+const rotateInUpLeft = react.keyframes`
   from {
     transform: rotate3d(0, 0, 1, 45deg);
     opacity: 0;
@@ -1625,9 +1469,7 @@ var rotateInUpLeft = keyframes62`
   }
 `;
 
-// src/animations/rotating_entrances/rotateInUpRight.ts
-import { keyframes as keyframes63 } from "@emotion/react";
-var rotateInUpRight = keyframes63`
+const rotateInUpRight = react.keyframes`
   from {
     transform: rotate3d(0, 0, 1, -90deg);
     opacity: 0;
@@ -1639,9 +1481,7 @@ var rotateInUpRight = keyframes63`
   }
 `;
 
-// src/animations/rotating_exits/rotateOut.ts
-import { keyframes as keyframes64 } from "@emotion/react";
-var rotateOut = keyframes64`
+const rotateOut = react.keyframes`
   from {
     opacity: 1;
   }
@@ -1652,9 +1492,7 @@ var rotateOut = keyframes64`
   }
 `;
 
-// src/animations/rotating_exits/rotateOutDownLeft.ts
-import { keyframes as keyframes65 } from "@emotion/react";
-var rotateOutDownLeft = keyframes65`
+const rotateOutDownLeft = react.keyframes`
   from {
     opacity: 1;
   }
@@ -1665,9 +1503,7 @@ var rotateOutDownLeft = keyframes65`
   }
 `;
 
-// src/animations/rotating_exits/rotateOutDownRight.ts
-import { keyframes as keyframes66 } from "@emotion/react";
-var rotateOutDownRight = keyframes66`
+const rotateOutDownRight = react.keyframes`
   from {
     opacity: 1;
   }
@@ -1678,9 +1514,7 @@ var rotateOutDownRight = keyframes66`
   }
 `;
 
-// src/animations/rotating_exits/rotateOutUpLeft.ts
-import { keyframes as keyframes67 } from "@emotion/react";
-var rotateOutUpLeft = keyframes67`
+const rotateOutUpLeft = react.keyframes`
   from {
     opacity: 1;
   }
@@ -1691,9 +1525,7 @@ var rotateOutUpLeft = keyframes67`
   }
 `;
 
-// src/animations/rotating_exits/rotateOutUpRight.ts
-import { keyframes as keyframes68 } from "@emotion/react";
-var rotateOutUpRight = keyframes68`
+const rotateOutUpRight = react.keyframes`
   from {
     opacity: 1;
   }
@@ -1704,9 +1536,7 @@ var rotateOutUpRight = keyframes68`
   }
 `;
 
-// src/components/Rotate.tsx
-import { jsx as jsx9 } from "@emotion/react/jsx-runtime";
-function getStyles6(reverse, direction) {
+function getStyles$2(reverse, direction) {
   switch (direction) {
     case "bottom-left":
       return reverse ? [rotateOutDownLeft, { transformOrigin: "left bottom" }] : [rotateInDownLeft, { transformOrigin: "left bottom" }];
@@ -1720,28 +1550,23 @@ function getStyles6(reverse, direction) {
       return reverse ? [rotateOut, { transformOrigin: "center" }] : [rotateIn, { transformOrigin: "center" }];
   }
 }
-var Rotate = (props) => {
+const Rotate = (props) => {
   const { direction, reverse = false, style, ...rest } = props;
-  const [keyframes87, animationCss3] = useMemo7(
-    () => getStyles6(reverse, direction),
+  const [keyframes, animationCss] = react$1.useMemo(
+    () => getStyles$2(reverse, direction),
     [direction, reverse]
   );
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Reveal,
     {
-      keyframes: keyframes87,
-      style: Object.assign({}, style, animationCss3),
+      keyframes,
+      style: Object.assign({}, style, animationCss),
       ...rest
     }
   );
 };
 
-// src/components/Slide.tsx
-import { useMemo as useMemo8 } from "react";
-
-// src/animations/sliding_entrances/slideInDown.ts
-import { keyframes as keyframes69 } from "@emotion/react";
-var slideInDown = keyframes69`
+const slideInDown = react.keyframes`
   from {
     transform: translate3d(0, -100%, 0);
     visibility: visible;
@@ -1752,9 +1577,7 @@ var slideInDown = keyframes69`
   }
 `;
 
-// src/animations/sliding_entrances/slideInLeft.ts
-import { keyframes as keyframes70 } from "@emotion/react";
-var slideInLeft = keyframes70`
+const slideInLeft = react.keyframes`
   from {
     transform: translate3d(-100%, 0, 0);
     visibility: visible;
@@ -1765,9 +1588,7 @@ var slideInLeft = keyframes70`
   }
 `;
 
-// src/animations/sliding_entrances/slideInRight.ts
-import { keyframes as keyframes71 } from "@emotion/react";
-var slideInRight = keyframes71`
+const slideInRight = react.keyframes`
   from {
     transform: translate3d(100%, 0, 0);
     visibility: visible;
@@ -1778,9 +1599,7 @@ var slideInRight = keyframes71`
   }
 `;
 
-// src/animations/sliding_entrances/slideInUp.ts
-import { keyframes as keyframes72 } from "@emotion/react";
-var slideInUp = keyframes72`
+const slideInUp = react.keyframes`
   from {
     transform: translate3d(0, 100%, 0);
     visibility: visible;
@@ -1791,9 +1610,7 @@ var slideInUp = keyframes72`
   }
 `;
 
-// src/animations/sliding_exits/slideOutDown.ts
-import { keyframes as keyframes73 } from "@emotion/react";
-var slideOutDown = keyframes73`
+const slideOutDown = react.keyframes`
   from {
     transform: translate3d(0, 0, 0);
   }
@@ -1804,9 +1621,7 @@ var slideOutDown = keyframes73`
   }
 `;
 
-// src/animations/sliding_exits/slideOutLeft.ts
-import { keyframes as keyframes74 } from "@emotion/react";
-var slideOutLeft = keyframes74`
+const slideOutLeft = react.keyframes`
   from {
     transform: translate3d(0, 0, 0);
   }
@@ -1817,9 +1632,7 @@ var slideOutLeft = keyframes74`
   }
 `;
 
-// src/animations/sliding_exits/slideOutRight.ts
-import { keyframes as keyframes75 } from "@emotion/react";
-var slideOutRight = keyframes75`
+const slideOutRight = react.keyframes`
   from {
     transform: translate3d(0, 0, 0);
   }
@@ -1830,9 +1643,7 @@ var slideOutRight = keyframes75`
   }
 `;
 
-// src/animations/sliding_exits/slideOutUp.ts
-import { keyframes as keyframes76 } from "@emotion/react";
-var slideOutUp = keyframes76`
+const slideOutUp = react.keyframes`
   from {
     transform: translate3d(0, 0, 0);
   }
@@ -1843,9 +1654,7 @@ var slideOutUp = keyframes76`
   }
 `;
 
-// src/components/Slide.tsx
-import { jsx as jsx10 } from "@emotion/react/jsx-runtime";
-function getStyles7(reverse, direction) {
+function getStyles$1(reverse, direction) {
   switch (direction) {
     case "down":
       return reverse ? slideOutDown : slideInDown;
@@ -1858,21 +1667,16 @@ function getStyles7(reverse, direction) {
       return reverse ? slideOutLeft : slideInLeft;
   }
 }
-var Slide = (props) => {
+const Slide = (props) => {
   const { direction, reverse = false, ...rest } = props;
-  const keyframes87 = useMemo8(
-    () => getStyles7(reverse, direction),
+  const keyframes = react$1.useMemo(
+    () => getStyles$1(reverse, direction),
     [direction, reverse]
   );
-  return /* @__PURE__ */ jsx10(Reveal, { keyframes: keyframes87, ...rest });
+  return /* @__PURE__ */ jsxRuntime.jsx(Reveal, { keyframes, ...rest });
 };
 
-// src/components/Zoom.tsx
-import { useMemo as useMemo9 } from "react";
-
-// src/animations/zooming_entrances/zoomIn.ts
-import { keyframes as keyframes77 } from "@emotion/react";
-var zoomIn = keyframes77`
+const zoomIn = react.keyframes`
   from {
     opacity: 0;
     transform: scale3d(0.3, 0.3, 0.3);
@@ -1883,9 +1687,7 @@ var zoomIn = keyframes77`
   }
 `;
 
-// src/animations/zooming_entrances/zoomInDown.ts
-import { keyframes as keyframes78 } from "@emotion/react";
-var zoomInDown = keyframes78`
+const zoomInDown = react.keyframes`
   from {
     opacity: 0;
     transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
@@ -1899,9 +1701,7 @@ var zoomInDown = keyframes78`
   }
 `;
 
-// src/animations/zooming_entrances/zoomInLeft.ts
-import { keyframes as keyframes79 } from "@emotion/react";
-var zoomInLeft = keyframes79`
+const zoomInLeft = react.keyframes`
   from {
     opacity: 0;
     transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
@@ -1915,9 +1715,7 @@ var zoomInLeft = keyframes79`
   }
 `;
 
-// src/animations/zooming_entrances/zoomInRight.ts
-import { keyframes as keyframes80 } from "@emotion/react";
-var zoomInRight = keyframes80`
+const zoomInRight = react.keyframes`
   from {
     opacity: 0;
     transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
@@ -1931,9 +1729,7 @@ var zoomInRight = keyframes80`
   }
 `;
 
-// src/animations/zooming_entrances/zoomInUp.ts
-import { keyframes as keyframes81 } from "@emotion/react";
-var zoomInUp = keyframes81`
+const zoomInUp = react.keyframes`
   from {
     opacity: 0;
     transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
@@ -1947,9 +1743,7 @@ var zoomInUp = keyframes81`
   }
 `;
 
-// src/animations/zooming_exits/zoomOut.ts
-import { keyframes as keyframes82 } from "@emotion/react";
-var zoomOut = keyframes82`
+const zoomOut = react.keyframes`
   from {
     opacity: 1;
   }
@@ -1964,9 +1758,7 @@ var zoomOut = keyframes82`
   }
 `;
 
-// src/animations/zooming_exits/zoomOutDown.ts
-import { keyframes as keyframes83 } from "@emotion/react";
-var zoomOutDown = keyframes83`
+const zoomOutDown = react.keyframes`
   40% {
     opacity: 1;
     transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
@@ -1980,9 +1772,7 @@ var zoomOutDown = keyframes83`
   }
 `;
 
-// src/animations/zooming_exits/zoomOutLeft.ts
-import { keyframes as keyframes84 } from "@emotion/react";
-var zoomOutLeft = keyframes84`
+const zoomOutLeft = react.keyframes`
   40% {
     opacity: 1;
     transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
@@ -1994,9 +1784,7 @@ var zoomOutLeft = keyframes84`
   }
 `;
 
-// src/animations/zooming_exits/zoomOutRight.ts
-import { keyframes as keyframes85 } from "@emotion/react";
-var zoomOutRight = keyframes85`
+const zoomOutRight = react.keyframes`
   40% {
     opacity: 1;
     transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
@@ -2008,9 +1796,7 @@ var zoomOutRight = keyframes85`
   }
 `;
 
-// src/animations/zooming_exits/zoomOutUp.ts
-import { keyframes as keyframes86 } from "@emotion/react";
-var zoomOutUp = keyframes86`
+const zoomOutUp = react.keyframes`
   40% {
     opacity: 1;
     transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
@@ -2024,9 +1810,7 @@ var zoomOutUp = keyframes86`
   }
 `;
 
-// src/components/Zoom.tsx
-import { jsx as jsx11 } from "@emotion/react/jsx-runtime";
-function getStyles8(reverse, direction) {
+function getStyles(reverse, direction) {
   switch (direction) {
     case "down":
       return reverse ? zoomOutDown : zoomInDown;
@@ -2040,26 +1824,25 @@ function getStyles8(reverse, direction) {
       return reverse ? zoomOut : zoomIn;
   }
 }
-var Zoom = (props) => {
+const Zoom = (props) => {
   const { direction, reverse = false, ...rest } = props;
-  const keyframes87 = useMemo9(
-    () => getStyles8(reverse, direction),
+  const keyframes = react$1.useMemo(
+    () => getStyles(reverse, direction),
     [direction, reverse]
   );
-  return /* @__PURE__ */ jsx11(Reveal, { keyframes: keyframes87, ...rest });
-};
-export {
-  AttentionSeeker,
-  Bounce,
-  Fade,
-  Flip,
-  Hinge,
-  JackInTheBox,
-  Reveal,
-  Roll,
-  Rotate,
-  Slide,
-  Zoom,
-  Reveal as default
+  return /* @__PURE__ */ jsxRuntime.jsx(Reveal, { keyframes, ...rest });
 };
-//# sourceMappingURL=index.mjs.map
+
+exports.AttentionSeeker = AttentionSeeker;
+exports.Bounce = Bounce;
+exports.Fade = Fade;
+exports.Flip = Flip;
+exports.Hinge = Hinge;
+exports.JackInTheBox = JackInTheBox;
+exports.Reveal = Reveal;
+exports.Roll = Roll;
+exports.Rotate = Rotate;
+exports.Slide = Slide;
+exports.Zoom = Zoom;
+exports.default = Reveal;
+//# sourceMappingURL=index.cjs.map