react-awesome-reveal 4.2.4 → 4.2.6

package/dist/index.js

@@ -1,46 +1,10 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  AttentionSeeker: () => AttentionSeeker,
-  Bounce: () => Bounce,
-  Fade: () => Fade,
-  Flip: () => Flip,
-  Hinge: () => Hinge,
-  JackInTheBox: () => JackInTheBox,
-  Reveal: () => Reveal,
-  Roll: () => Roll,
-  Rotate: () => Rotate,
-  Slide: () => Slide,
-  Zoom: () => Zoom,
-  default: () => Reveal
-});
-module.exports = __toCommonJS(src_exports);
-
-// src/components/AttentionSeeker.tsx
-var import_react30 = require("react");
-
-// src/animations/attention_seekers/bounce.ts
-var import_react = require("@emotion/react");
-var bounce = import_react.keyframes`
+import { jsx, Fragment } from '@emotion/react/jsx-runtime';
+import { keyframes, css, ClassNames } from '@emotion/react';
+import { useMemo, Children, isValidElement } from 'react';
+import { InView, useInView } from 'react-intersection-observer';
+import { isFragment } from 'react-is';
+
+const bounce = keyframes`
   from,
   20%,
   53%,
@@ -70,9 +34,7 @@ var bounce = import_react.keyframes`
   }
 `;
 
-// src/animations/attention_seekers/flash.ts
-var import_react2 = require("@emotion/react");
-var flash = import_react2.keyframes`
+const flash = keyframes`
   from,
   50%,
   to {
@@ -85,9 +47,7 @@ var flash = import_react2.keyframes`
   }
 `;
 
-// src/animations/attention_seekers/headShake.ts
-var import_react3 = require("@emotion/react");
-var headShake = import_react3.keyframes`
+const headShake = keyframes`
   0% {
     transform: translateX(0);
   }
@@ -113,9 +73,7 @@ var headShake = import_react3.keyframes`
   }
 `;
 
-// src/animations/attention_seekers/heartBeat.ts
-var import_react4 = require("@emotion/react");
-var heartBeat = import_react4.keyframes`
+const heartBeat = keyframes`
   0% {
     transform: scale(1);
   }
@@ -137,9 +95,7 @@ var heartBeat = import_react4.keyframes`
   }
 `;
 
-// src/animations/attention_seekers/jello.ts
-var import_react5 = require("@emotion/react");
-var jello = import_react5.keyframes`
+const jello = keyframes`
   from,
   11.1%,
   to {
@@ -175,9 +131,7 @@ var jello = import_react5.keyframes`
   }
 `;
 
-// src/animations/attention_seekers/pulse.ts
-var import_react6 = require("@emotion/react");
-var pulse = import_react6.keyframes`
+const pulse = keyframes`
   from {
     transform: scale3d(1, 1, 1);
   }
@@ -191,9 +145,7 @@ var pulse = import_react6.keyframes`
   }
 `;
 
-// src/animations/attention_seekers/rubberBand.ts
-var import_react7 = require("@emotion/react");
-var rubberBand = import_react7.keyframes`
+const rubberBand = keyframes`
   from {
     transform: scale3d(1, 1, 1);
   }
@@ -223,9 +175,7 @@ var rubberBand = import_react7.keyframes`
   }
 `;
 
-// src/animations/attention_seekers/shake.ts
-var import_react8 = require("@emotion/react");
-var shake = import_react8.keyframes`
+const shake = keyframes`
   from,
   to {
     transform: translate3d(0, 0, 0);
@@ -247,9 +197,7 @@ var shake = import_react8.keyframes`
   }
 `;
 
-// src/animations/attention_seekers/shakeX.ts
-var import_react9 = require("@emotion/react");
-var shakeX = import_react9.keyframes`
+const shakeX = keyframes`
   from,
   to {
     transform: translate3d(0, 0, 0);
@@ -271,9 +219,7 @@ var shakeX = import_react9.keyframes`
   }
 `;
 
-// src/animations/attention_seekers/shakeY.ts
-var import_react10 = require("@emotion/react");
-var shakeY = import_react10.keyframes`
+const shakeY = keyframes`
   from,
   to {
     transform: translate3d(0, 0, 0);
@@ -295,9 +241,7 @@ var shakeY = import_react10.keyframes`
   }
 `;
 
-// src/animations/attention_seekers/swing.ts
-var import_react11 = require("@emotion/react");
-var swing = import_react11.keyframes`
+const swing = keyframes`
   20% {
     transform: rotate3d(0, 0, 1, 15deg);
   }
@@ -319,9 +263,7 @@ var swing = import_react11.keyframes`
   }
 `;
 
-// src/animations/attention_seekers/tada.ts
-var import_react12 = require("@emotion/react");
-var tada = import_react12.keyframes`
+const tada = keyframes`
   from {
     transform: scale3d(1, 1, 1);
   }
@@ -349,9 +291,7 @@ var tada = import_react12.keyframes`
   }
 `;
 
-// src/animations/attention_seekers/wobble.ts
-var import_react13 = require("@emotion/react");
-var wobble = import_react13.keyframes`
+const wobble = keyframes`
   from {
     transform: translate3d(0, 0, 0);
   }
@@ -381,15 +321,7 @@ var wobble = import_react13.keyframes`
   }
 `;
 
-// src/Reveal.tsx
-var import_react28 = require("@emotion/react");
-var import_react29 = require("react");
-var import_react_intersection_observer = require("react-intersection-observer");
-var import_react_is = require("react-is");
-
-// src/animations/fading_entrances/fadeIn.ts
-var import_react14 = require("@emotion/react");
-var fadeIn = import_react14.keyframes`
+const fadeIn = keyframes`
   from {
     opacity: 0;
   }
@@ -399,9 +331,7 @@ var fadeIn = import_react14.keyframes`
   }
 `;
 
-// src/animations/fading_entrances/fadeInBottomLeft.ts
-var import_react15 = require("@emotion/react");
-var fadeInBottomLeft = import_react15.keyframes`
+const fadeInBottomLeft = keyframes`
   from {
     opacity: 0;
     transform: translate3d(-100%, 100%, 0);
@@ -413,9 +343,7 @@ var fadeInBottomLeft = import_react15.keyframes`
   }
 `;
 
-// src/animations/fading_entrances/fadeInBottomRight.ts
-var import_react16 = require("@emotion/react");
-var fadeInBottomRight = import_react16.keyframes`
+const fadeInBottomRight = keyframes`
   from {
     opacity: 0;
     transform: translate3d(100%, 100%, 0);
@@ -427,9 +355,7 @@ var fadeInBottomRight = import_react16.keyframes`
   }
 `;
 
-// src/animations/fading_entrances/fadeInDown.ts
-var import_react17 = require("@emotion/react");
-var fadeInDown = import_react17.keyframes`
+const fadeInDown = keyframes`
   from {
     opacity: 0;
     transform: translate3d(0, -100%, 0);
@@ -441,9 +367,7 @@ var fadeInDown = import_react17.keyframes`
   }
 `;
 
-// src/animations/fading_entrances/fadeInDownBig.ts
-var import_react18 = require("@emotion/react");
-var fadeInDownBig = import_react18.keyframes`
+const fadeInDownBig = keyframes`
   from {
     opacity: 0;
     transform: translate3d(0, -2000px, 0);
@@ -455,9 +379,7 @@ var fadeInDownBig = import_react18.keyframes`
   }
 `;
 
-// src/animations/fading_entrances/fadeInLeft.ts
-var import_react19 = require("@emotion/react");
-var fadeInLeft = import_react19.keyframes`
+const fadeInLeft = keyframes`
   from {
     opacity: 0;
     transform: translate3d(-100%, 0, 0);
@@ -469,9 +391,7 @@ var fadeInLeft = import_react19.keyframes`
   }
 `;
 
-// src/animations/fading_entrances/fadeInLeftBig.ts
-var import_react20 = require("@emotion/react");
-var fadeInLeftBig = import_react20.keyframes`
+const fadeInLeftBig = keyframes`
   from {
     opacity: 0;
     transform: translate3d(-2000px, 0, 0);
@@ -483,9 +403,7 @@ var fadeInLeftBig = import_react20.keyframes`
   }
 `;
 
-// src/animations/fading_entrances/fadeInRight.ts
-var import_react21 = require("@emotion/react");
-var fadeInRight = import_react21.keyframes`
+const fadeInRight = keyframes`
   from {
     opacity: 0;
     transform: translate3d(100%, 0, 0);
@@ -497,9 +415,7 @@ var fadeInRight = import_react21.keyframes`
   }
 `;
 
-// src/animations/fading_entrances/fadeInRightBig.ts
-var import_react22 = require("@emotion/react");
-var fadeInRightBig = import_react22.keyframes`
+const fadeInRightBig = keyframes`
   from {
     opacity: 0;
     transform: translate3d(2000px, 0, 0);
@@ -511,9 +427,7 @@ var fadeInRightBig = import_react22.keyframes`
   }
 `;
 
-// src/animations/fading_entrances/fadeInTopLeft.ts
-var import_react23 = require("@emotion/react");
-var fadeInTopLeft = import_react23.keyframes`
+const fadeInTopLeft = keyframes`
   from {
     opacity: 0;
     transform: translate3d(-100%, -100%, 0);
@@ -525,9 +439,7 @@ var fadeInTopLeft = import_react23.keyframes`
   }
 `;
 
-// src/animations/fading_entrances/fadeInTopRight.ts
-var import_react24 = require("@emotion/react");
-var fadeInTopRight = import_react24.keyframes`
+const fadeInTopRight = keyframes`
   from {
     opacity: 0;
     transform: translate3d(100%, -100%, 0);
@@ -539,9 +451,7 @@ var fadeInTopRight = import_react24.keyframes`
   }
 `;
 
-// src/animations/fading_entrances/fadeInUp.ts
-var import_react25 = require("@emotion/react");
-var fadeInUp = import_react25.keyframes`
+const fadeInUp = keyframes`
   from {
     opacity: 0;
     transform: translate3d(0, 100%, 0);
@@ -553,9 +463,7 @@ var fadeInUp = import_react25.keyframes`
   }
 `;
 
-// src/animations/fading_entrances/fadeInUpBig.ts
-var import_react26 = require("@emotion/react");
-var fadeInUpBig = import_react26.keyframes`
+const fadeInUpBig = keyframes`
   from {
     opacity: 0;
     transform: translate3d(0, 2000px, 0);
@@ -567,20 +475,18 @@ var fadeInUpBig = import_react26.keyframes`
   }
 `;
 
-// src/utils/animations.ts
-var import_react27 = require("@emotion/react");
 function getAnimationCss({
   duration = 1e3,
   delay = 0,
   timingFunction = "ease",
-  keyframes: keyframes87 = fadeInLeft,
+  keyframes = fadeInLeft,
   iterationCount = 1
 }) {
-  return import_react27.css`
+  return 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};
@@ -591,7 +497,6 @@ function getAnimationCss({
   `;
 }
 
-// src/utils/guards.ts
 function isNullable(a) {
   return a == void 0;
 }
@@ -599,7 +504,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();
 }
@@ -607,19 +511,17 @@ function matchIfOrNull(onTrue) {
   return matchIf(onTrue, () => null);
 }
 
-// src/Reveal.tsx
-var import_jsx_runtime = require("@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,
@@ -628,43 +530,43 @@ var Reveal = (props) => {
     children,
     onVisibilityChange
   } = props;
-  const animationStyles = (0, import_react29.useMemo)(
+  const animationStyles = useMemo(
     () => getAnimationCss({
-      keyframes: keyframes87,
+      keyframes,
       duration
     }),
-    [duration, keyframes87]
+    [duration, keyframes]
   );
   if (isNullable(children))
     return null;
   if (isStringLike(children))
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextReveal, { ...props, animationStyles, children: String(children) });
-  if ((0, import_react_is.isFragment)(children))
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FragmentReveal, { ...props, animationStyles });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: import_react29.Children.map(children, (node, index) => {
-    if (!(0, import_react29.isValidElement)(node))
+    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 null;
     const nodeDelay = delay + (cascade ? index * duration * damping : 0);
     switch (node.type) {
       case "ol":
       case "ul":
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react28.ClassNames, { children: ({ cx }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        return /* @__PURE__ */ jsx(ClassNames, { children: ({ cx }) => /* @__PURE__ */ jsx(
           node.type,
           {
             ...node.props,
             className: cx(className, node.props.className),
             style: Object.assign({}, style, node.props.style),
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Reveal, { ...props, children: node.props.children })
+            children: /* @__PURE__ */ jsx(Reveal, { ...props, children: node.props.children })
           }
         ) });
       case "li":
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_react_intersection_observer.InView,
+        return /* @__PURE__ */ jsx(
+          InView,
           {
             threshold: fraction,
             triggerOnce,
             onChange: onVisibilityChange,
-            children: ({ inView, ref }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react28.ClassNames, { children: ({ cx }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            children: ({ inView, ref }) => /* @__PURE__ */ jsx(ClassNames, { children: ({ cx }) => /* @__PURE__ */ jsx(
               node.type,
               {
                 ...node.props,
@@ -685,13 +587,13 @@ var Reveal = (props) => {
           }
         );
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_react_intersection_observer.InView,
+        return /* @__PURE__ */ jsx(
+          InView,
           {
             threshold: fraction,
             triggerOnce,
             onChange: onVisibilityChange,
-            children: ({ inView, ref }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            children: ({ inView, ref }) => /* @__PURE__ */ jsx(
               "div",
               {
                 ref,
@@ -700,7 +602,7 @@ var Reveal = (props) => {
                 style: Object.assign({}, style, hideWhen(!inView), {
                   animationDelay: nodeDelay + "ms"
                 }),
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react28.ClassNames, { children: ({ cx }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                children: /* @__PURE__ */ jsx(ClassNames, { children: ({ cx }) => /* @__PURE__ */ jsx(
                   node.type,
                   {
                     ...node.props,
@@ -719,11 +621,11 @@ var Reveal = (props) => {
     }
   }) });
 };
-var textBaseStyles = {
+const textBaseStyles = {
   display: "inline-block",
   whiteSpace: "pre"
 };
-var TextReveal = (props) => {
+const TextReveal = (props) => {
   const {
     animationStyles,
     cascade = false,
@@ -737,19 +639,19 @@ var TextReveal = (props) => {
     children,
     onVisibilityChange
   } = props;
-  const { ref, inView } = (0, import_react_intersection_observer.useInView)({
+  const { ref, inView } = useInView({
     triggerOnce,
     threshold: fraction,
     onChange: onVisibilityChange
   });
   return matchIf(
-    () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    () => /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         className,
         style: Object.assign({}, style, textBaseStyles),
-        children: children.split("").map((char, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        children: children.split("").map((char, index) => /* @__PURE__ */ jsx(
           "span",
           {
             css: matchIfOrNull(() => animationStyles)(inView),
@@ -762,10 +664,10 @@ var TextReveal = (props) => {
         ))
       }
     ),
-    () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FragmentReveal, { ...props, children })
+    () => /* @__PURE__ */ jsx(FragmentReveal, { ...props, children })
   )(cascade);
 };
-var FragmentReveal = (props) => {
+const FragmentReveal = (props) => {
   const {
     animationStyles,
     fraction = 0,
@@ -775,12 +677,12 @@ var FragmentReveal = (props) => {
     children,
     onVisibilityChange
   } = props;
-  const { ref, inView } = (0, import_react_intersection_observer.useInView)({
+  const { ref, inView } = useInView({
     triggerOnce,
     threshold: fraction,
     onChange: onVisibilityChange
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       ref,
@@ -792,9 +694,7 @@ var FragmentReveal = (props) => {
   );
 };
 
-// src/components/AttentionSeeker.tsx
-var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
-function getStyles(effect) {
+function getStyles$7(effect) {
   switch (effect) {
     case "bounce":
       return [bounce, { transformOrigin: "center bottom" }];
@@ -824,25 +724,20 @@ function getStyles(effect) {
       return [wobble];
   }
 }
-var AttentionSeeker = (props) => {
+const AttentionSeeker = (props) => {
   const { effect = "bounce", style, ...rest } = props;
-  const [keyframes87, animationCss3] = (0, import_react30.useMemo)(() => getStyles(effect), [effect]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  const [keyframes, animationCss] = useMemo(() => getStyles$7(effect), [effect]);
+  return /* @__PURE__ */ jsx(
     Reveal,
     {
-      keyframes: keyframes87,
-      style: Object.assign({}, style, animationCss3),
+      keyframes,
+      style: Object.assign({}, style, animationCss),
       ...rest
     }
   );
 };
 
-// src/components/Bounce.tsx
-var import_react41 = require("react");
-
-// src/animations/bouncing_entrances/bounceIn.ts
-var import_react31 = require("@emotion/react");
-var bounceIn = import_react31.keyframes`
+const bounceIn = keyframes`
   from,
   20%,
   40%,
@@ -880,9 +775,7 @@ var bounceIn = import_react31.keyframes`
   }
 `;
 
-// src/animations/bouncing_entrances/bounceInDown.ts
-var import_react32 = require("@emotion/react");
-var bounceInDown = import_react32.keyframes`
+const bounceInDown = keyframes`
   from,
   60%,
   75%,
@@ -914,9 +807,7 @@ var bounceInDown = import_react32.keyframes`
   }
 `;
 
-// src/animations/bouncing_entrances/bounceInLeft.ts
-var import_react33 = require("@emotion/react");
-var bounceInLeft = import_react33.keyframes`
+const bounceInLeft = keyframes`
   from,
   60%,
   75%,
@@ -948,9 +839,7 @@ var bounceInLeft = import_react33.keyframes`
   }
 `;
 
-// src/animations/bouncing_entrances/bounceInRight.ts
-var import_react34 = require("@emotion/react");
-var bounceInRight = import_react34.keyframes`
+const bounceInRight = keyframes`
   from,
   60%,
   75%,
@@ -982,9 +871,7 @@ var bounceInRight = import_react34.keyframes`
   }
 `;
 
-// src/animations/bouncing_entrances/bounceInUp.ts
-var import_react35 = require("@emotion/react");
-var bounceInUp = import_react35.keyframes`
+const bounceInUp = keyframes`
   from,
   60%,
   75%,
@@ -1016,9 +903,7 @@ var bounceInUp = import_react35.keyframes`
   }
 `;
 
-// src/animations/bouncing_exits/bounceOut.ts
-var import_react36 = require("@emotion/react");
-var bounceOut = import_react36.keyframes`
+const bounceOut = keyframes`
   20% {
     transform: scale3d(0.9, 0.9, 0.9);
   }
@@ -1035,9 +920,7 @@ var bounceOut = import_react36.keyframes`
   }
 `;
 
-// src/animations/bouncing_exits/bounceOutDown.ts
-var import_react37 = require("@emotion/react");
-var bounceOutDown = import_react37.keyframes`
+const bounceOutDown = keyframes`
   20% {
     transform: translate3d(0, 10px, 0) scaleY(0.985);
   }
@@ -1054,9 +937,7 @@ var bounceOutDown = import_react37.keyframes`
   }
 `;
 
-// src/animations/bouncing_exits/bounceOutLeft.ts
-var import_react38 = require("@emotion/react");
-var bounceOutLeft = import_react38.keyframes`
+const bounceOutLeft = keyframes`
   20% {
     opacity: 1;
     transform: translate3d(20px, 0, 0) scaleX(0.9);
@@ -1068,9 +949,7 @@ var bounceOutLeft = import_react38.keyframes`
   }
 `;
 
-// src/animations/bouncing_exits/bounceOutRight.ts
-var import_react39 = require("@emotion/react");
-var bounceOutRight = import_react39.keyframes`
+const bounceOutRight = keyframes`
   20% {
     opacity: 1;
     transform: translate3d(-20px, 0, 0) scaleX(0.9);
@@ -1082,9 +961,7 @@ var bounceOutRight = import_react39.keyframes`
   }
 `;
 
-// src/animations/bouncing_exits/bounceOutUp.ts
-var import_react40 = require("@emotion/react");
-var bounceOutUp = import_react40.keyframes`
+const bounceOutUp = keyframes`
   20% {
     transform: translate3d(0, -10px, 0) scaleY(0.985);
   }
@@ -1101,9 +978,7 @@ var bounceOutUp = import_react40.keyframes`
   }
 `;
 
-// src/components/Bounce.tsx
-var import_jsx_runtime3 = require("@emotion/react/jsx-runtime");
-function getStyles2(reverse, direction) {
+function getStyles$6(reverse, direction) {
   switch (direction) {
     case "down":
       return reverse ? bounceOutDown : bounceInDown;
@@ -1117,21 +992,16 @@ function getStyles2(reverse, direction) {
       return reverse ? bounceOut : bounceIn;
   }
 }
-var Bounce = (props) => {
+const Bounce = (props) => {
   const { direction, reverse = false, ...rest } = props;
-  const keyframes87 = (0, import_react41.useMemo)(
-    () => getStyles2(reverse, direction),
+  const keyframes = useMemo(
+    () => getStyles$6(reverse, direction),
     [direction, reverse]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Reveal, { keyframes: keyframes87, ...rest });
+  return /* @__PURE__ */ jsx(Reveal, { keyframes, ...rest });
 };
 
-// src/components/Fade.tsx
-var import_react55 = require("react");
-
-// src/animations/fading_exits/fadeOut.ts
-var import_react42 = require("@emotion/react");
-var fadeOut = import_react42.keyframes`
+const fadeOut = keyframes`
   from {
     opacity: 1;
   }
@@ -1141,9 +1011,7 @@ var fadeOut = import_react42.keyframes`
   }
 `;
 
-// src/animations/fading_exits/fadeOutBottomLeft.ts
-var import_react43 = require("@emotion/react");
-var fadeOutBottomLeft = import_react43.keyframes`
+const fadeOutBottomLeft = keyframes`
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);
@@ -1155,9 +1023,7 @@ var fadeOutBottomLeft = import_react43.keyframes`
   }
 `;
 
-// src/animations/fading_exits/fadeOutBottomRight.ts
-var import_react44 = require("@emotion/react");
-var fadeOutBottomRight = import_react44.keyframes`
+const fadeOutBottomRight = keyframes`
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);
@@ -1169,9 +1035,7 @@ var fadeOutBottomRight = import_react44.keyframes`
   }
 `;
 
-// src/animations/fading_exits/fadeOutDown.ts
-var import_react45 = require("@emotion/react");
-var fadeOutDown = import_react45.keyframes`
+const fadeOutDown = keyframes`
   from {
     opacity: 1;
   }
@@ -1182,9 +1046,7 @@ var fadeOutDown = import_react45.keyframes`
   }
 `;
 
-// src/animations/fading_exits/fadeOutDownBig.ts
-var import_react46 = require("@emotion/react");
-var fadeOutDownBig = import_react46.keyframes`
+const fadeOutDownBig = keyframes`
   from {
     opacity: 1;
   }
@@ -1195,9 +1057,7 @@ var fadeOutDownBig = import_react46.keyframes`
   }
 `;
 
-// src/animations/fading_exits/fadeOutLeft.ts
-var import_react47 = require("@emotion/react");
-var fadeOutLeft = import_react47.keyframes`
+const fadeOutLeft = keyframes`
   from {
     opacity: 1;
   }
@@ -1208,9 +1068,7 @@ var fadeOutLeft = import_react47.keyframes`
   }
 `;
 
-// src/animations/fading_exits/fadeOutLeftBig.ts
-var import_react48 = require("@emotion/react");
-var fadeOutLeftBig = import_react48.keyframes`
+const fadeOutLeftBig = keyframes`
   from {
     opacity: 1;
   }
@@ -1221,9 +1079,7 @@ var fadeOutLeftBig = import_react48.keyframes`
   }
 `;
 
-// src/animations/fading_exits/fadeOutRight.ts
-var import_react49 = require("@emotion/react");
-var fadeOutRight = import_react49.keyframes`
+const fadeOutRight = keyframes`
   from {
     opacity: 1;
   }
@@ -1234,9 +1090,7 @@ var fadeOutRight = import_react49.keyframes`
   }
 `;
 
-// src/animations/fading_exits/fadeOutRightBig.ts
-var import_react50 = require("@emotion/react");
-var fadeOutRightBig = import_react50.keyframes`
+const fadeOutRightBig = keyframes`
   from {
     opacity: 1;
   }
@@ -1247,9 +1101,7 @@ var fadeOutRightBig = import_react50.keyframes`
   }
 `;
 
-// src/animations/fading_exits/fadeOutTopLeft.ts
-var import_react51 = require("@emotion/react");
-var fadeOutTopLeft = import_react51.keyframes`
+const fadeOutTopLeft = keyframes`
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);
@@ -1261,9 +1113,7 @@ var fadeOutTopLeft = import_react51.keyframes`
   }
 `;
 
-// src/animations/fading_exits/fadeOutTopRight.ts
-var import_react52 = require("@emotion/react");
-var fadeOutTopRight = import_react52.keyframes`
+const fadeOutTopRight = keyframes`
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);
@@ -1275,9 +1125,7 @@ var fadeOutTopRight = import_react52.keyframes`
   }
 `;
 
-// src/animations/fading_exits/fadeOutUp.ts
-var import_react53 = require("@emotion/react");
-var fadeOutUp = import_react53.keyframes`
+const fadeOutUp = keyframes`
   from {
     opacity: 1;
   }
@@ -1288,9 +1136,7 @@ var fadeOutUp = import_react53.keyframes`
   }
 `;
 
-// src/animations/fading_exits/fadeOutUpBig.ts
-var import_react54 = require("@emotion/react");
-var fadeOutUpBig = import_react54.keyframes`
+const fadeOutUpBig = keyframes`
   from {
     opacity: 1;
   }
@@ -1301,9 +1147,7 @@ var fadeOutUpBig = import_react54.keyframes`
   }
 `;
 
-// src/components/Fade.tsx
-var import_jsx_runtime4 = require("@emotion/react/jsx-runtime");
-function getStyles3(big, reverse, direction) {
+function getStyles$5(big, reverse, direction) {
   switch (direction) {
     case "bottom-left":
       return reverse ? fadeOutBottomLeft : fadeInBottomLeft;
@@ -1325,21 +1169,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 = (0, import_react55.useMemo)(
-    () => getStyles3(big, reverse, direction),
+  const keyframes = useMemo(
+    () => getStyles$5(big, reverse, direction),
     [big, direction, reverse]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Reveal, { keyframes: keyframes87, ...rest });
+  return /* @__PURE__ */ jsx(Reveal, { keyframes, ...rest });
 };
 
-// src/components/Flip.tsx
-var import_react61 = require("react");
-
-// src/animations/flippers/flip.ts
-var import_react56 = require("@emotion/react");
-var flip = import_react56.keyframes`
+const flip = keyframes`
   from {
     transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
     animation-timing-function: ease-out;
@@ -1369,9 +1208,7 @@ var flip = import_react56.keyframes`
   }
 `;
 
-// src/animations/flippers/flipInX.ts
-var import_react57 = require("@emotion/react");
-var flipInX = import_react57.keyframes`
+const flipInX = keyframes`
   from {
     transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
     animation-timing-function: ease-in;
@@ -1397,9 +1234,7 @@ var flipInX = import_react57.keyframes`
   }
 `;
 
-// src/animations/flippers/flipInY.ts
-var import_react58 = require("@emotion/react");
-var flipInY = import_react58.keyframes`
+const flipInY = keyframes`
   from {
     transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
     animation-timing-function: ease-in;
@@ -1425,9 +1260,7 @@ var flipInY = import_react58.keyframes`
   }
 `;
 
-// src/animations/flippers/flipOutX.ts
-var import_react59 = require("@emotion/react");
-var flipOutX = import_react59.keyframes`
+const flipOutX = keyframes`
   from {
     transform: perspective(400px);
   }
@@ -1443,9 +1276,7 @@ var flipOutX = import_react59.keyframes`
   }
 `;
 
-// src/animations/flippers/flipOutY.ts
-var import_react60 = require("@emotion/react");
-var flipOutY = import_react60.keyframes`
+const flipOutY = keyframes`
   from {
     transform: perspective(400px);
   }
@@ -1461,9 +1292,7 @@ var flipOutY = import_react60.keyframes`
   }
 `;
 
-// src/components/Flip.tsx
-var import_jsx_runtime5 = require("@emotion/react/jsx-runtime");
-function getStyles4(reverse, direction) {
+function getStyles$4(reverse, direction) {
   switch (direction) {
     case "horizontal":
       return reverse ? flipOutX : flipInX;
@@ -1473,28 +1302,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 = (0, import_react61.useMemo)(
-    () => getStyles4(reverse, direction),
+  const keyframes = useMemo(
+    () => getStyles$4(reverse, direction),
     [direction, reverse]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ jsx(
     Reveal,
     {
-      keyframes: keyframes87,
-      style: Object.assign({}, style, animationCss),
+      keyframes,
+      style: Object.assign({}, style, animationCss$1),
       ...rest
     }
   );
 };
 
-// src/animations/specials/hinge.ts
-var import_react62 = require("@emotion/react");
-var hinge = import_react62.keyframes`
+const hinge = keyframes`
   0% {
     animation-timing-function: ease-in-out;
   }
@@ -1518,9 +1345,7 @@ var hinge = import_react62.keyframes`
   }
 `;
 
-// src/animations/specials/jackInTheBox.ts
-var import_react63 = require("@emotion/react");
-var jackInTheBox = import_react63.keyframes`
+const jackInTheBox = keyframes`
   from {
     opacity: 0;
     transform: scale(0.1) rotate(30deg);
@@ -1541,9 +1366,7 @@ var jackInTheBox = import_react63.keyframes`
   }
 `;
 
-// src/animations/specials/rollIn.ts
-var import_react64 = require("@emotion/react");
-var rollIn = import_react64.keyframes`
+const rollIn = keyframes`
   from {
     opacity: 0;
     transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
@@ -1555,9 +1378,7 @@ var rollIn = import_react64.keyframes`
   }
 `;
 
-// src/animations/specials/rollOut.ts
-var import_react65 = require("@emotion/react");
-var rollOut = import_react65.keyframes`
+const rollOut = keyframes`
   from {
     opacity: 1;
   }
@@ -1568,47 +1389,35 @@ var rollOut = import_react65.keyframes`
   }
 `;
 
-// src/components/Hinge.tsx
-var import_jsx_runtime6 = require("@emotion/react/jsx-runtime");
-var animationCss2 = {
+const animationCss = {
   transformOrigin: "top left"
 };
-var Hinge = (props) => {
+const Hinge = (props) => {
   const { style, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ jsx(
     Reveal,
     {
       keyframes: hinge,
-      style: Object.assign({}, style, animationCss2),
+      style: Object.assign({}, style, animationCss),
       ...rest
     }
   );
 };
 
-// src/components/JackInTheBox.tsx
-var import_jsx_runtime7 = require("@emotion/react/jsx-runtime");
-var JackInTheBox = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Reveal, { keyframes: jackInTheBox, ...props });
+const JackInTheBox = (props) => {
+  return /* @__PURE__ */ jsx(Reveal, { keyframes: jackInTheBox, ...props });
 };
 
-// src/components/Roll.tsx
-var import_react66 = require("react");
-var import_jsx_runtime8 = require("@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 = (0, import_react66.useMemo)(() => getStyles5(reverse), [reverse]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Reveal, { keyframes: keyframes87, ...rest });
+  const keyframes = useMemo(() => getStyles$3(reverse), [reverse]);
+  return /* @__PURE__ */ jsx(Reveal, { keyframes, ...rest });
 };
 
-// src/components/Rotate.tsx
-var import_react77 = require("react");
-
-// src/animations/rotating_entrances/rotateIn.ts
-var import_react67 = require("@emotion/react");
-var rotateIn = import_react67.keyframes`
+const rotateIn = keyframes`
   from {
     transform: rotate3d(0, 0, 1, -200deg);
     opacity: 0;
@@ -1620,9 +1429,7 @@ var rotateIn = import_react67.keyframes`
   }
 `;
 
-// src/animations/rotating_entrances/rotateInDownLeft.ts
-var import_react68 = require("@emotion/react");
-var rotateInDownLeft = import_react68.keyframes`
+const rotateInDownLeft = keyframes`
   from {
     transform: rotate3d(0, 0, 1, -45deg);
     opacity: 0;
@@ -1634,9 +1441,7 @@ var rotateInDownLeft = import_react68.keyframes`
   }
 `;
 
-// src/animations/rotating_entrances/rotateInDownRight.ts
-var import_react69 = require("@emotion/react");
-var rotateInDownRight = import_react69.keyframes`
+const rotateInDownRight = keyframes`
   from {
     transform: rotate3d(0, 0, 1, 45deg);
     opacity: 0;
@@ -1648,9 +1453,7 @@ var rotateInDownRight = import_react69.keyframes`
   }
 `;
 
-// src/animations/rotating_entrances/rotateInUpLeft.ts
-var import_react70 = require("@emotion/react");
-var rotateInUpLeft = import_react70.keyframes`
+const rotateInUpLeft = keyframes`
   from {
     transform: rotate3d(0, 0, 1, 45deg);
     opacity: 0;
@@ -1662,9 +1465,7 @@ var rotateInUpLeft = import_react70.keyframes`
   }
 `;
 
-// src/animations/rotating_entrances/rotateInUpRight.ts
-var import_react71 = require("@emotion/react");
-var rotateInUpRight = import_react71.keyframes`
+const rotateInUpRight = keyframes`
   from {
     transform: rotate3d(0, 0, 1, -90deg);
     opacity: 0;
@@ -1676,9 +1477,7 @@ var rotateInUpRight = import_react71.keyframes`
   }
 `;
 
-// src/animations/rotating_exits/rotateOut.ts
-var import_react72 = require("@emotion/react");
-var rotateOut = import_react72.keyframes`
+const rotateOut = keyframes`
   from {
     opacity: 1;
   }
@@ -1689,9 +1488,7 @@ var rotateOut = import_react72.keyframes`
   }
 `;
 
-// src/animations/rotating_exits/rotateOutDownLeft.ts
-var import_react73 = require("@emotion/react");
-var rotateOutDownLeft = import_react73.keyframes`
+const rotateOutDownLeft = keyframes`
   from {
     opacity: 1;
   }
@@ -1702,9 +1499,7 @@ var rotateOutDownLeft = import_react73.keyframes`
   }
 `;
 
-// src/animations/rotating_exits/rotateOutDownRight.ts
-var import_react74 = require("@emotion/react");
-var rotateOutDownRight = import_react74.keyframes`
+const rotateOutDownRight = keyframes`
   from {
     opacity: 1;
   }
@@ -1715,9 +1510,7 @@ var rotateOutDownRight = import_react74.keyframes`
   }
 `;
 
-// src/animations/rotating_exits/rotateOutUpLeft.ts
-var import_react75 = require("@emotion/react");
-var rotateOutUpLeft = import_react75.keyframes`
+const rotateOutUpLeft = keyframes`
   from {
     opacity: 1;
   }
@@ -1728,9 +1521,7 @@ var rotateOutUpLeft = import_react75.keyframes`
   }
 `;
 
-// src/animations/rotating_exits/rotateOutUpRight.ts
-var import_react76 = require("@emotion/react");
-var rotateOutUpRight = import_react76.keyframes`
+const rotateOutUpRight = keyframes`
   from {
     opacity: 1;
   }
@@ -1741,9 +1532,7 @@ var rotateOutUpRight = import_react76.keyframes`
   }
 `;
 
-// src/components/Rotate.tsx
-var import_jsx_runtime9 = require("@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" }];
@@ -1757,28 +1546,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] = (0, import_react77.useMemo)(
-    () => getStyles6(reverse, direction),
+  const [keyframes, animationCss] = useMemo(
+    () => getStyles$2(reverse, direction),
     [direction, reverse]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ jsx(
     Reveal,
     {
-      keyframes: keyframes87,
-      style: Object.assign({}, style, animationCss3),
+      keyframes,
+      style: Object.assign({}, style, animationCss),
       ...rest
     }
   );
 };
 
-// src/components/Slide.tsx
-var import_react86 = require("react");
-
-// src/animations/sliding_entrances/slideInDown.ts
-var import_react78 = require("@emotion/react");
-var slideInDown = import_react78.keyframes`
+const slideInDown = keyframes`
   from {
     transform: translate3d(0, -100%, 0);
     visibility: visible;
@@ -1789,9 +1573,7 @@ var slideInDown = import_react78.keyframes`
   }
 `;
 
-// src/animations/sliding_entrances/slideInLeft.ts
-var import_react79 = require("@emotion/react");
-var slideInLeft = import_react79.keyframes`
+const slideInLeft = keyframes`
   from {
     transform: translate3d(-100%, 0, 0);
     visibility: visible;
@@ -1802,9 +1584,7 @@ var slideInLeft = import_react79.keyframes`
   }
 `;
 
-// src/animations/sliding_entrances/slideInRight.ts
-var import_react80 = require("@emotion/react");
-var slideInRight = import_react80.keyframes`
+const slideInRight = keyframes`
   from {
     transform: translate3d(100%, 0, 0);
     visibility: visible;
@@ -1815,9 +1595,7 @@ var slideInRight = import_react80.keyframes`
   }
 `;
 
-// src/animations/sliding_entrances/slideInUp.ts
-var import_react81 = require("@emotion/react");
-var slideInUp = import_react81.keyframes`
+const slideInUp = keyframes`
   from {
     transform: translate3d(0, 100%, 0);
     visibility: visible;
@@ -1828,9 +1606,7 @@ var slideInUp = import_react81.keyframes`
   }
 `;
 
-// src/animations/sliding_exits/slideOutDown.ts
-var import_react82 = require("@emotion/react");
-var slideOutDown = import_react82.keyframes`
+const slideOutDown = keyframes`
   from {
     transform: translate3d(0, 0, 0);
   }
@@ -1841,9 +1617,7 @@ var slideOutDown = import_react82.keyframes`
   }
 `;
 
-// src/animations/sliding_exits/slideOutLeft.ts
-var import_react83 = require("@emotion/react");
-var slideOutLeft = import_react83.keyframes`
+const slideOutLeft = keyframes`
   from {
     transform: translate3d(0, 0, 0);
   }
@@ -1854,9 +1628,7 @@ var slideOutLeft = import_react83.keyframes`
   }
 `;
 
-// src/animations/sliding_exits/slideOutRight.ts
-var import_react84 = require("@emotion/react");
-var slideOutRight = import_react84.keyframes`
+const slideOutRight = keyframes`
   from {
     transform: translate3d(0, 0, 0);
   }
@@ -1867,9 +1639,7 @@ var slideOutRight = import_react84.keyframes`
   }
 `;
 
-// src/animations/sliding_exits/slideOutUp.ts
-var import_react85 = require("@emotion/react");
-var slideOutUp = import_react85.keyframes`
+const slideOutUp = keyframes`
   from {
     transform: translate3d(0, 0, 0);
   }
@@ -1880,9 +1650,7 @@ var slideOutUp = import_react85.keyframes`
   }
 `;
 
-// src/components/Slide.tsx
-var import_jsx_runtime10 = require("@emotion/react/jsx-runtime");
-function getStyles7(reverse, direction) {
+function getStyles$1(reverse, direction) {
   switch (direction) {
     case "down":
       return reverse ? slideOutDown : slideInDown;
@@ -1895,21 +1663,16 @@ function getStyles7(reverse, direction) {
       return reverse ? slideOutLeft : slideInLeft;
   }
 }
-var Slide = (props) => {
+const Slide = (props) => {
   const { direction, reverse = false, ...rest } = props;
-  const keyframes87 = (0, import_react86.useMemo)(
-    () => getStyles7(reverse, direction),
+  const keyframes = useMemo(
+    () => getStyles$1(reverse, direction),
     [direction, reverse]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Reveal, { keyframes: keyframes87, ...rest });
+  return /* @__PURE__ */ jsx(Reveal, { keyframes, ...rest });
 };
 
-// src/components/Zoom.tsx
-var import_react97 = require("react");
-
-// src/animations/zooming_entrances/zoomIn.ts
-var import_react87 = require("@emotion/react");
-var zoomIn = import_react87.keyframes`
+const zoomIn = keyframes`
   from {
     opacity: 0;
     transform: scale3d(0.3, 0.3, 0.3);
@@ -1920,9 +1683,7 @@ var zoomIn = import_react87.keyframes`
   }
 `;
 
-// src/animations/zooming_entrances/zoomInDown.ts
-var import_react88 = require("@emotion/react");
-var zoomInDown = import_react88.keyframes`
+const zoomInDown = keyframes`
   from {
     opacity: 0;
     transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
@@ -1936,9 +1697,7 @@ var zoomInDown = import_react88.keyframes`
   }
 `;
 
-// src/animations/zooming_entrances/zoomInLeft.ts
-var import_react89 = require("@emotion/react");
-var zoomInLeft = import_react89.keyframes`
+const zoomInLeft = keyframes`
   from {
     opacity: 0;
     transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
@@ -1952,9 +1711,7 @@ var zoomInLeft = import_react89.keyframes`
   }
 `;
 
-// src/animations/zooming_entrances/zoomInRight.ts
-var import_react90 = require("@emotion/react");
-var zoomInRight = import_react90.keyframes`
+const zoomInRight = keyframes`
   from {
     opacity: 0;
     transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
@@ -1968,9 +1725,7 @@ var zoomInRight = import_react90.keyframes`
   }
 `;
 
-// src/animations/zooming_entrances/zoomInUp.ts
-var import_react91 = require("@emotion/react");
-var zoomInUp = import_react91.keyframes`
+const zoomInUp = keyframes`
   from {
     opacity: 0;
     transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
@@ -1984,9 +1739,7 @@ var zoomInUp = import_react91.keyframes`
   }
 `;
 
-// src/animations/zooming_exits/zoomOut.ts
-var import_react92 = require("@emotion/react");
-var zoomOut = import_react92.keyframes`
+const zoomOut = keyframes`
   from {
     opacity: 1;
   }
@@ -2001,9 +1754,7 @@ var zoomOut = import_react92.keyframes`
   }
 `;
 
-// src/animations/zooming_exits/zoomOutDown.ts
-var import_react93 = require("@emotion/react");
-var zoomOutDown = import_react93.keyframes`
+const zoomOutDown = keyframes`
   40% {
     opacity: 1;
     transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
@@ -2017,9 +1768,7 @@ var zoomOutDown = import_react93.keyframes`
   }
 `;
 
-// src/animations/zooming_exits/zoomOutLeft.ts
-var import_react94 = require("@emotion/react");
-var zoomOutLeft = import_react94.keyframes`
+const zoomOutLeft = keyframes`
   40% {
     opacity: 1;
     transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
@@ -2031,9 +1780,7 @@ var zoomOutLeft = import_react94.keyframes`
   }
 `;
 
-// src/animations/zooming_exits/zoomOutRight.ts
-var import_react95 = require("@emotion/react");
-var zoomOutRight = import_react95.keyframes`
+const zoomOutRight = keyframes`
   40% {
     opacity: 1;
     transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
@@ -2045,9 +1792,7 @@ var zoomOutRight = import_react95.keyframes`
   }
 `;
 
-// src/animations/zooming_exits/zoomOutUp.ts
-var import_react96 = require("@emotion/react");
-var zoomOutUp = import_react96.keyframes`
+const zoomOutUp = keyframes`
   40% {
     opacity: 1;
     transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
@@ -2061,9 +1806,7 @@ var zoomOutUp = import_react96.keyframes`
   }
 `;
 
-// src/components/Zoom.tsx
-var import_jsx_runtime11 = require("@emotion/react/jsx-runtime");
-function getStyles8(reverse, direction) {
+function getStyles(reverse, direction) {
   switch (direction) {
     case "down":
       return reverse ? zoomOutDown : zoomInDown;
@@ -2077,26 +1820,14 @@ function getStyles8(reverse, direction) {
       return reverse ? zoomOut : zoomIn;
   }
 }
-var Zoom = (props) => {
+const Zoom = (props) => {
   const { direction, reverse = false, ...rest } = props;
-  const keyframes87 = (0, import_react97.useMemo)(
-    () => getStyles8(reverse, direction),
+  const keyframes = useMemo(
+    () => getStyles(reverse, direction),
     [direction, reverse]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Reveal, { keyframes: keyframes87, ...rest });
+  return /* @__PURE__ */ jsx(Reveal, { keyframes, ...rest });
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  AttentionSeeker,
-  Bounce,
-  Fade,
-  Flip,
-  Hinge,
-  JackInTheBox,
-  Reveal,
-  Roll,
-  Rotate,
-  Slide,
-  Zoom
-});
-//# sourceMappingURL=index.js.map
+
+export { AttentionSeeker, Bounce, Fade, Flip, Hinge, JackInTheBox, Reveal, Roll, Rotate, Slide, Zoom, Reveal as default };
+//# sourceMappingURL=index.js.map