fix: moved some things outside of the OnboardContainer

this prevents refreshing of the entire styled component on render

ts/components/registration/components/OnboardingContainer.tsx

@@ -2,6 +2,16 @@ import { motion } from 'framer-motion';
 import { ReactNode } from 'react';
 import styled from 'styled-components';
 
+const OnboardContainerInner = styled(motion.div)`
+  width: 100%;
+`;
+
+const fadeSlideVariants = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 },
+};
+
 type OnboardContainerProps = {
   animate?: boolean;
   children: ReactNode;
@@ -10,15 +20,6 @@ type OnboardContainerProps = {
 
 export const OnboardContainer = (props: OnboardContainerProps) => {
   const { animate = false, children, key } = props;
-  const OnboardContainerInner = styled(motion.div)`
-    width: 100%;
-  `;
-
-  const fadeSlideVariants = {
-    initial: { opacity: 0 },
-    animate: { opacity: 1 },
-    exit: { opacity: 0 },
-  };
 
   return (
     <OnboardContainerInner