Revert "fix: fade animation props"

src/components/composites/Transitions/Fade.tsx

@@ -5,36 +5,16 @@ import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
 import { usePropsResolution } from '../../../hooks/';
 
 const Fade = ({ children, ...props }: IFadeProps, ref?: any) => {
-  const {
-    in: animationState,
-    entryDuration,
-    exitDuration,
-    delay,
-    ...resolvedProps
-  } = usePropsResolution('Fade', props);
-
-  // Need to have similar API for all animations
-
-  // Temporary fix
-  const animationStyle = {
-    style: {
-      initial: { opacity: 0 },
-      animate: { opacity: 1, transition: { duration: entryDuration, delay } },
-      exit: { opacity: 0, transition: { duration: exitDuration, delay } },
-    },
-  };
-
+  const { in: animationState, ...resolvedProps } = usePropsResolution(
+    'Fade',
+    props
+  );
   //TODO: refactor for responsive prop
   if (useHasResponsiveProps(props)) {
     return null;
   }
   return (
-    <PresenceTransition
-      visible={animationState}
-      {...animationStyle.style}
-      {...resolvedProps}
-      ref={ref}
-    >
+    <PresenceTransition visible={animationState} {...resolvedProps} ref={ref}>
       {children}
     </PresenceTransition>
   );

src/theme/components/transitions.ts

@@ -1,8 +1,13 @@
 //Fade
+// const fadeDefaultProps = {
+//   entryDuration: 500,
+//   exitDuration: 500,
+// };
+
 export const fadeBaseStyle = {
-  entryDuration: 500,
-  exitDuration: 500,
-  delay: 0,
+  initial: { opacity: 0 },
+  animate: { opacity: 1, transition: { duration: 500 } },
+  exit: { opacity: 0, transition: { duration: 500 } },
 };
 export const Fade = {
   baseStyle: fadeBaseStyle,