react-awesome-reveal - npm Package Compare versions

Comparing version 4.2.4 to 4.2.5

dist/index.d.ts

@@ -1,191 +0,3 @@
-import { Keyframes } from '@emotion/serialize';
-
-interface RevealProps {
-    /**
-     * Stagger its children animations.
-     * @default false
-     */
-    cascade?: boolean;
-    /**
-     * Factor that affects the delay that each animated element in a cascade animation will be assigned.
-     * @default 0.5
-     */
-    damping?: number;
-    /**
-     * Initial delay, in milliseconds.
-     * @default 0
-     */
-    delay?: number;
-    /**
-     * Animation duration, in milliseconds.
-     * @default 1000
-     */
-    duration?: number;
-    /**
-     * Float number between 0 and 1 indicating how much the element should be in viewport before the animation is triggered.
-     * @default 0
-     */
-    fraction?: number;
-    /**
-     * Custom Emotion animation keyframes.
-     */
-    keyframes?: Keyframes;
-    /**
-     * Specifies if the animation should run only once or everytime the element enters/exits/re-enters the viewport.
-     * @default false
-     */
-    triggerOnce?: boolean;
-    /**
-     * Class names to add to the container element.
-     */
-    className?: string;
-    /**
-     * Inline styles to add to the container element.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Class names to add to the child element.
-     */
-    childClassName?: string;
-    /**
-     * Inline styles to add to the child element.
-     */
-    childStyle?: React.CSSProperties;
-    /**
-     * From React 18, children must be explicitly typed.
-     * @see https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-typescript-definitions
-     */
-    children?: React.ReactNode;
-    /**
-     * Callback executed when the element enters or leaves the viewport.
-     * If more than one element is being animated, this function is called
-     * on each element.
-     *
-     * @param inView The current visibility flag.
-     * @param entry The current IntersectionObserverEntry.
-     */
-    onVisibilityChange?(inView: boolean, entry: IntersectionObserverEntry): void;
-}
-declare const Reveal: React.FC<RevealProps>;
-
-type AttentionSeekerEffect = "bounce" | "flash" | "headShake" | "heartBeat" | "jello" | "pulse" | "rubberBand" | "shake" | "shakeX" | "shakeY" | "swing" | "tada" | "wobble";
-interface AttentionSeekerProps extends Omit<RevealProps, "keyframes"> {
-    /**
-     * The animation effect to use for this attention seeker.
-     * @default "bounce"
-     */
-    effect?: AttentionSeekerEffect;
-}
-declare const AttentionSeeker: React.FC<AttentionSeekerProps>;
-
-type BounceDirection = "down" | "left" | "right" | "up";
-interface BounceProps extends Omit<RevealProps, "keyframes"> {
-    /**
-     * Origin of the animation.
-     * @default undefined
-     */
-    direction?: BounceDirection;
-    /**
-     * Specifies if the animation should make element(s) disappear.
-     * @default false
-     */
-    reverse?: boolean;
-}
-declare const Bounce: React.FC<BounceProps>;
-
-type FadeDirection = "bottom-left" | "bottom-right" | "down" | "left" | "right" | "top-left" | "top-right" | "up";
-interface FadeProps extends Omit<RevealProps, "keyframes"> {
-    /**
-     * Causes the animation to start farther. Only works with "down", "left", "right" and "up" directions.
-     * @default false
-     */
-    big?: boolean;
-    /**
-     * Origin of the animation.
-     * @default undefined
-     */
-    direction?: FadeDirection;
-    /**
-     * Specifies if the animation should make element(s) disappear.
-     * @default false
-     */
-    reverse?: boolean;
-}
-declare const Fade: React.FC<FadeProps>;
-
-type FlipDirection = "horizontal" | "vertical";
-interface FlipProps extends Omit<RevealProps, "keyframes"> {
-    /**
-     * Axis direction of the animation.
-     * @default undefined
-     */
-    direction?: FlipDirection;
-    /**
-     * Specifies if the animation should make element(s) disappear. It only has effect if a direction is specified.
-     * @default false
-     */
-    reverse?: boolean;
-}
-declare const Flip: React.FC<FlipProps>;
-
-type HingeProps = Omit<RevealProps, "keyframes">;
-declare const Hinge: React.FC<HingeProps>;
-
-type JackInTheBoxProps = Omit<RevealProps, "keyframes">;
-declare const JackInTheBox: React.FC<JackInTheBoxProps>;
-
-interface RollProps extends Omit<RevealProps, "keyframes"> {
-    /**
-     * Specifies if the animation should make element(s) disappear.
-     * @default false
-     */
-    reverse?: boolean;
-}
-declare const Roll: React.FC<RollProps>;
-
-type RotateDirection = "bottom-left" | "bottom-right" | "top-left" | "top-right";
-interface RotateProps extends Omit<RevealProps, "keyframes"> {
-    /**
-     * Origin of the animation.
-     * @default undefined
-     */
-    direction?: RotateDirection;
-    /**
-     * Specifies if the animation should make element(s) disappear.
-     * @default false
-     */
-    reverse?: boolean;
-}
-declare const Rotate: React.FC<RotateProps>;
-
-type SlideDirection = "down" | "left" | "right" | "up";
-interface SlideProps extends Omit<RevealProps, "keyframes"> {
-    /**
-     * Origin of the animation.
-     * @default undefined
-     */
-    direction?: SlideDirection;
-    /**
-     * Specifies if the animation should make element(s) disappear.
-     * @default false
-     */
-    reverse?: boolean;
-}
-declare const Slide: React.FC<SlideProps>;
-
-type ZoomDirection = "down" | "left" | "right" | "up";
-interface ZoomProps extends Omit<RevealProps, "keyframes"> {
-    /**
-     * Origin of the animation.
-     * @default undefined
-     */
-    direction?: ZoomDirection;
-    /**
-     * Specifies if the animation should make element(s) disappear.
-     * @default false
-     */
-    reverse?: boolean;
-}
-declare const Zoom: React.FC<ZoomProps>;
-
-export { AttentionSeeker, AttentionSeekerProps, Bounce, BounceProps, Fade, FadeProps, Flip, FlipProps, Hinge, HingeProps, JackInTheBox, JackInTheBoxProps, Reveal, RevealProps, Roll, RollProps, Rotate, RotateProps, Slide, SlideProps, Zoom, ZoomProps, Reveal as default };
+export * from "./components";
+export * from "./Reveal";
+export { Reveal as default } from "./Reveal";

dist/index.js

@@ -1,44 +0,8 @@
-"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);
+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';
 
-// 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`
+const bounce = keyframes`
   from,
@@ -73,5 +37,3 @@ 20%,
 
-// src/animations/attention_seekers/flash.ts
-var import_react2 = require("@emotion/react");
-var flash = import_react2.keyframes`
+const flash = keyframes`
   from,
@@ -89,5 +51,3 @@ 50%,
 
-// src/animations/attention_seekers/headShake.ts
-var import_react3 = require("@emotion/react");
-var headShake = import_react3.keyframes`
+const headShake = keyframes`
   0% {
@@ -118,5 +78,3 @@ transform: translateX(0);
 
-// src/animations/attention_seekers/heartBeat.ts
-var import_react4 = require("@emotion/react");
-var heartBeat = import_react4.keyframes`
+const heartBeat = keyframes`
   0% {
@@ -143,5 +101,3 @@ transform: scale(1);
 
-// src/animations/attention_seekers/jello.ts
-var import_react5 = require("@emotion/react");
-var jello = import_react5.keyframes`
+const jello = keyframes`
   from,
@@ -182,5 +138,3 @@ 11.1%,
 
-// src/animations/attention_seekers/pulse.ts
-var import_react6 = require("@emotion/react");
-var pulse = import_react6.keyframes`
+const pulse = keyframes`
   from {
@@ -199,5 +153,3 @@ transform: scale3d(1, 1, 1);
 
-// src/animations/attention_seekers/rubberBand.ts
-var import_react7 = require("@emotion/react");
-var rubberBand = import_react7.keyframes`
+const rubberBand = keyframes`
   from {
@@ -232,5 +184,3 @@ transform: scale3d(1, 1, 1);
 
-// src/animations/attention_seekers/shake.ts
-var import_react8 = require("@emotion/react");
-var shake = import_react8.keyframes`
+const shake = keyframes`
   from,
@@ -257,5 +207,3 @@ to {
 
-// src/animations/attention_seekers/shakeX.ts
-var import_react9 = require("@emotion/react");
-var shakeX = import_react9.keyframes`
+const shakeX = keyframes`
   from,
@@ -282,5 +230,3 @@ to {
 
-// src/animations/attention_seekers/shakeY.ts
-var import_react10 = require("@emotion/react");
-var shakeY = import_react10.keyframes`
+const shakeY = keyframes`
   from,
@@ -307,5 +253,3 @@ to {
 
-// src/animations/attention_seekers/swing.ts
-var import_react11 = require("@emotion/react");
-var swing = import_react11.keyframes`
+const swing = keyframes`
   20% {
@@ -332,5 +276,3 @@ transform: rotate3d(0, 0, 1, 15deg);
 
-// src/animations/attention_seekers/tada.ts
-var import_react12 = require("@emotion/react");
-var tada = import_react12.keyframes`
+const tada = keyframes`
   from {
@@ -363,5 +305,3 @@ transform: scale3d(1, 1, 1);
 
-// src/animations/attention_seekers/wobble.ts
-var import_react13 = require("@emotion/react");
-var wobble = import_react13.keyframes`
+const wobble = keyframes`
   from {
@@ -396,11 +336,3 @@ transform: translate3d(0, 0, 0);
 
-// 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 {
@@ -415,5 +347,3 @@ opacity: 0;
 
-// src/animations/fading_entrances/fadeInBottomLeft.ts
-var import_react15 = require("@emotion/react");
-var fadeInBottomLeft = import_react15.keyframes`
+const fadeInBottomLeft = keyframes`
   from {
@@ -430,5 +360,3 @@ opacity: 0;
 
-// src/animations/fading_entrances/fadeInBottomRight.ts
-var import_react16 = require("@emotion/react");
-var fadeInBottomRight = import_react16.keyframes`
+const fadeInBottomRight = keyframes`
   from {
@@ -445,5 +373,3 @@ opacity: 0;
 
-// src/animations/fading_entrances/fadeInDown.ts
-var import_react17 = require("@emotion/react");
-var fadeInDown = import_react17.keyframes`
+const fadeInDown = keyframes`
   from {
@@ -460,5 +386,3 @@ opacity: 0;
 
-// src/animations/fading_entrances/fadeInDownBig.ts
-var import_react18 = require("@emotion/react");
-var fadeInDownBig = import_react18.keyframes`
+const fadeInDownBig = keyframes`
   from {
@@ -475,5 +399,3 @@ opacity: 0;
 
-// src/animations/fading_entrances/fadeInLeft.ts
-var import_react19 = require("@emotion/react");
-var fadeInLeft = import_react19.keyframes`
+const fadeInLeft = keyframes`
   from {
@@ -490,5 +412,3 @@ opacity: 0;
 
-// src/animations/fading_entrances/fadeInLeftBig.ts
-var import_react20 = require("@emotion/react");
-var fadeInLeftBig = import_react20.keyframes`
+const fadeInLeftBig = keyframes`
   from {
@@ -505,5 +425,3 @@ opacity: 0;
 
-// src/animations/fading_entrances/fadeInRight.ts
-var import_react21 = require("@emotion/react");
-var fadeInRight = import_react21.keyframes`
+const fadeInRight = keyframes`
   from {
@@ -520,5 +438,3 @@ opacity: 0;
 
-// src/animations/fading_entrances/fadeInRightBig.ts
-var import_react22 = require("@emotion/react");
-var fadeInRightBig = import_react22.keyframes`
+const fadeInRightBig = keyframes`
   from {
@@ -535,5 +451,3 @@ opacity: 0;
 
-// src/animations/fading_entrances/fadeInTopLeft.ts
-var import_react23 = require("@emotion/react");
-var fadeInTopLeft = import_react23.keyframes`
+const fadeInTopLeft = keyframes`
   from {
@@ -550,5 +464,3 @@ opacity: 0;
 
-// src/animations/fading_entrances/fadeInTopRight.ts
-var import_react24 = require("@emotion/react");
-var fadeInTopRight = import_react24.keyframes`
+const fadeInTopRight = keyframes`
   from {
@@ -565,5 +477,3 @@ opacity: 0;
 
-// src/animations/fading_entrances/fadeInUp.ts
-var import_react25 = require("@emotion/react");
-var fadeInUp = import_react25.keyframes`
+const fadeInUp = keyframes`
   from {
@@ -580,5 +490,3 @@ opacity: 0;
 
-// src/animations/fading_entrances/fadeInUpBig.ts
-var import_react26 = require("@emotion/react");
-var fadeInUpBig = import_react26.keyframes`
+const fadeInUpBig = keyframes`
   from {
@@ -595,4 +503,2 @@ opacity: 0;
 
-// src/utils/animations.ts
-var import_react27 = require("@emotion/react");
 function getAnimationCss({
@@ -602,10 +508,10 @@ duration = 1e3,
   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;
@@ -621,3 +527,2 @@ animation-fill-mode: both;
 
-// src/utils/guards.ts
 function isNullable(a) {
@@ -630,3 +535,2 @@ return a == void 0;
 
-// src/utils/patterns.ts
 function matchIf(onTrue, onFalse) {
@@ -639,8 +543,6 @@ return (condition) => condition ? onTrue() : onFalse();
 
-// 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 {
@@ -652,3 +554,3 @@ cascade = false,
     fraction = 0,
-    keyframes: keyframes87 = fadeInLeft,
+    keyframes = fadeInLeft,
     triggerOnce = false,
@@ -662,8 +564,8 @@ className,
   } = props;
-  const animationStyles = (0, import_react29.useMemo)(
+  const animationStyles = useMemo(
     () => getAnimationCss({
-      keyframes: keyframes87,
+      keyframes,
       duration
     }),
-    [duration, keyframes87]
+    [duration, keyframes]
   );
@@ -673,7 +575,7 @@ if (isNullable(children))
   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;
@@ -684,3 +586,3 @@ const nodeDelay = delay + (cascade ? index * duration * damping : 0);
       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,
@@ -691,8 +593,8 @@ {
             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,
           {
@@ -702,3 +604,3 @@ threshold: fraction,
             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,
@@ -724,4 +626,4 @@ {
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_react_intersection_observer.InView,
+        return /* @__PURE__ */ jsx(
+          InView,
           {
@@ -731,3 +633,3 @@ threshold: fraction,
             onChange: onVisibilityChange,
-            children: ({ inView, ref }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            children: ({ inView, ref }) => /* @__PURE__ */ jsx(
               "div",
@@ -741,3 +643,3 @@ {
                 }),
-                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,
@@ -761,7 +663,7 @@ {
 };
-var textBaseStyles = {
+const textBaseStyles = {
   display: "inline-block",
   whiteSpace: "pre"
 };
-var TextReveal = (props) => {
+const TextReveal = (props) => {
   const {
@@ -780,3 +682,3 @@ animationStyles,
   } = props;
-  const { ref, inView } = (0, import_react_intersection_observer.useInView)({
+  const { ref, inView } = useInView({
     triggerOnce,
@@ -787,3 +689,3 @@ threshold: fraction,
   return matchIf(
-    () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    () => /* @__PURE__ */ jsx(
       "div",
@@ -794,3 +696,3 @@ {
         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",
@@ -808,6 +710,6 @@ {
     ),
-    () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FragmentReveal, { ...props, children })
+    () => /* @__PURE__ */ jsx(FragmentReveal, { ...props, children })
   )(cascade);
 };
-var FragmentReveal = (props) => {
+const FragmentReveal = (props) => {
   const {
@@ -822,3 +724,3 @@ animationStyles,
   } = props;
-  const { ref, inView } = (0, import_react_intersection_observer.useInView)({
+  const { ref, inView } = useInView({
     triggerOnce,
@@ -828,3 +730,3 @@ threshold: fraction,
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ jsx(
     "div",
@@ -841,5 +743,3 @@ {
 
-// src/components/AttentionSeeker.tsx
-var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
-function getStyles(effect) {
+function getStyles$7(effect) {
   switch (effect) {
@@ -874,10 +774,10 @@ case "bounce":
 }
-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
@@ -888,8 +788,3 @@ }
 
-// 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,
@@ -932,5 +827,3 @@ 20%,
 
-// src/animations/bouncing_entrances/bounceInDown.ts
-var import_react32 = require("@emotion/react");
-var bounceInDown = import_react32.keyframes`
+const bounceInDown = keyframes`
   from,
@@ -967,5 +860,3 @@ 60%,
 
-// src/animations/bouncing_entrances/bounceInLeft.ts
-var import_react33 = require("@emotion/react");
-var bounceInLeft = import_react33.keyframes`
+const bounceInLeft = keyframes`
   from,
@@ -1002,5 +893,3 @@ 60%,
 
-// src/animations/bouncing_entrances/bounceInRight.ts
-var import_react34 = require("@emotion/react");
-var bounceInRight = import_react34.keyframes`
+const bounceInRight = keyframes`
   from,
@@ -1037,5 +926,3 @@ 60%,
 
-// src/animations/bouncing_entrances/bounceInUp.ts
-var import_react35 = require("@emotion/react");
-var bounceInUp = import_react35.keyframes`
+const bounceInUp = keyframes`
   from,
@@ -1072,5 +959,3 @@ 60%,
 
-// src/animations/bouncing_exits/bounceOut.ts
-var import_react36 = require("@emotion/react");
-var bounceOut = import_react36.keyframes`
+const bounceOut = keyframes`
   20% {
@@ -1092,5 +977,3 @@ transform: scale3d(0.9, 0.9, 0.9);
 
-// src/animations/bouncing_exits/bounceOutDown.ts
-var import_react37 = require("@emotion/react");
-var bounceOutDown = import_react37.keyframes`
+const bounceOutDown = keyframes`
   20% {
@@ -1112,5 +995,3 @@ transform: translate3d(0, 10px, 0) scaleY(0.985);
 
-// src/animations/bouncing_exits/bounceOutLeft.ts
-var import_react38 = require("@emotion/react");
-var bounceOutLeft = import_react38.keyframes`
+const bounceOutLeft = keyframes`
   20% {
@@ -1127,5 +1008,3 @@ opacity: 1;
 
-// src/animations/bouncing_exits/bounceOutRight.ts
-var import_react39 = require("@emotion/react");
-var bounceOutRight = import_react39.keyframes`
+const bounceOutRight = keyframes`
   20% {
@@ -1142,5 +1021,3 @@ opacity: 1;
 
-// src/animations/bouncing_exits/bounceOutUp.ts
-var import_react40 = require("@emotion/react");
-var bounceOutUp = import_react40.keyframes`
+const bounceOutUp = keyframes`
   20% {
@@ -1162,5 +1039,3 @@ transform: translate3d(0, -10px, 0) scaleY(0.985);
 
-// src/components/Bounce.tsx
-var import_jsx_runtime3 = require("@emotion/react/jsx-runtime");
-function getStyles2(reverse, direction) {
+function getStyles$6(reverse, direction) {
   switch (direction) {
@@ -1179,17 +1054,12 @@ case "down":
 }
-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 {
@@ -1204,5 +1074,3 @@ opacity: 1;
 
-// src/animations/fading_exits/fadeOutBottomLeft.ts
-var import_react43 = require("@emotion/react");
-var fadeOutBottomLeft = import_react43.keyframes`
+const fadeOutBottomLeft = keyframes`
   from {
@@ -1219,5 +1087,3 @@ opacity: 1;
 
-// src/animations/fading_exits/fadeOutBottomRight.ts
-var import_react44 = require("@emotion/react");
-var fadeOutBottomRight = import_react44.keyframes`
+const fadeOutBottomRight = keyframes`
   from {
@@ -1234,5 +1100,3 @@ opacity: 1;
 
-// src/animations/fading_exits/fadeOutDown.ts
-var import_react45 = require("@emotion/react");
-var fadeOutDown = import_react45.keyframes`
+const fadeOutDown = keyframes`
   from {
@@ -1248,5 +1112,3 @@ opacity: 1;
 
-// src/animations/fading_exits/fadeOutDownBig.ts
-var import_react46 = require("@emotion/react");
-var fadeOutDownBig = import_react46.keyframes`
+const fadeOutDownBig = keyframes`
   from {
@@ -1262,5 +1124,3 @@ opacity: 1;
 
-// src/animations/fading_exits/fadeOutLeft.ts
-var import_react47 = require("@emotion/react");
-var fadeOutLeft = import_react47.keyframes`
+const fadeOutLeft = keyframes`
   from {
@@ -1276,5 +1136,3 @@ opacity: 1;
 
-// src/animations/fading_exits/fadeOutLeftBig.ts
-var import_react48 = require("@emotion/react");
-var fadeOutLeftBig = import_react48.keyframes`
+const fadeOutLeftBig = keyframes`
   from {
@@ -1290,5 +1148,3 @@ opacity: 1;
 
-// src/animations/fading_exits/fadeOutRight.ts
-var import_react49 = require("@emotion/react");
-var fadeOutRight = import_react49.keyframes`
+const fadeOutRight = keyframes`
   from {
@@ -1304,5 +1160,3 @@ opacity: 1;
 
-// src/animations/fading_exits/fadeOutRightBig.ts
-var import_react50 = require("@emotion/react");
-var fadeOutRightBig = import_react50.keyframes`
+const fadeOutRightBig = keyframes`
   from {
@@ -1318,5 +1172,3 @@ opacity: 1;
 
-// src/animations/fading_exits/fadeOutTopLeft.ts
-var import_react51 = require("@emotion/react");
-var fadeOutTopLeft = import_react51.keyframes`
+const fadeOutTopLeft = keyframes`
   from {
@@ -1333,5 +1185,3 @@ opacity: 1;
 
-// src/animations/fading_exits/fadeOutTopRight.ts
-var import_react52 = require("@emotion/react");
-var fadeOutTopRight = import_react52.keyframes`
+const fadeOutTopRight = keyframes`
   from {
@@ -1348,5 +1198,3 @@ opacity: 1;
 
-// src/animations/fading_exits/fadeOutUp.ts
-var import_react53 = require("@emotion/react");
-var fadeOutUp = import_react53.keyframes`
+const fadeOutUp = keyframes`
   from {
@@ -1362,5 +1210,3 @@ opacity: 1;
 
-// src/animations/fading_exits/fadeOutUpBig.ts
-var import_react54 = require("@emotion/react");
-var fadeOutUpBig = import_react54.keyframes`
+const fadeOutUpBig = keyframes`
   from {
@@ -1376,5 +1222,3 @@ opacity: 1;
 
-// 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) {
@@ -1401,17 +1245,12 @@ case "bottom-left":
 }
-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 {
@@ -1446,5 +1285,3 @@ transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
 
-// src/animations/flippers/flipInX.ts
-var import_react57 = require("@emotion/react");
-var flipInX = import_react57.keyframes`
+const flipInX = keyframes`
   from {
@@ -1475,5 +1312,3 @@ transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
 
-// src/animations/flippers/flipInY.ts
-var import_react58 = require("@emotion/react");
-var flipInY = import_react58.keyframes`
+const flipInY = keyframes`
   from {
@@ -1504,5 +1339,3 @@ transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
 
-// src/animations/flippers/flipOutX.ts
-var import_react59 = require("@emotion/react");
-var flipOutX = import_react59.keyframes`
+const flipOutX = keyframes`
   from {
@@ -1523,5 +1356,3 @@ transform: perspective(400px);
 
-// src/animations/flippers/flipOutY.ts
-var import_react60 = require("@emotion/react");
-var flipOutY = import_react60.keyframes`
+const flipOutY = keyframes`
   from {
@@ -1542,5 +1373,3 @@ transform: perspective(400px);
 
-// src/components/Flip.tsx
-var import_jsx_runtime5 = require("@emotion/react/jsx-runtime");
-function getStyles4(reverse, direction) {
+function getStyles$4(reverse, direction) {
   switch (direction) {
@@ -1555,16 +1384,16 @@ case "horizontal":
 }
-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
@@ -1575,5 +1404,3 @@ }
 
-// src/animations/specials/hinge.ts
-var import_react62 = require("@emotion/react");
-var hinge = import_react62.keyframes`
+const hinge = keyframes`
   0% {
@@ -1602,5 +1429,3 @@ animation-timing-function: ease-in-out;
 
-// src/animations/specials/jackInTheBox.ts
-var import_react63 = require("@emotion/react");
-var jackInTheBox = import_react63.keyframes`
+const jackInTheBox = keyframes`
   from {
@@ -1626,5 +1451,3 @@ opacity: 0;
 
-// src/animations/specials/rollIn.ts
-var import_react64 = require("@emotion/react");
-var rollIn = import_react64.keyframes`
+const rollIn = keyframes`
   from {
@@ -1641,5 +1464,3 @@ opacity: 0;
 
-// src/animations/specials/rollOut.ts
-var import_react65 = require("@emotion/react");
-var rollOut = import_react65.keyframes`
+const rollOut = keyframes`
   from {
@@ -1655,14 +1476,12 @@ opacity: 1;
 
-// 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
@@ -1673,26 +1492,16 @@ }
 
-// 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 {
@@ -1709,5 +1518,3 @@ transform: rotate3d(0, 0, 1, -200deg);
 
-// src/animations/rotating_entrances/rotateInDownLeft.ts
-var import_react68 = require("@emotion/react");
-var rotateInDownLeft = import_react68.keyframes`
+const rotateInDownLeft = keyframes`
   from {
@@ -1724,5 +1531,3 @@ transform: rotate3d(0, 0, 1, -45deg);
 
-// src/animations/rotating_entrances/rotateInDownRight.ts
-var import_react69 = require("@emotion/react");
-var rotateInDownRight = import_react69.keyframes`
+const rotateInDownRight = keyframes`
   from {
@@ -1739,5 +1544,3 @@ transform: rotate3d(0, 0, 1, 45deg);
 
-// src/animations/rotating_entrances/rotateInUpLeft.ts
-var import_react70 = require("@emotion/react");
-var rotateInUpLeft = import_react70.keyframes`
+const rotateInUpLeft = keyframes`
   from {
@@ -1754,5 +1557,3 @@ transform: rotate3d(0, 0, 1, 45deg);
 
-// src/animations/rotating_entrances/rotateInUpRight.ts
-var import_react71 = require("@emotion/react");
-var rotateInUpRight = import_react71.keyframes`
+const rotateInUpRight = keyframes`
   from {
@@ -1769,5 +1570,3 @@ transform: rotate3d(0, 0, 1, -90deg);
 
-// src/animations/rotating_exits/rotateOut.ts
-var import_react72 = require("@emotion/react");
-var rotateOut = import_react72.keyframes`
+const rotateOut = keyframes`
   from {
@@ -1783,5 +1582,3 @@ opacity: 1;
 
-// src/animations/rotating_exits/rotateOutDownLeft.ts
-var import_react73 = require("@emotion/react");
-var rotateOutDownLeft = import_react73.keyframes`
+const rotateOutDownLeft = keyframes`
   from {
@@ -1797,5 +1594,3 @@ opacity: 1;
 
-// src/animations/rotating_exits/rotateOutDownRight.ts
-var import_react74 = require("@emotion/react");
-var rotateOutDownRight = import_react74.keyframes`
+const rotateOutDownRight = keyframes`
   from {
@@ -1811,5 +1606,3 @@ opacity: 1;
 
-// src/animations/rotating_exits/rotateOutUpLeft.ts
-var import_react75 = require("@emotion/react");
-var rotateOutUpLeft = import_react75.keyframes`
+const rotateOutUpLeft = keyframes`
   from {
@@ -1825,5 +1618,3 @@ opacity: 1;
 
-// src/animations/rotating_exits/rotateOutUpRight.ts
-var import_react76 = require("@emotion/react");
-var rotateOutUpRight = import_react76.keyframes`
+const rotateOutUpRight = keyframes`
   from {
@@ -1839,5 +1630,3 @@ opacity: 1;
 
-// src/components/Rotate.tsx
-var import_jsx_runtime9 = require("@emotion/react/jsx-runtime");
-function getStyles6(reverse, direction) {
+function getStyles$2(reverse, direction) {
   switch (direction) {
@@ -1856,13 +1645,13 @@ case "bottom-left":
 }
-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
@@ -1873,8 +1662,3 @@ }
 
-// 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 {
@@ -1890,5 +1674,3 @@ transform: translate3d(0, -100%, 0);
 
-// src/animations/sliding_entrances/slideInLeft.ts
-var import_react79 = require("@emotion/react");
-var slideInLeft = import_react79.keyframes`
+const slideInLeft = keyframes`
   from {
@@ -1904,5 +1686,3 @@ transform: translate3d(-100%, 0, 0);
 
-// src/animations/sliding_entrances/slideInRight.ts
-var import_react80 = require("@emotion/react");
-var slideInRight = import_react80.keyframes`
+const slideInRight = keyframes`
   from {
@@ -1918,5 +1698,3 @@ transform: translate3d(100%, 0, 0);
 
-// src/animations/sliding_entrances/slideInUp.ts
-var import_react81 = require("@emotion/react");
-var slideInUp = import_react81.keyframes`
+const slideInUp = keyframes`
   from {
@@ -1932,5 +1710,3 @@ transform: translate3d(0, 100%, 0);
 
-// src/animations/sliding_exits/slideOutDown.ts
-var import_react82 = require("@emotion/react");
-var slideOutDown = import_react82.keyframes`
+const slideOutDown = keyframes`
   from {
@@ -1946,5 +1722,3 @@ transform: translate3d(0, 0, 0);
 
-// src/animations/sliding_exits/slideOutLeft.ts
-var import_react83 = require("@emotion/react");
-var slideOutLeft = import_react83.keyframes`
+const slideOutLeft = keyframes`
   from {
@@ -1960,5 +1734,3 @@ transform: translate3d(0, 0, 0);
 
-// src/animations/sliding_exits/slideOutRight.ts
-var import_react84 = require("@emotion/react");
-var slideOutRight = import_react84.keyframes`
+const slideOutRight = keyframes`
   from {
@@ -1974,5 +1746,3 @@ transform: translate3d(0, 0, 0);
 
-// src/animations/sliding_exits/slideOutUp.ts
-var import_react85 = require("@emotion/react");
-var slideOutUp = import_react85.keyframes`
+const slideOutUp = keyframes`
   from {
@@ -1988,5 +1758,3 @@ transform: translate3d(0, 0, 0);
 
-// src/components/Slide.tsx
-var import_jsx_runtime10 = require("@emotion/react/jsx-runtime");
-function getStyles7(reverse, direction) {
+function getStyles$1(reverse, direction) {
   switch (direction) {
@@ -2004,17 +1772,12 @@ case "down":
 }
-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 {
@@ -2030,5 +1793,3 @@ opacity: 0;
 
-// src/animations/zooming_entrances/zoomInDown.ts
-var import_react88 = require("@emotion/react");
-var zoomInDown = import_react88.keyframes`
+const zoomInDown = keyframes`
   from {
@@ -2047,5 +1808,3 @@ opacity: 0;
 
-// src/animations/zooming_entrances/zoomInLeft.ts
-var import_react89 = require("@emotion/react");
-var zoomInLeft = import_react89.keyframes`
+const zoomInLeft = keyframes`
   from {
@@ -2064,5 +1823,3 @@ opacity: 0;
 
-// src/animations/zooming_entrances/zoomInRight.ts
-var import_react90 = require("@emotion/react");
-var zoomInRight = import_react90.keyframes`
+const zoomInRight = keyframes`
   from {
@@ -2081,5 +1838,3 @@ opacity: 0;
 
-// src/animations/zooming_entrances/zoomInUp.ts
-var import_react91 = require("@emotion/react");
-var zoomInUp = import_react91.keyframes`
+const zoomInUp = keyframes`
   from {
@@ -2098,5 +1853,3 @@ opacity: 0;
 
-// src/animations/zooming_exits/zoomOut.ts
-var import_react92 = require("@emotion/react");
-var zoomOut = import_react92.keyframes`
+const zoomOut = keyframes`
   from {
@@ -2116,5 +1869,3 @@ opacity: 1;
 
-// src/animations/zooming_exits/zoomOutDown.ts
-var import_react93 = require("@emotion/react");
-var zoomOutDown = import_react93.keyframes`
+const zoomOutDown = keyframes`
   40% {
@@ -2133,5 +1884,3 @@ opacity: 1;
 
-// src/animations/zooming_exits/zoomOutLeft.ts
-var import_react94 = require("@emotion/react");
-var zoomOutLeft = import_react94.keyframes`
+const zoomOutLeft = keyframes`
   40% {
@@ -2148,5 +1897,3 @@ opacity: 1;
 
-// src/animations/zooming_exits/zoomOutRight.ts
-var import_react95 = require("@emotion/react");
-var zoomOutRight = import_react95.keyframes`
+const zoomOutRight = keyframes`
   40% {
@@ -2163,5 +1910,3 @@ opacity: 1;
 
-// src/animations/zooming_exits/zoomOutUp.ts
-var import_react96 = require("@emotion/react");
-var zoomOutUp = import_react96.keyframes`
+const zoomOutUp = keyframes`
   40% {
@@ -2180,5 +1925,3 @@ opacity: 1;
 
-// src/components/Zoom.tsx
-var import_jsx_runtime11 = require("@emotion/react/jsx-runtime");
-function getStyles8(reverse, direction) {
+function getStyles(reverse, direction) {
   switch (direction) {
@@ -2197,24 +1940,12 @@ case "down":
 }
-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

package.json

 {
   "name": "react-awesome-reveal",
   "description": "React components to add reveal animations using the Intersection Observer API and CSS Animations.",
-  "version": "4.2.4",
+  "version": "4.2.5",
   "license": "MIT",
-  "source": "src/index.ts",
+  "type": "module",
   "types": "dist/index.d.ts",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     }
@@ -69,4 +69,6 @@ },
     "@types/react-is": "^18.2.0",
+    "@vitejs/plugin-react": "^4.0.0",
     "react": "^18.2.0",
-    "tsup": "^6.7.0"
+    "vite": "^4.3.4",
+    "vite-plugin-dts": "3.0.0-beta.3"
   },
@@ -78,4 +80,3 @@ "dependencies": {
   "scripts": {
-    "start": "tsup --watch",
-    "build": "tsc --noEmit && tsup",
+    "build": "tsc --noEmit && vite build",
     "lint": "eslint .",
@@ -82,0 +83,0 @@ "lint:fix": "eslint --fix ."

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

294275

increased by1.44%

Number of package files

122

increased by1425%

Lines of code

3899

increased by2.55%

Is type module

Yes

Worsened metrics

Dev dependency count

9

increased by28.57%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes