react-awesome-reveal 4.1.0 → 4.2.0

package/dist/index.js

@@ -36,7 +36,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/components/AttentionSeeker.tsx
-var import_react31 = require("react");
+var import_react30 = require("react");
 
 // src/animations/attention_seekers/bounce.ts
 var import_react = require("@emotion/react");
@@ -584,10 +584,14 @@ function getAnimationCss({
     animation-direction: normal;
     animation-fill-mode: both;
     animation-iteration-count: ${iterationCount};
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
   `;
 }
 
-// src/utils/react.ts
+// src/utils/guards.ts
 function isNullable(a) {
   return a == void 0;
 }
@@ -595,15 +599,22 @@ 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();
+}
+function matchIfOrNull(onTrue) {
+  return matchIf(onTrue, () => null);
+}
+
 // src/Reveal.tsx
 var import_jsx_runtime = require("@emotion/react/jsx-runtime");
-var hiddenStyles = import_react28.css`
-  opacity: 0;
-`;
-var textBaseStyles = import_react28.css`
-  display: inline-block;
-  white-space: pre;
-`;
+function hideWhen(condition) {
+  return matchIf(
+    () => ({ opacity: 0 }),
+    () => ({ opacity: 1 })
+  )(condition);
+}
 var Reveal = (props) => {
   const {
     cascade = false,
@@ -613,7 +624,6 @@ var Reveal = (props) => {
     fraction = 0,
     keyframes: keyframes87 = fadeInLeft,
     triggerOnce = false,
-    css: revealCss,
     className,
     style,
     childClassName,
@@ -628,83 +638,91 @@ var Reveal = (props) => {
     }),
     [duration, keyframes87]
   );
-  if (isNullable(children)) {
+  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 null;
-      const inViewStyles = [revealCss, animationStyles];
-      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)(node.type, {
-              ...node.props,
-              className: cx(className, node.props.className),
-              style: { ...style, ...node.props.style },
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Reveal, {
-                ...props,
-                children: node.props.children
-              })
-            })
-          });
-        case "li":
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intersection_observer.InView, {
+  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 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)(
+          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 })
+          }
+        ) });
+      case "li":
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react_intersection_observer.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)(node.type, {
+            children: ({ inView, ref }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react28.ClassNames, { children: ({ cx }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              node.type,
+              {
                 ...node.props,
                 ref,
                 className: cx(childClassName, node.props.className),
-                css: inView ? inViewStyles : hiddenStyles,
-                style: {
-                  ...childStyle,
-                  ...node.props.style,
-                  animationDelay: nodeDelay + "ms"
-                }
-              })
-            })
-          });
-        default:
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intersection_observer.InView, {
+                css: matchIfOrNull(() => animationStyles)(inView),
+                style: Object.assign(
+                  {},
+                  childStyle,
+                  node.props.style,
+                  hideWhen(!inView),
+                  { animationDelay: nodeDelay + "ms" }
+                )
+              }
+            ) })
+          }
+        );
+      default:
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react_intersection_observer.InView,
+          {
             threshold: fraction,
             triggerOnce,
             onChange: onVisibilityChange,
-            children: ({ inView, ref }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-              ref,
-              className,
-              css: inView ? inViewStyles : hiddenStyles,
-              style: { ...style, animationDelay: nodeDelay + "ms" },
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react28.ClassNames, {
-                children: ({ cx }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(node.type, {
-                  ...node.props,
-                  className: cx(childClassName, node.props.className),
-                  style: { ...childStyle, ...node.props.style }
-                })
-              })
-            })
-          });
-      }
-    })
-  });
+            children: ({ inView, ref }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                ref,
+                className,
+                css: matchIfOrNull(() => animationStyles)(inView),
+                style: Object.assign({}, style, {
+                  animationDelay: nodeDelay + "ms"
+                }),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react28.ClassNames, { children: ({ cx }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  node.type,
+                  {
+                    ...node.props,
+                    className: cx(childClassName, node.props.className),
+                    style: Object.assign(
+                      {},
+                      childStyle,
+                      node.props.style
+                    )
+                  }
+                ) })
+              }
+            )
+          }
+        );
+    }
+  }) });
+};
+var textBaseStyles = {
+  display: "inline-block",
+  whiteSpace: "pre"
 };
 var TextReveal = (props) => {
   const {
@@ -715,7 +733,6 @@ var TextReveal = (props) => {
     duration = 1e3,
     fraction = 0,
     triggerOnce = false,
-    css: revealCss,
     className,
     style,
     children,
@@ -726,29 +743,34 @@ var TextReveal = (props) => {
     threshold: fraction,
     onChange: onVisibilityChange
   });
-  return cascade ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-    ref,
-    className,
-    css: [revealCss, textBaseStyles],
-    style,
-    children: children.split("").map((char, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-      css: inView ? animationStyles : hiddenStyles,
-      style: {
-        animationDelay: delay + index * duration * damping + "ms"
-      },
-      children: char
-    }, index))
-  }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FragmentReveal, {
-    ...props,
-    children
-  });
+  return matchIf(
+    () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref,
+        className,
+        style: Object.assign({}, style, textBaseStyles),
+        children: children.split("").map((char, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            css: matchIfOrNull(() => animationStyles)(inView),
+            style: Object.assign({}, hideWhen(!inView), {
+              animationDelay: delay + index * duration * damping + "ms"
+            }),
+            children: char
+          },
+          index
+        ))
+      }
+    ),
+    () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FragmentReveal, { ...props, children })
+  )(cascade);
 };
 var FragmentReveal = (props) => {
   const {
     animationStyles,
     fraction = 0,
     triggerOnce = false,
-    css: revealCss,
     className,
     style,
     children,
@@ -759,20 +781,24 @@ var FragmentReveal = (props) => {
     threshold: fraction,
     onChange: onVisibilityChange
   });
-  const inViewStyles = [revealCss, animationStyles];
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-    ref,
-    className,
-    css: inView ? inViewStyles : hiddenStyles,
-    style,
-    children
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref,
+      className,
+      css: matchIfOrNull(() => animationStyles)(inView),
+      style: Object.assign({}, style, hideWhen(!inView)),
+      children
+    }
+  );
 };
 
 // src/components/AttentionSeeker.tsx
 var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
 function getStyles(effect) {
   switch (effect) {
+    case "bounce":
+      return [bounce, { transformOrigin: "center bottom" }];
     case "flash":
       return [flash];
     case "headShake":
@@ -797,27 +823,27 @@ function getStyles(effect) {
       return [tada];
     case "wobble":
       return [wobble];
-    case "bounce":
-    default:
-      return [bounce, { transformOrigin: "center bottom" }];
   }
 }
 var AttentionSeeker = (props) => {
-  const { effect = "bounce", ...rest } = props;
-  const [keyframes87, animationCss3] = (0, import_react31.useMemo)(() => getStyles(effect), [effect]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Reveal, {
-    keyframes: keyframes87,
-    css: animationCss3,
-    ...rest
-  });
+  const { effect = "bounce", style, ...rest } = props;
+  const [keyframes87, animationCss3] = (0, import_react30.useMemo)(() => getStyles(effect), [effect]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Reveal,
+    {
+      keyframes: keyframes87,
+      style: Object.assign({}, style, animationCss3),
+      ...rest
+    }
+  );
 };
 
 // src/components/Bounce.tsx
-var import_react42 = require("react");
+var import_react41 = require("react");
 
 // src/animations/bouncing_entrances/bounceIn.ts
-var import_react32 = require("@emotion/react");
-var bounceIn = import_react32.keyframes`
+var import_react31 = require("@emotion/react");
+var bounceIn = import_react31.keyframes`
   from,
   20%,
   40%,
@@ -856,8 +882,8 @@ var bounceIn = import_react32.keyframes`
 `;
 
 // src/animations/bouncing_entrances/bounceInDown.ts
-var import_react33 = require("@emotion/react");
-var bounceInDown = import_react33.keyframes`
+var import_react32 = require("@emotion/react");
+var bounceInDown = import_react32.keyframes`
   from,
   60%,
   75%,
@@ -890,8 +916,8 @@ var bounceInDown = import_react33.keyframes`
 `;
 
 // src/animations/bouncing_entrances/bounceInLeft.ts
-var import_react34 = require("@emotion/react");
-var bounceInLeft = import_react34.keyframes`
+var import_react33 = require("@emotion/react");
+var bounceInLeft = import_react33.keyframes`
   from,
   60%,
   75%,
@@ -924,8 +950,8 @@ var bounceInLeft = import_react34.keyframes`
 `;
 
 // src/animations/bouncing_entrances/bounceInRight.ts
-var import_react35 = require("@emotion/react");
-var bounceInRight = import_react35.keyframes`
+var import_react34 = require("@emotion/react");
+var bounceInRight = import_react34.keyframes`
   from,
   60%,
   75%,
@@ -958,8 +984,8 @@ var bounceInRight = import_react35.keyframes`
 `;
 
 // src/animations/bouncing_entrances/bounceInUp.ts
-var import_react36 = require("@emotion/react");
-var bounceInUp = import_react36.keyframes`
+var import_react35 = require("@emotion/react");
+var bounceInUp = import_react35.keyframes`
   from,
   60%,
   75%,
@@ -992,8 +1018,8 @@ var bounceInUp = import_react36.keyframes`
 `;
 
 // src/animations/bouncing_exits/bounceOut.ts
-var import_react37 = require("@emotion/react");
-var bounceOut = import_react37.keyframes`
+var import_react36 = require("@emotion/react");
+var bounceOut = import_react36.keyframes`
   20% {
     transform: scale3d(0.9, 0.9, 0.9);
   }
@@ -1011,8 +1037,8 @@ var bounceOut = import_react37.keyframes`
 `;
 
 // src/animations/bouncing_exits/bounceOutDown.ts
-var import_react38 = require("@emotion/react");
-var bounceOutDown = import_react38.keyframes`
+var import_react37 = require("@emotion/react");
+var bounceOutDown = import_react37.keyframes`
   20% {
     transform: translate3d(0, 10px, 0) scaleY(0.985);
   }
@@ -1030,8 +1056,8 @@ var bounceOutDown = import_react38.keyframes`
 `;
 
 // src/animations/bouncing_exits/bounceOutLeft.ts
-var import_react39 = require("@emotion/react");
-var bounceOutLeft = import_react39.keyframes`
+var import_react38 = require("@emotion/react");
+var bounceOutLeft = import_react38.keyframes`
   20% {
     opacity: 1;
     transform: translate3d(20px, 0, 0) scaleX(0.9);
@@ -1044,8 +1070,8 @@ var bounceOutLeft = import_react39.keyframes`
 `;
 
 // src/animations/bouncing_exits/bounceOutRight.ts
-var import_react40 = require("@emotion/react");
-var bounceOutRight = import_react40.keyframes`
+var import_react39 = require("@emotion/react");
+var bounceOutRight = import_react39.keyframes`
   20% {
     opacity: 1;
     transform: translate3d(-20px, 0, 0) scaleX(0.9);
@@ -1058,8 +1084,8 @@ var bounceOutRight = import_react40.keyframes`
 `;
 
 // src/animations/bouncing_exits/bounceOutUp.ts
-var import_react41 = require("@emotion/react");
-var bounceOutUp = import_react41.keyframes`
+var import_react40 = require("@emotion/react");
+var bounceOutUp = import_react40.keyframes`
   20% {
     transform: translate3d(0, -10px, 0) scaleY(0.985);
   }
@@ -1094,22 +1120,19 @@ function getStyles2(reverse, direction) {
 }
 var Bounce = (props) => {
   const { direction, reverse = false, ...rest } = props;
-  const keyframes87 = (0, import_react42.useMemo)(
+  const keyframes87 = (0, import_react41.useMemo)(
     () => getStyles2(reverse, direction),
     [direction, reverse]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Reveal, {
-    keyframes: keyframes87,
-    ...rest
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Reveal, { keyframes: keyframes87, ...rest });
 };
 
 // src/components/Fade.tsx
-var import_react56 = require("react");
+var import_react55 = require("react");
 
 // src/animations/fading_exits/fadeOut.ts
-var import_react43 = require("@emotion/react");
-var fadeOut = import_react43.keyframes`
+var import_react42 = require("@emotion/react");
+var fadeOut = import_react42.keyframes`
   from {
     opacity: 1;
   }
@@ -1120,8 +1143,8 @@ var fadeOut = import_react43.keyframes`
 `;
 
 // src/animations/fading_exits/fadeOutBottomLeft.ts
-var import_react44 = require("@emotion/react");
-var fadeOutBottomLeft = import_react44.keyframes`
+var import_react43 = require("@emotion/react");
+var fadeOutBottomLeft = import_react43.keyframes`
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);
@@ -1134,8 +1157,8 @@ var fadeOutBottomLeft = import_react44.keyframes`
 `;
 
 // src/animations/fading_exits/fadeOutBottomRight.ts
-var import_react45 = require("@emotion/react");
-var fadeOutBottomRight = import_react45.keyframes`
+var import_react44 = require("@emotion/react");
+var fadeOutBottomRight = import_react44.keyframes`
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);
@@ -1148,8 +1171,8 @@ var fadeOutBottomRight = import_react45.keyframes`
 `;
 
 // src/animations/fading_exits/fadeOutDown.ts
-var import_react46 = require("@emotion/react");
-var fadeOutDown = import_react46.keyframes`
+var import_react45 = require("@emotion/react");
+var fadeOutDown = import_react45.keyframes`
   from {
     opacity: 1;
   }
@@ -1161,8 +1184,8 @@ var fadeOutDown = import_react46.keyframes`
 `;
 
 // src/animations/fading_exits/fadeOutDownBig.ts
-var import_react47 = require("@emotion/react");
-var fadeOutDownBig = import_react47.keyframes`
+var import_react46 = require("@emotion/react");
+var fadeOutDownBig = import_react46.keyframes`
   from {
     opacity: 1;
   }
@@ -1174,8 +1197,8 @@ var fadeOutDownBig = import_react47.keyframes`
 `;
 
 // src/animations/fading_exits/fadeOutLeft.ts
-var import_react48 = require("@emotion/react");
-var fadeOutLeft = import_react48.keyframes`
+var import_react47 = require("@emotion/react");
+var fadeOutLeft = import_react47.keyframes`
   from {
     opacity: 1;
   }
@@ -1187,8 +1210,8 @@ var fadeOutLeft = import_react48.keyframes`
 `;
 
 // src/animations/fading_exits/fadeOutLeftBig.ts
-var import_react49 = require("@emotion/react");
-var fadeOutLeftBig = import_react49.keyframes`
+var import_react48 = require("@emotion/react");
+var fadeOutLeftBig = import_react48.keyframes`
   from {
     opacity: 1;
   }
@@ -1200,8 +1223,8 @@ var fadeOutLeftBig = import_react49.keyframes`
 `;
 
 // src/animations/fading_exits/fadeOutRight.ts
-var import_react50 = require("@emotion/react");
-var fadeOutRight = import_react50.keyframes`
+var import_react49 = require("@emotion/react");
+var fadeOutRight = import_react49.keyframes`
   from {
     opacity: 1;
   }
@@ -1213,8 +1236,8 @@ var fadeOutRight = import_react50.keyframes`
 `;
 
 // src/animations/fading_exits/fadeOutRightBig.ts
-var import_react51 = require("@emotion/react");
-var fadeOutRightBig = import_react51.keyframes`
+var import_react50 = require("@emotion/react");
+var fadeOutRightBig = import_react50.keyframes`
   from {
     opacity: 1;
   }
@@ -1226,8 +1249,8 @@ var fadeOutRightBig = import_react51.keyframes`
 `;
 
 // src/animations/fading_exits/fadeOutTopLeft.ts
-var import_react52 = require("@emotion/react");
-var fadeOutTopLeft = import_react52.keyframes`
+var import_react51 = require("@emotion/react");
+var fadeOutTopLeft = import_react51.keyframes`
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);
@@ -1240,8 +1263,8 @@ var fadeOutTopLeft = import_react52.keyframes`
 `;
 
 // src/animations/fading_exits/fadeOutTopRight.ts
-var import_react53 = require("@emotion/react");
-var fadeOutTopRight = import_react53.keyframes`
+var import_react52 = require("@emotion/react");
+var fadeOutTopRight = import_react52.keyframes`
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);
@@ -1254,8 +1277,8 @@ var fadeOutTopRight = import_react53.keyframes`
 `;
 
 // src/animations/fading_exits/fadeOutUp.ts
-var import_react54 = require("@emotion/react");
-var fadeOutUp = import_react54.keyframes`
+var import_react53 = require("@emotion/react");
+var fadeOutUp = import_react53.keyframes`
   from {
     opacity: 1;
   }
@@ -1267,8 +1290,8 @@ var fadeOutUp = import_react54.keyframes`
 `;
 
 // src/animations/fading_exits/fadeOutUpBig.ts
-var import_react55 = require("@emotion/react");
-var fadeOutUpBig = import_react55.keyframes`
+var import_react54 = require("@emotion/react");
+var fadeOutUpBig = import_react54.keyframes`
   from {
     opacity: 1;
   }
@@ -1305,23 +1328,19 @@ function getStyles3(big, reverse, direction) {
 }
 var Fade = (props) => {
   const { big = false, direction, reverse = false, ...rest } = props;
-  const keyframes87 = (0, import_react56.useMemo)(
+  const keyframes87 = (0, import_react55.useMemo)(
     () => getStyles3(big, reverse, direction),
     [big, direction, reverse]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Reveal, {
-    keyframes: keyframes87,
-    ...rest
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Reveal, { keyframes: keyframes87, ...rest });
 };
 
 // src/components/Flip.tsx
-var import_react62 = require("@emotion/react");
-var import_react63 = require("react");
+var import_react61 = require("react");
 
 // src/animations/flippers/flip.ts
-var import_react57 = require("@emotion/react");
-var flip = import_react57.keyframes`
+var import_react56 = require("@emotion/react");
+var flip = import_react56.keyframes`
   from {
     transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
     animation-timing-function: ease-out;
@@ -1352,8 +1371,8 @@ var flip = import_react57.keyframes`
 `;
 
 // src/animations/flippers/flipInX.ts
-var import_react58 = require("@emotion/react");
-var flipInX = import_react58.keyframes`
+var import_react57 = require("@emotion/react");
+var flipInX = import_react57.keyframes`
   from {
     transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
     animation-timing-function: ease-in;
@@ -1380,8 +1399,8 @@ var flipInX = import_react58.keyframes`
 `;
 
 // src/animations/flippers/flipInY.ts
-var import_react59 = require("@emotion/react");
-var flipInY = import_react59.keyframes`
+var import_react58 = require("@emotion/react");
+var flipInY = import_react58.keyframes`
   from {
     transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
     animation-timing-function: ease-in;
@@ -1408,8 +1427,8 @@ var flipInY = import_react59.keyframes`
 `;
 
 // src/animations/flippers/flipOutX.ts
-var import_react60 = require("@emotion/react");
-var flipOutX = import_react60.keyframes`
+var import_react59 = require("@emotion/react");
+var flipOutX = import_react59.keyframes`
   from {
     transform: perspective(400px);
   }
@@ -1426,8 +1445,8 @@ var flipOutX = import_react60.keyframes`
 `;
 
 // src/animations/flippers/flipOutY.ts
-var import_react61 = require("@emotion/react");
-var flipOutY = import_react61.keyframes`
+var import_react60 = require("@emotion/react");
+var flipOutY = import_react60.keyframes`
   from {
     transform: perspective(400px);
   }
@@ -1455,28 +1474,28 @@ function getStyles4(reverse, direction) {
       return flip;
   }
 }
-var animationCss = import_react62.css`
-  backface-visibility: visible;
-`;
+var animationCss = {
+  backfaceVisibility: "visible"
+};
 var Flip = (props) => {
-  const { direction, reverse = false, ...rest } = props;
-  const keyframes87 = (0, import_react63.useMemo)(
+  const { direction, reverse = false, style, ...rest } = props;
+  const keyframes87 = (0, import_react61.useMemo)(
     () => getStyles4(reverse, direction),
     [direction, reverse]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Reveal, {
-    css: animationCss,
-    keyframes: keyframes87,
-    ...rest
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    Reveal,
+    {
+      keyframes: keyframes87,
+      style: Object.assign({}, style, animationCss),
+      ...rest
+    }
+  );
 };
 
-// src/components/Hinge.tsx
-var import_react68 = require("@emotion/react");
-
 // src/animations/specials/hinge.ts
-var import_react64 = require("@emotion/react");
-var hinge = import_react64.keyframes`
+var import_react62 = require("@emotion/react");
+var hinge = import_react62.keyframes`
   0% {
     animation-timing-function: ease-in-out;
   }
@@ -1501,8 +1520,8 @@ var hinge = import_react64.keyframes`
 `;
 
 // src/animations/specials/jackInTheBox.ts
-var import_react65 = require("@emotion/react");
-var jackInTheBox = import_react65.keyframes`
+var import_react63 = require("@emotion/react");
+var jackInTheBox = import_react63.keyframes`
   from {
     opacity: 0;
     transform: scale(0.1) rotate(30deg);
@@ -1524,8 +1543,8 @@ var jackInTheBox = import_react65.keyframes`
 `;
 
 // src/animations/specials/rollIn.ts
-var import_react66 = require("@emotion/react");
-var rollIn = import_react66.keyframes`
+var import_react64 = require("@emotion/react");
+var rollIn = import_react64.keyframes`
   from {
     opacity: 0;
     transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
@@ -1538,8 +1557,8 @@ var rollIn = import_react66.keyframes`
 `;
 
 // src/animations/specials/rollOut.ts
-var import_react67 = require("@emotion/react");
-var rollOut = import_react67.keyframes`
+var import_react65 = require("@emotion/react");
+var rollOut = import_react65.keyframes`
   from {
     opacity: 1;
   }
@@ -1552,47 +1571,45 @@ var rollOut = import_react67.keyframes`
 
 // src/components/Hinge.tsx
 var import_jsx_runtime6 = require("@emotion/react/jsx-runtime");
-var animationCss2 = import_react68.css`
-  transform-origin: top left;
-`;
+var animationCss2 = {
+  transformOrigin: "top left"
+};
 var Hinge = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Reveal, {
-    css: animationCss2,
-    keyframes: hinge,
-    ...props
-  });
+  const { style, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    Reveal,
+    {
+      keyframes: hinge,
+      style: Object.assign({}, style, animationCss2),
+      ...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
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Reveal, { keyframes: jackInTheBox, ...props });
 };
 
 // src/components/Roll.tsx
-var import_react69 = require("react");
+var import_react66 = require("react");
 var import_jsx_runtime8 = require("@emotion/react/jsx-runtime");
 function getStyles5(reverse) {
   return reverse ? rollOut : rollIn;
 }
 var Roll = (props) => {
   const { reverse = false, ...rest } = props;
-  const keyframes87 = (0, import_react69.useMemo)(() => getStyles5(reverse), [reverse]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Reveal, {
-    keyframes: keyframes87,
-    ...rest
-  });
+  const keyframes87 = (0, import_react66.useMemo)(() => getStyles5(reverse), [reverse]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Reveal, { keyframes: keyframes87, ...rest });
 };
 
 // src/components/Rotate.tsx
-var import_react80 = require("react");
+var import_react77 = require("react");
 
 // src/animations/rotating_entrances/rotateIn.ts
-var import_react70 = require("@emotion/react");
-var rotateIn = import_react70.keyframes`
+var import_react67 = require("@emotion/react");
+var rotateIn = import_react67.keyframes`
   from {
     transform: rotate3d(0, 0, 1, -200deg);
     opacity: 0;
@@ -1605,8 +1622,8 @@ var rotateIn = import_react70.keyframes`
 `;
 
 // src/animations/rotating_entrances/rotateInDownLeft.ts
-var import_react71 = require("@emotion/react");
-var rotateInDownLeft = import_react71.keyframes`
+var import_react68 = require("@emotion/react");
+var rotateInDownLeft = import_react68.keyframes`
   from {
     transform: rotate3d(0, 0, 1, -45deg);
     opacity: 0;
@@ -1619,8 +1636,8 @@ var rotateInDownLeft = import_react71.keyframes`
 `;
 
 // src/animations/rotating_entrances/rotateInDownRight.ts
-var import_react72 = require("@emotion/react");
-var rotateInDownRight = import_react72.keyframes`
+var import_react69 = require("@emotion/react");
+var rotateInDownRight = import_react69.keyframes`
   from {
     transform: rotate3d(0, 0, 1, 45deg);
     opacity: 0;
@@ -1633,8 +1650,8 @@ var rotateInDownRight = import_react72.keyframes`
 `;
 
 // src/animations/rotating_entrances/rotateInUpLeft.ts
-var import_react73 = require("@emotion/react");
-var rotateInUpLeft = import_react73.keyframes`
+var import_react70 = require("@emotion/react");
+var rotateInUpLeft = import_react70.keyframes`
   from {
     transform: rotate3d(0, 0, 1, 45deg);
     opacity: 0;
@@ -1647,8 +1664,8 @@ var rotateInUpLeft = import_react73.keyframes`
 `;
 
 // src/animations/rotating_entrances/rotateInUpRight.ts
-var import_react74 = require("@emotion/react");
-var rotateInUpRight = import_react74.keyframes`
+var import_react71 = require("@emotion/react");
+var rotateInUpRight = import_react71.keyframes`
   from {
     transform: rotate3d(0, 0, 1, -90deg);
     opacity: 0;
@@ -1661,8 +1678,8 @@ var rotateInUpRight = import_react74.keyframes`
 `;
 
 // src/animations/rotating_exits/rotateOut.ts
-var import_react75 = require("@emotion/react");
-var rotateOut = import_react75.keyframes`
+var import_react72 = require("@emotion/react");
+var rotateOut = import_react72.keyframes`
   from {
     opacity: 1;
   }
@@ -1674,8 +1691,8 @@ var rotateOut = import_react75.keyframes`
 `;
 
 // src/animations/rotating_exits/rotateOutDownLeft.ts
-var import_react76 = require("@emotion/react");
-var rotateOutDownLeft = import_react76.keyframes`
+var import_react73 = require("@emotion/react");
+var rotateOutDownLeft = import_react73.keyframes`
   from {
     opacity: 1;
   }
@@ -1687,8 +1704,8 @@ var rotateOutDownLeft = import_react76.keyframes`
 `;
 
 // src/animations/rotating_exits/rotateOutDownRight.ts
-var import_react77 = require("@emotion/react");
-var rotateOutDownRight = import_react77.keyframes`
+var import_react74 = require("@emotion/react");
+var rotateOutDownRight = import_react74.keyframes`
   from {
     opacity: 1;
   }
@@ -1700,8 +1717,8 @@ var rotateOutDownRight = import_react77.keyframes`
 `;
 
 // src/animations/rotating_exits/rotateOutUpLeft.ts
-var import_react78 = require("@emotion/react");
-var rotateOutUpLeft = import_react78.keyframes`
+var import_react75 = require("@emotion/react");
+var rotateOutUpLeft = import_react75.keyframes`
   from {
     opacity: 1;
   }
@@ -1713,8 +1730,8 @@ var rotateOutUpLeft = import_react78.keyframes`
 `;
 
 // src/animations/rotating_exits/rotateOutUpRight.ts
-var import_react79 = require("@emotion/react");
-var rotateOutUpRight = import_react79.keyframes`
+var import_react76 = require("@emotion/react");
+var rotateOutUpRight = import_react76.keyframes`
   from {
     opacity: 1;
   }
@@ -1742,24 +1759,27 @@ function getStyles6(reverse, direction) {
   }
 }
 var Rotate = (props) => {
-  const { direction, reverse = false, ...rest } = props;
-  const [keyframes87, animationCss3] = (0, import_react80.useMemo)(
+  const { direction, reverse = false, style, ...rest } = props;
+  const [keyframes87, animationCss3] = (0, import_react77.useMemo)(
     () => getStyles6(reverse, direction),
     [direction, reverse]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Reveal, {
-    css: animationCss3,
-    keyframes: keyframes87,
-    ...rest
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    Reveal,
+    {
+      keyframes: keyframes87,
+      style: Object.assign({}, style, animationCss3),
+      ...rest
+    }
+  );
 };
 
 // src/components/Slide.tsx
-var import_react89 = require("react");
+var import_react86 = require("react");
 
 // src/animations/sliding_entrances/slideInDown.ts
-var import_react81 = require("@emotion/react");
-var slideInDown = import_react81.keyframes`
+var import_react78 = require("@emotion/react");
+var slideInDown = import_react78.keyframes`
   from {
     transform: translate3d(0, -100%, 0);
     visibility: visible;
@@ -1771,8 +1791,8 @@ var slideInDown = import_react81.keyframes`
 `;
 
 // src/animations/sliding_entrances/slideInLeft.ts
-var import_react82 = require("@emotion/react");
-var slideInLeft = import_react82.keyframes`
+var import_react79 = require("@emotion/react");
+var slideInLeft = import_react79.keyframes`
   from {
     transform: translate3d(-100%, 0, 0);
     visibility: visible;
@@ -1784,8 +1804,8 @@ var slideInLeft = import_react82.keyframes`
 `;
 
 // src/animations/sliding_entrances/slideInRight.ts
-var import_react83 = require("@emotion/react");
-var slideInRight = import_react83.keyframes`
+var import_react80 = require("@emotion/react");
+var slideInRight = import_react80.keyframes`
   from {
     transform: translate3d(100%, 0, 0);
     visibility: visible;
@@ -1797,8 +1817,8 @@ var slideInRight = import_react83.keyframes`
 `;
 
 // src/animations/sliding_entrances/slideInUp.ts
-var import_react84 = require("@emotion/react");
-var slideInUp = import_react84.keyframes`
+var import_react81 = require("@emotion/react");
+var slideInUp = import_react81.keyframes`
   from {
     transform: translate3d(0, 100%, 0);
     visibility: visible;
@@ -1810,8 +1830,8 @@ var slideInUp = import_react84.keyframes`
 `;
 
 // src/animations/sliding_exits/slideOutDown.ts
-var import_react85 = require("@emotion/react");
-var slideOutDown = import_react85.keyframes`
+var import_react82 = require("@emotion/react");
+var slideOutDown = import_react82.keyframes`
   from {
     transform: translate3d(0, 0, 0);
   }
@@ -1823,8 +1843,8 @@ var slideOutDown = import_react85.keyframes`
 `;
 
 // src/animations/sliding_exits/slideOutLeft.ts
-var import_react86 = require("@emotion/react");
-var slideOutLeft = import_react86.keyframes`
+var import_react83 = require("@emotion/react");
+var slideOutLeft = import_react83.keyframes`
   from {
     transform: translate3d(0, 0, 0);
   }
@@ -1836,8 +1856,8 @@ var slideOutLeft = import_react86.keyframes`
 `;
 
 // src/animations/sliding_exits/slideOutRight.ts
-var import_react87 = require("@emotion/react");
-var slideOutRight = import_react87.keyframes`
+var import_react84 = require("@emotion/react");
+var slideOutRight = import_react84.keyframes`
   from {
     transform: translate3d(0, 0, 0);
   }
@@ -1849,8 +1869,8 @@ var slideOutRight = import_react87.keyframes`
 `;
 
 // src/animations/sliding_exits/slideOutUp.ts
-var import_react88 = require("@emotion/react");
-var slideOutUp = import_react88.keyframes`
+var import_react85 = require("@emotion/react");
+var slideOutUp = import_react85.keyframes`
   from {
     transform: translate3d(0, 0, 0);
   }
@@ -1878,22 +1898,19 @@ function getStyles7(reverse, direction) {
 }
 var Slide = (props) => {
   const { direction, reverse = false, ...rest } = props;
-  const keyframes87 = (0, import_react89.useMemo)(
+  const keyframes87 = (0, import_react86.useMemo)(
     () => getStyles7(reverse, direction),
     [direction, reverse]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Reveal, {
-    keyframes: keyframes87,
-    ...rest
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Reveal, { keyframes: keyframes87, ...rest });
 };
 
 // src/components/Zoom.tsx
-var import_react100 = require("react");
+var import_react97 = require("react");
 
 // src/animations/zooming_entrances/zoomIn.ts
-var import_react90 = require("@emotion/react");
-var zoomIn = import_react90.keyframes`
+var import_react87 = require("@emotion/react");
+var zoomIn = import_react87.keyframes`
   from {
     opacity: 0;
     transform: scale3d(0.3, 0.3, 0.3);
@@ -1905,8 +1922,8 @@ var zoomIn = import_react90.keyframes`
 `;
 
 // src/animations/zooming_entrances/zoomInDown.ts
-var import_react91 = require("@emotion/react");
-var zoomInDown = import_react91.keyframes`
+var import_react88 = require("@emotion/react");
+var zoomInDown = import_react88.keyframes`
   from {
     opacity: 0;
     transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
@@ -1921,8 +1938,8 @@ var zoomInDown = import_react91.keyframes`
 `;
 
 // src/animations/zooming_entrances/zoomInLeft.ts
-var import_react92 = require("@emotion/react");
-var zoomInLeft = import_react92.keyframes`
+var import_react89 = require("@emotion/react");
+var zoomInLeft = import_react89.keyframes`
   from {
     opacity: 0;
     transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
@@ -1937,8 +1954,8 @@ var zoomInLeft = import_react92.keyframes`
 `;
 
 // src/animations/zooming_entrances/zoomInRight.ts
-var import_react93 = require("@emotion/react");
-var zoomInRight = import_react93.keyframes`
+var import_react90 = require("@emotion/react");
+var zoomInRight = import_react90.keyframes`
   from {
     opacity: 0;
     transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
@@ -1953,8 +1970,8 @@ var zoomInRight = import_react93.keyframes`
 `;
 
 // src/animations/zooming_entrances/zoomInUp.ts
-var import_react94 = require("@emotion/react");
-var zoomInUp = import_react94.keyframes`
+var import_react91 = require("@emotion/react");
+var zoomInUp = import_react91.keyframes`
   from {
     opacity: 0;
     transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
@@ -1969,8 +1986,8 @@ var zoomInUp = import_react94.keyframes`
 `;
 
 // src/animations/zooming_exits/zoomOut.ts
-var import_react95 = require("@emotion/react");
-var zoomOut = import_react95.keyframes`
+var import_react92 = require("@emotion/react");
+var zoomOut = import_react92.keyframes`
   from {
     opacity: 1;
   }
@@ -1986,8 +2003,8 @@ var zoomOut = import_react95.keyframes`
 `;
 
 // src/animations/zooming_exits/zoomOutDown.ts
-var import_react96 = require("@emotion/react");
-var zoomOutDown = import_react96.keyframes`
+var import_react93 = require("@emotion/react");
+var zoomOutDown = import_react93.keyframes`
   40% {
     opacity: 1;
     transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
@@ -2002,8 +2019,8 @@ var zoomOutDown = import_react96.keyframes`
 `;
 
 // src/animations/zooming_exits/zoomOutLeft.ts
-var import_react97 = require("@emotion/react");
-var zoomOutLeft = import_react97.keyframes`
+var import_react94 = require("@emotion/react");
+var zoomOutLeft = import_react94.keyframes`
   40% {
     opacity: 1;
     transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
@@ -2016,8 +2033,8 @@ var zoomOutLeft = import_react97.keyframes`
 `;
 
 // src/animations/zooming_exits/zoomOutRight.ts
-var import_react98 = require("@emotion/react");
-var zoomOutRight = import_react98.keyframes`
+var import_react95 = require("@emotion/react");
+var zoomOutRight = import_react95.keyframes`
   40% {
     opacity: 1;
     transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
@@ -2030,8 +2047,8 @@ var zoomOutRight = import_react98.keyframes`
 `;
 
 // src/animations/zooming_exits/zoomOutUp.ts
-var import_react99 = require("@emotion/react");
-var zoomOutUp = import_react99.keyframes`
+var import_react96 = require("@emotion/react");
+var zoomOutUp = import_react96.keyframes`
   40% {
     opacity: 1;
     transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
@@ -2063,14 +2080,11 @@ function getStyles8(reverse, direction) {
 }
 var Zoom = (props) => {
   const { direction, reverse = false, ...rest } = props;
-  const keyframes87 = (0, import_react100.useMemo)(
+  const keyframes87 = (0, import_react97.useMemo)(
     () => getStyles8(reverse, direction),
     [direction, reverse]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Reveal, {
-    keyframes: keyframes87,
-    ...rest
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Reveal, { keyframes: keyframes87, ...rest });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {