@homefile/components-v2 1.2.1 → 1.3.0

package/dist/components/animations/CloudsAnimation.js

@@ -69,5 +69,5 @@ export const CloudsAnimation = ({ children }) => {
     const isMobile = width < 768;
     if (isMobile)
         return _jsx(Fragment, { children: "children" });
-    return (_jsxs(Box, { h: "100vh", w: "full", position: "relative", bgGradient: colors.skyGradient, overflow: "hidden", children: [children, _jsx(Image, { src: Cloud1, position: "absolute", w: "auto", h: "80px", top: "50px", animation: `${moveRightToLeftWithFade3} 400s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Cloud2, position: "absolute", w: "auto", h: "120px", top: "80px", animation: `${moveRightToLeftWithFade3} 200s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Cloud3, position: "absolute", w: "auto", h: "160px", top: "120px", animation: `${moveRightToLeftWithFade3} 130s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Cloud1, position: "absolute", w: "auto", h: "100px", top: "160px", animation: `${moveRightToLeftWithFade2} 400s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Cloud2, position: "absolute", w: "auto", h: "112px", top: "220px", animation: `${moveRightToLeftWithFade2} 200s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Cloud3, position: "absolute", w: "auto", h: "160px", top: "300px", animation: `${moveRightToLeftWithFade2} 130s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Airplane, position: "absolute", w: "auto", h: "40px", top: "85px", animation: `${moveLeftToRightAirplane} 500s cubic-bezier(1, 1, 1, 500) infinite`, zIndex: "1" }), _jsx(Image, { src: TreesCrop, position: "fixed", bottom: "0", right: "2", w: "auto", h: "80px", zIndex: "1" }), _jsx(Image, { src: TreesCrop2, position: "fixed", bottom: "0", left: "2", w: "auto", h: "80px", zIndex: "1" })] }));
+    return (_jsxs(Box, { minH: "100vh", w: "full", position: "relative", bgGradient: colors.skyGradient, overflowX: "hidden", overflowY: "scroll", children: [children, _jsx(Image, { src: Cloud1, position: "fixed", w: "auto", h: "80px", top: "50px", animation: `${moveRightToLeftWithFade3} 400s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Cloud2, position: "fixed", w: "auto", h: "120px", top: "80px", animation: `${moveRightToLeftWithFade3} 200s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Cloud3, position: "fixed", w: "auto", h: "160px", top: "120px", animation: `${moveRightToLeftWithFade3} 130s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Cloud1, position: "fixed", w: "auto", h: "100px", top: "160px", animation: `${moveRightToLeftWithFade2} 400s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Cloud2, position: "fixed", w: "auto", h: "112px", top: "220px", animation: `${moveRightToLeftWithFade2} 200s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Cloud3, position: "fixed", w: "auto", h: "160px", top: "300px", animation: `${moveRightToLeftWithFade2} 130s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Airplane, position: "fixed", w: "auto", h: "40px", top: "85px", animation: `${moveLeftToRightAirplane} 500s cubic-bezier(1, 1, 1, 500) infinite`, zIndex: "1" }), _jsx(Image, { src: TreesCrop, position: "fixed", bottom: "0", right: "2", w: "auto", h: "80px", zIndex: "1" }), _jsx(Image, { src: TreesCrop2, position: "fixed", bottom: "0", left: "2", w: "auto", h: "80px", zIndex: "1" })] }));
 };

package/dist/components/onboarding/pages/ActivateAccount.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { Box, Container, Text, Center, Button } from '@chakra-ui/react';
-import { Logo, WelcomeHeader, ButtonLoader } from '../..';
+import { Logo, WelcomeHeader, ButtonLoader, BasePageWrapper, } from '../..';
 import { useWindowDimensions } from '../../../hooks';
 export const ActivateAccount = ({ name, isLoading = false, handleActivateBt, }) => {
     const { windowDimensions: { width }, } = useWindowDimensions();
-    return (_jsx(Box, { w: "container.full", zIndex: "2", position: "relative", children: _jsxs(Container, { size: "validation", boxShadow: "lg", children: [_jsx(Container, { variant: "secondary", children: _jsx(Logo, {}) }), _jsxs(Box, { px: ['container.sm', 'container.lg'], children: [_jsx(WelcomeHeader, { description: t('registration.instruction'), greeting: t('welcome.greeting'), name: name }), _jsx(Center, { children: _jsx(Button, { onClick: handleActivateBt, isLoading: isLoading, spinner: _jsx(ButtonLoader, {}), size: "onboarding", children: width < 400
+    return (_jsx(BasePageWrapper, { children: _jsxs(Container, { size: "validation", boxShadow: "lg", children: [_jsx(Container, { variant: "secondary", children: _jsx(Logo, {}) }), _jsxs(Box, { px: ['container.sm', 'container.lg'], children: [_jsx(WelcomeHeader, { description: t('registration.instruction'), greeting: t('welcome.greeting'), name: name }), _jsx(Center, { children: _jsx(Button, { onClick: handleActivateBt, isLoading: isLoading, spinner: _jsx(ButtonLoader, {}), size: "onboarding", children: width < 400
                                     ? t('registration.activateBtShort')
                                     : t('registration.activateBt') }) }), _jsx(Text, { variant: "info", mt: "8", children: t('welcome.signature') })] }), _jsx(Container, { variant: "tertiary", mt: "8", children: _jsx(Center, { h: "12", px: "4", children: _jsx(Text, { variant: "label", children: t('registration.notReply') }) }) })] }) }));
 };

package/dist/components/onboarding/pages/BasePageWrapper.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export declare const BasePageWrapper: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/components/onboarding/pages/BasePageWrapper.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@chakra-ui/react';
+export const BasePageWrapper = ({ children }) => {
+    return (_jsx(Box, { w: "container.full", zIndex: "2", position: "relative", mt: "onboarding.top", children: children }));
+};

package/dist/components/onboarding/pages/EmailValidation.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
-import { Box, chakra, Container, Text, Image, Center, Button, } from '@chakra-ui/react';
-import { Logo, ButtonLoader } from '../..';
+import { chakra, Container, Text, Image, Center, Button, } from '@chakra-ui/react';
+import { Logo, ButtonLoader, BasePageWrapper } from '../..';
 import { Confirmation } from '../../../assets/images';
 export const EmailValidation = ({ email, isLoading = false, handleResendBt, }) => {
-    return (_jsx(Box, { w: "container.full", zIndex: "2", position: "relative", children: _jsxs(Container, { size: "validation", boxShadow: "lg", children: [_jsxs(Container, { variant: "secondary", children: [_jsx(Logo, {}), _jsxs(Text, { variant: "title", textAlign: "center", px: ['container.sm', 'container.xl'], pb: 6, minH: "6rem", children: [_jsx(chakra.span, { color: "gray.3", children: t('validation.title1') }), _jsx(chakra.span, { color: "blue.2", children: email }), _jsx(chakra.span, { color: "gray.3", children: t('validation.title2') })] }), _jsx(Center, { children: _jsx(Image, { src: Confirmation, alt: "Activate account", h: ['100px', '145px'], w: "auto" }) })] }), _jsx(Text, { variant: "info", px: ['container.md', 'container.lg'], py: "2rem", textAlign: "center", children: t('validation.alert1') }), _jsx(Center, { children: _jsx(Button, { mb: 10, mx: 4, variant: "secondary", onClick: handleResendBt, isLoading: isLoading, spinner: _jsx(ButtonLoader, { isOutlined: true }), size: "onboarding", children: t('validation.resendBt') }) })] }) }));
+    return (_jsx(BasePageWrapper, { children: _jsxs(Container, { size: "validation", boxShadow: "lg", children: [_jsxs(Container, { variant: "secondary", children: [_jsx(Logo, {}), _jsxs(Text, { variant: "title", textAlign: "center", px: ['container.sm', 'container.xl'], pb: 6, minH: "6rem", children: [_jsx(chakra.span, { color: "gray.3", children: t('validation.title1') }), _jsx(chakra.span, { color: "blue.2", children: email }), _jsx(chakra.span, { color: "gray.3", children: t('validation.title2') })] }), _jsx(Center, { children: _jsx(Image, { src: Confirmation, alt: "Activate account", h: ['100px', '145px'], w: "auto" }) })] }), _jsx(Text, { variant: "info", px: ['container.md', 'container.lg'], py: "2rem", textAlign: "center", children: t('validation.alert1') }), _jsx(Center, { children: _jsx(Button, { mb: 10, mx: 4, variant: "secondary", onClick: handleResendBt, isLoading: isLoading, spinner: _jsx(ButtonLoader, { isOutlined: true }), size: "onboarding", children: t('validation.resendBt') }) })] }) }));
 };

package/dist/components/onboarding/pages/NewPassword.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { Box, Button, Text, Container, Stack, chakra } from '@chakra-ui/react';
-import { Logo, Footer, ButtonLoader, PasswordInput } from '../..';
+import { Logo, Footer, ButtonLoader, PasswordInput, BasePageWrapper, } from '../..';
 import { isValidPassword, passwordMatch } from '../../../utils';
 import { useNewPassword } from '../../../hooks';
 export const NewPassword = ({ isLoading, handleReset, userEmail, }) => {
     const { inputs, handleInputChange, handleSubmit, isValidated } = useNewPassword(handleReset);
-    return (_jsxs(Box, { w: "container.full", zIndex: "2", position: "relative", children: [_jsxs(Container, { size: "onboarding", boxShadow: "lg", children: [_jsx(Logo, {}), _jsx(Container, { variant: "ghost", mt: 4, mb: 6, children: _jsxs(Text, { variant: "title", textAlign: "center", px: [10, 0], noOfLines: [2, 1], children: [_jsx(chakra.span, { color: "gray.3", children: t('welcome.greeting2') }), _jsx(chakra.span, { color: "blue.2", children: userEmail }), _jsx(chakra.span, { color: "gray.3", children: "," })] }) }), _jsx(Box, { px: ['container.sm', 'container.md', 'container.lg'], pb: "container.lg", mb: 6, children: _jsxs(Stack, { spacing: 8, children: [_jsx(Text, { textAlign: "center", variant: "info", children: t('newPassword.title') }), _jsxs(Stack, { spacing: 3, children: [_jsx(PasswordInput, { errorMessage: !isValidPassword(inputs.password)
+    return (_jsxs(BasePageWrapper, { children: [_jsxs(Container, { size: "onboarding", boxShadow: "lg", children: [_jsx(Logo, {}), _jsx(Container, { variant: "ghost", mt: 4, mb: 6, children: _jsxs(Text, { variant: "title", textAlign: "center", px: [10, 0], noOfLines: [2, 1], children: [_jsx(chakra.span, { color: "gray.3", children: t('welcome.greeting2') }), _jsx(chakra.span, { color: "blue.2", children: userEmail }), _jsx(chakra.span, { color: "gray.3", children: "," })] }) }), _jsx(Box, { px: ['container.sm', 'container.md', 'container.lg'], pb: "container.lg", mb: 6, children: _jsxs(Stack, { spacing: 8, children: [_jsx(Text, { textAlign: "center", variant: "info", children: t('newPassword.title') }), _jsxs(Stack, { spacing: 3, children: [_jsx(PasswordInput, { errorMessage: !isValidPassword(inputs.password)
                                                 ? t('forms.errorPasswordLength')
                                                 : t('forms.errorPasswordMatch'), hasError: isValidated &&
                                                 (!isValidPassword(inputs.password) ||

package/dist/components/onboarding/pages/ResendResetPassword.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
-import { Box, chakra, Container, Text, Image, Center, Button, } from '@chakra-ui/react';
-import { ButtonLoader, Logo } from '../..';
+import { chakra, Container, Text, Image, Center, Button, } from '@chakra-ui/react';
+import { BasePageWrapper, ButtonLoader, Logo } from '../..';
 import { ResendPassword } from '../../../assets/images';
 export const ResendResetPassword = ({ email, isLoading = false, handleResendBt, }) => {
-    return (_jsx(Box, { w: "container.full", zIndex: "2", position: "relative", children: _jsxs(Container, { size: "validation", boxShadow: "lg", children: [_jsxs(Container, { variant: "secondary", children: [_jsx(Logo, {}), _jsxs(Text, { variant: "title", textAlign: "center", px: ['container.sm', 'container.xl'], pb: 6, minH: "6rem", children: [_jsx(chakra.span, { color: "gray.3", children: t('validation.title1') }), _jsx(chakra.span, { color: "blue.2", children: email }), _jsx(Text, { variant: "title", children: t('validation.title3') })] }), _jsx(Center, { children: _jsx(Image, { src: ResendPassword, alt: "Activate account", h: ['100px', '145px'], w: "auto" }) })] }), _jsx(Text, { variant: "info", px: ['container.md', 'container.lg'], py: "2rem", textAlign: "center", children: t('validation.alert1') }), _jsx(Center, { children: _jsx(Button, { mb: 10, mx: 4, variant: "secondary", onClick: handleResendBt, isLoading: isLoading, spinner: _jsx(ButtonLoader, { isOutlined: true }), size: "onboarding", children: t('validation.resendResetBt') }) })] }) }));
+    return (_jsx(BasePageWrapper, { children: _jsxs(Container, { size: "validation", boxShadow: "lg", children: [_jsxs(Container, { variant: "secondary", children: [_jsx(Logo, {}), _jsxs(Text, { variant: "title", textAlign: "center", px: ['container.sm', 'container.xl'], pb: 6, minH: "6rem", children: [_jsx(chakra.span, { color: "gray.3", children: t('validation.title1') }), _jsx(chakra.span, { color: "blue.2", children: email }), _jsx(Text, { variant: "title", children: t('validation.title3') })] }), _jsx(Center, { children: _jsx(Image, { src: ResendPassword, alt: "Activate account", h: ['100px', '145px'], w: "auto" }) })] }), _jsx(Text, { variant: "info", px: ['container.md', 'container.lg'], py: "2rem", textAlign: "center", children: t('validation.alert1') }), _jsx(Center, { children: _jsx(Button, { mb: 10, mx: 4, variant: "secondary", onClick: handleResendBt, isLoading: isLoading, spinner: _jsx(ButtonLoader, { isOutlined: true }), size: "onboarding", children: t('validation.resendResetBt') }) })] }) }));
 };

package/dist/components/onboarding/pages/ResetPassword.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { Box, Button, Text, Container, Stack } from '@chakra-ui/react';
-import { Logo, Footer, PageTitle, CardFooter, TextInput, ButtonLoader, } from '../..';
+import { Logo, Footer, PageTitle, CardFooter, TextInput, ButtonLoader, BasePageWrapper, } from '../..';
 import { isEmptyField, isValidEmail } from '../../../utils';
 import { useResetPassword } from '../../../hooks';
 export const ResetPassword = ({ isLoading, handleReset, handleSignIn, resetError, }) => {
@@ -9,7 +9,7 @@ export const ResetPassword = ({ isLoading, handleReset, handleSignIn, resetError
     const resetErrorType = resetError
         ? t('forms.errorEmailNotActivated')
         : t('forms.errorEmail');
-    return (_jsxs(Box, { w: "container.full", zIndex: "2", position: "relative", children: [_jsxs(Container, { size: "onboarding", boxShadow: "lg", children: [_jsx(Logo, {}), _jsx(PageTitle, { title: t('reset.title') }), _jsx(Box, { px: ['container.sm', 'container.md', 'container.lg'], mb: 6, children: _jsxs(Stack, { spacing: 8, children: [_jsx(Text, { textAlign: "center", variant: "info", children: t('reset.instruction') }), _jsx(Stack, { spacing: 3, children: _jsx(TextInput, { autoCapitalize: "none", autoCorrect: "off", errorMessage: isEmptyField(inputs.email)
+    return (_jsxs(BasePageWrapper, { children: [_jsxs(Container, { size: "onboarding", boxShadow: "lg", children: [_jsx(Logo, {}), _jsx(PageTitle, { title: t('reset.title') }), _jsx(Box, { px: ['container.sm', 'container.md', 'container.lg'], mb: 6, children: _jsxs(Stack, { spacing: 8, children: [_jsx(Text, { textAlign: "center", variant: "info", children: t('reset.instruction') }), _jsx(Stack, { spacing: 3, children: _jsx(TextInput, { autoCapitalize: "none", autoCorrect: "off", errorMessage: isEmptyField(inputs.email)
                                             ? t('forms.email') + ' ' + t('forms.required')
                                             : resetErrorType, hasError: isValidated &&
                                             (resetError ||

package/dist/components/onboarding/pages/SignIn.js

@@ -10,12 +10,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { Box, Button, Center, Container, Stack } from '@chakra-ui/react';
-import { Logo, Footer, PageTitle, CardFooter, PasswordInput, TextInput, ButtonLoader, } from '../..';
+import { Logo, Footer, PageTitle, CardFooter, PasswordInput, TextInput, ButtonLoader, BasePageWrapper, } from '../..';
 import { isEmptyField } from '../../../utils';
 import { useSignIn } from '../../../hooks';
 export const SignIn = ({ isLoading, handleForgotPassword, handleSignIn, handleSignUp, loginError, values = { email: '', password: '' }, }) => {
     const { inputs, handleInputChange, isValidated, setIsValidated } = useSignIn(values);
-    return (_jsxs(Box, { w: "container.full", mt: "onboarding.top", zIndex: "2", position: "relative", children: [_jsxs(Container, { size: "onboarding", boxShadow: "lg", children: [_jsx(Logo, {}), _jsx(PageTitle, { title: t('signin.title') }), _jsx(Box, { px: ['container.sm', 'container.md', 'container.lg'], mb: 6, children: _jsxs(Stack, { spacing: 8, children: [_jsxs(Stack, { spacing: "base", as: "form", children: [_jsx(TextInput, { autoCapitalize: "none", autoCorrect: "off", autoComplete: "username", errorMessage: loginError
+    return (_jsxs(BasePageWrapper, { children: [_jsxs(Container, { size: "onboarding", boxShadow: "lg", children: [_jsx(Logo, {}), _jsx(PageTitle, { title: t('signin.title') }), _jsx(Box, { px: ['container.sm', 'container.md', 'container.lg'], mb: 6, children: _jsxs(Stack, { spacing: 8, children: [_jsxs(Stack, { spacing: "base", as: "form", children: [_jsx(TextInput, { autoCapitalize: "none", autoCorrect: "off", autoComplete: "username", errorMessage: loginError
                                                 ? t('forms.errorLogin')
                                                 : t('forms.email') + ' ' + t('forms.required'), hasError: isValidated && (loginError || isEmptyField(inputs.email)), id: "email", placeholder: t('forms.email'), value: values.email || inputs.email, handleChange: (event) => {
                                                 values.email = event.target.value;

package/dist/components/onboarding/pages/SignUp.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { Box, Button, Center, Container, Stack, Text } from '@chakra-ui/react';
-import { Logo, Footer, CardFooter, PageTitle, PasswordInput, TextInput, ButtonLoader, } from '../..';
+import { Logo, Footer, CardFooter, PageTitle, PasswordInput, TextInput, ButtonLoader, BasePageWrapper, } from '../..';
 import { isEmptyField, isValidEmail, isValidPassword, passwordMatch, } from '../../../utils';
 import { useSignUp } from '../../../hooks';
 export const SignUp = ({ isLoading, handleCreateAccount, handleSignIn, showPromoCode, signupError, values = {
@@ -17,10 +17,10 @@ export const SignUp = ({ isLoading, handleCreateAccount, handleSignIn, showPromo
         handleCreateAccount,
         values,
     });
-    return (_jsxs(Box, { w: "container.full", mt: "onboarding.top", zIndex: "2", position: "relative", children: [_jsxs(Container, { size: "onboarding", boxShadow: "lg", children: [_jsx(Logo, {}), _jsx(PageTitle, { title: t('signup.title') }), _jsx(Box, { px: ['container.sm', 'container.md', 'container.lg'], mb: 6, children: _jsxs(Stack, { spacing: "base", as: "form", children: [_jsx(TextInput, { errorMessage: t('forms.firstName') + ' ' + t('forms.required'), hasError: isValidated && isEmptyField(inputs.firstName), id: "firstName", placeholder: t('forms.firstName'), value: inputs.firstName, handleChange: handleInputChange, autoComplete: 'given-name' }), _jsx(TextInput, { errorMessage: t('forms.lastName') + ' ' + t('forms.required'), hasError: isValidated && isEmptyField(inputs.lastName), id: "lastName", placeholder: t('forms.lastName'), value: inputs.lastName, handleChange: handleInputChange, autoComplete: 'family-name' }), _jsx(TextInput, { autoCapitalize: "none", autoCorrect: "off", errorMessage: t('forms.email') + ' ' + t('forms.required'), hasError: isValidated &&
-                                        (isEmptyField(inputs.email) || !isValidEmail(inputs.email)), id: "email", placeholder: t('forms.email'), value: inputs.email, handleChange: handleInputChange, autoComplete: 'email' }), showPromoCode && (_jsx(TextInput, { autoCapitalize: "none", autoCorrect: "off", id: "promoCode", placeholder: t('forms.promoCode'), value: (_a = inputs.promoCode) !== null && _a !== void 0 ? _a : '', handleChange: handleInputChange, autoComplete: 'off' })), _jsx(Text, { textAlign: "center", variant: "caption", children: t('signup.subtitle') }), _jsx(PasswordInput, { errorMessage: passwordErrorMessage(values.password), hasError: isValidated &&
+    return (_jsxs(BasePageWrapper, { children: [_jsxs(Container, { size: "onboarding", boxShadow: "lg", children: [_jsx(Logo, {}), _jsx(PageTitle, { title: t('signup.title') }), _jsx(Box, { px: ['container.sm', 'container.md', 'container.lg'], mb: 6, children: _jsxs(Stack, { spacing: "base", as: "form", children: [_jsx(TextInput, { errorMessage: t('forms.firstName') + ' ' + t('forms.required'), hasError: isValidated && isEmptyField(inputs.firstName), id: "firstName", placeholder: t('forms.firstName'), value: inputs.firstName, handleChange: handleInputChange, autoComplete: "given-name" }), _jsx(TextInput, { errorMessage: t('forms.lastName') + ' ' + t('forms.required'), hasError: isValidated && isEmptyField(inputs.lastName), id: "lastName", placeholder: t('forms.lastName'), value: inputs.lastName, handleChange: handleInputChange, autoComplete: "family-name" }), _jsx(TextInput, { autoCapitalize: "none", autoCorrect: "off", errorMessage: t('forms.email') + ' ' + t('forms.required'), hasError: isValidated &&
+                                        (isEmptyField(inputs.email) || !isValidEmail(inputs.email)), id: "email", placeholder: t('forms.email'), value: inputs.email, handleChange: handleInputChange, autoComplete: "email" }), showPromoCode && (_jsx(TextInput, { autoCapitalize: "none", autoCorrect: "off", id: "promoCode", placeholder: t('forms.promoCode'), value: (_a = inputs.promoCode) !== null && _a !== void 0 ? _a : '', handleChange: handleInputChange, autoComplete: "off" })), _jsx(Text, { textAlign: "center", variant: "caption", children: t('signup.subtitle') }), _jsx(PasswordInput, { errorMessage: passwordErrorMessage(values.password), hasError: isValidated &&
                                         (!isValidPassword(inputs.password) ||
-                                            !passwordMatch(inputs.password, inputs.confirmPassword)), id: "password", placeholder: t('forms.password'), value: (_b = inputs.password) !== null && _b !== void 0 ? _b : '', handleChange: (event) => handleInputChange(event), autoComplete: 'new-password' }), _jsx(PasswordInput, { errorMessage: passwordErrorMessage(inputs.confirmPassword), hasError: isValidated &&
+                                            !passwordMatch(inputs.password, inputs.confirmPassword)), id: "password", placeholder: t('forms.password'), value: (_b = inputs.password) !== null && _b !== void 0 ? _b : '', handleChange: (event) => handleInputChange(event), autoComplete: "new-password" }), _jsx(PasswordInput, { errorMessage: passwordErrorMessage(inputs.confirmPassword), hasError: isValidated &&
                                         (!isValidPassword(inputs.confirmPassword) ||
-                                            !passwordMatch(inputs.password, inputs.confirmPassword)), id: "confirmPassword", placeholder: t('forms.passwordConfirm'), value: (_c = inputs.confirmPassword) !== null && _c !== void 0 ? _c : '', handleChange: (event) => handleInputChange(event), autoComplete: 'new-password' }), _jsx(Center, { px: ['container.sm', 'container.md', 'container.lg'], h: "4rem", children: _jsxs(Text, { textAlign: "center", variant: "info", w: "100%", children: [t('signup.terms'), _jsx("a", { target: "_blank", href: t('footer.termsUrl'), children: t('footer.termsLink') })] }) }), _jsx(Button, { isLoading: isLoading, spinner: _jsx(ButtonLoader, {}), onClick: handleSubmit, children: t('signup.signupBt') })] }) }), _jsx(CardFooter, { title: t('signup.signin'), buttonLabel: t('signup.signinBt'), handleButtonClick: handleSignIn })] }), _jsx(Footer, {})] }));
+                                            !passwordMatch(inputs.password, inputs.confirmPassword)), id: "confirmPassword", placeholder: t('forms.passwordConfirm'), value: (_c = inputs.confirmPassword) !== null && _c !== void 0 ? _c : '', handleChange: (event) => handleInputChange(event), autoComplete: "new-password" }), _jsx(Center, { px: ['container.sm', 'container.md', 'container.lg'], h: "4rem", children: _jsxs(Text, { textAlign: "center", variant: "info", w: "100%", children: [t('signup.terms'), _jsx("a", { target: "_blank", href: t('footer.termsUrl'), children: t('footer.termsLink') })] }) }), _jsx(Button, { isLoading: isLoading, spinner: _jsx(ButtonLoader, {}), onClick: handleSubmit, children: t('signup.signupBt') })] }) }), _jsx(CardFooter, { title: t('signup.signin'), buttonLabel: t('signup.signinBt'), handleButtonClick: handleSignIn })] }), _jsx(Footer, {})] }));
 };

package/dist/components/onboarding/pages/TwoFactor.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { Box, Button, Text, Container, Stack, Center } from '@chakra-ui/react';
-import { Logo, Footer, ButtonLoader, TextInput } from '../..';
+import { Logo, Footer, ButtonLoader, TextInput, BasePageWrapper, } from '../..';
 import { isEmptyField } from '../../../utils';
 import { useTwoFactor } from '../../../hooks';
 export const TwoFactor = ({ handleReset, handleResend, isLoading, twoFactorMethod, }) => {
     const { code, handleInputChange, handleSubmit, isValidated } = useTwoFactor(handleReset);
-    return (_jsxs(Box, { w: "container.full", zIndex: "2", position: "relative", children: [_jsxs(Container, { size: "onboarding", boxShadow: "lg", children: [_jsx(Logo, {}), _jsxs(Stack, { my: "6", children: [_jsx(Text, { variant: "title", textAlign: "center", px: "10", children: t('reset.2FA.title') }), _jsxs(Text, { fontFamily: "secondary", textAlign: "center", px: ['10', '20'], children: [twoFactorMethod === 'email' && t('reset.2FA.subtitleEmail'), twoFactorMethod === 'sms' && t('reset.2FA.subtitleSms')] })] }), _jsx(Box, { px: ['container.sm', 'container.md', 'container.lg'], pb: "container.md", mb: "6", children: _jsxs(Stack, { spacing: "4", children: [_jsx(TextInput, { errorMessage: t('forms.code') + ' ' + t('forms.required'), hasError: isValidated && isEmptyField(code), id: "code", placeholder: t('reset.2FA.placeholder'), value: code, handleChange: handleInputChange }), _jsx(Button, { isLoading: isLoading, spinner: _jsx(ButtonLoader, {}), onClick: handleSubmit, children: t('forms.submit') }), _jsx(Center, { children: _jsx(Button, { onClick: handleResend, variant: "text", children: t('reset.2FA.resend') }) })] }) })] }), _jsx(Footer, {})] }));
+    return (_jsxs(BasePageWrapper, { children: [_jsxs(Container, { size: "onboarding", boxShadow: "lg", children: [_jsx(Logo, {}), _jsxs(Stack, { my: "6", children: [_jsx(Text, { variant: "title", textAlign: "center", px: "10", children: t('reset.2FA.title') }), _jsxs(Text, { fontFamily: "secondary", textAlign: "center", px: ['10', '20'], children: [twoFactorMethod === 'email' && t('reset.2FA.subtitleEmail'), twoFactorMethod === 'sms' && t('reset.2FA.subtitleSms')] })] }), _jsx(Box, { px: ['container.sm', 'container.md', 'container.lg'], pb: "container.md", mb: "6", children: _jsxs(Stack, { spacing: "4", children: [_jsx(TextInput, { errorMessage: t('forms.code') + ' ' + t('forms.required'), hasError: isValidated && isEmptyField(code), id: "code", placeholder: t('reset.2FA.placeholder'), value: code, handleChange: handleInputChange }), _jsx(Button, { isLoading: isLoading, spinner: _jsx(ButtonLoader, {}), onClick: handleSubmit, children: t('forms.submit') }), _jsx(Center, { children: _jsx(Button, { onClick: handleResend, variant: "text", children: t('reset.2FA.resend') }) })] }) })] }), _jsx(Footer, {})] }));
 };

package/dist/components/onboarding/pages/index.d.ts

@@ -1,9 +1,10 @@
-export * from "./ActivateAccount";
-export * from "./EmailValidation";
-export * from "./ResetPassword";
-export * from "./SignIn";
-export * from "./SignUp";
-export * from "./Welcome";
-export * from "./NewPassword";
-export * from "./ResendResetPassword";
-export * from "./TwoFactor";
+export * from './ActivateAccount';
+export * from './BasePageWrapper';
+export * from './EmailValidation';
+export * from './ResetPassword';
+export * from './SignIn';
+export * from './SignUp';
+export * from './Welcome';
+export * from './NewPassword';
+export * from './ResendResetPassword';
+export * from './TwoFactor';

package/dist/components/onboarding/pages/index.js

@@ -1,9 +1,10 @@
-export * from "./ActivateAccount";
-export * from "./EmailValidation";
-export * from "./ResetPassword";
-export * from "./SignIn";
-export * from "./SignUp";
-export * from "./Welcome";
-export * from "./NewPassword";
-export * from "./ResendResetPassword";
-export * from "./TwoFactor";
+export * from './ActivateAccount';
+export * from './BasePageWrapper';
+export * from './EmailValidation';
+export * from './ResetPassword';
+export * from './SignIn';
+export * from './SignUp';
+export * from './Welcome';
+export * from './NewPassword';
+export * from './ResendResetPassword';
+export * from './TwoFactor';

package/dist/stories/onboarding/pages/NewPassword.stories.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@chakra-ui/react';
-import { NewPassword } from '../../../components';
+import { NewPassword, CloudsAnimation } from '../../../components';
 export default {
     title: 'Pages/Onboarding',
     component: NewPassword,
 };
 export const NewPasswordPage = (args) => {
-    return (_jsx(Box, { p: "base", children: _jsx(NewPassword, Object.assign({}, args)) }));
+    return (_jsx(CloudsAnimation, { children: _jsx(NewPassword, Object.assign({}, args)) }));
 };
 NewPasswordPage.args = {
     isLoading: true,

package/dist/stories/onboarding/pages/ResendResetPassword.stories.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@chakra-ui/react';
-import { ResendResetPassword } from '../../../components';
+import { ResendResetPassword, CloudsAnimation } from '../../../components';
 export default {
     title: 'Pages/Onboarding',
     component: ResendResetPassword,
 };
 export const ResendResetPasswordPage = (args) => {
-    return (_jsx(Box, { p: "base", children: _jsx(ResendResetPassword, Object.assign({}, args)) }));
+    return (_jsx(CloudsAnimation, { children: _jsx(ResendResetPassword, Object.assign({}, args)) }));
 };
 ResendResetPasswordPage.args = {
     email: 'user@user.com.br',

package/dist/stories/onboarding/pages/ResetPassword.stories.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@chakra-ui/react';
-import { ResetPassword } from '../../../components';
+import { ResetPassword, CloudsAnimation } from '../../../components';
 export default {
     title: 'Pages/Onboarding',
     component: ResetPassword,
 };
 export const ResetPasswordPage = (args) => {
-    return (_jsx(Box, { p: "base", children: _jsx(ResetPassword, Object.assign({}, args)) }));
+    return (_jsx(CloudsAnimation, { children: _jsx(ResetPassword, Object.assign({}, args)) }));
 };
 ResetPasswordPage.args = {
     isLoading: false,

package/dist/stories/onboarding/pages/SignIn.stories.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@chakra-ui/react';
-import { SignIn } from '../../../components';
+import { SignIn, CloudsAnimation } from '../../../components';
 export default {
     title: 'Pages/Onboarding',
     component: SignIn,
     decorators: [
-        (Story) => (_jsx(Box, { p: "base", children: _jsx(Story, {}) })),
+        (Story) => (_jsx(CloudsAnimation, { children: _jsx(Story, {}) })),
     ],
 };
 export const SignInPage = (args) => {

package/dist/stories/onboarding/pages/SignUp.stories.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@chakra-ui/react';
-import { SignUp } from '../../../components';
+import { CloudsAnimation, SignUp } from '../../../components';
 export default {
     title: 'Pages/Onboarding',
     component: SignUp,
 };
 export const SignUpPage = (args) => {
-    return (_jsx(Box, { p: "base", children: _jsx(SignUp, Object.assign({}, args)) }));
+    return (_jsx(CloudsAnimation, { children: _jsx(SignUp, Object.assign({}, args)) }));
 };
 const valuesFilled = {
     email: 'user@user.com',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",

package/src/components/animations/CloudsAnimation.tsx

@@ -84,16 +84,17 @@ export const CloudsAnimation = ({ children }: PropsWithChildren<{}>) => {
   if (isMobile) return <Fragment>children</Fragment>
   return (
     <Box
-      h="100vh"
+      minH="100vh"
       w="full"
       position="relative"
       bgGradient={colors.skyGradient}
-      overflow="hidden"
+      overflowX="hidden"
+      overflowY="scroll"
     >
       {children}
       <Image
         src={Cloud1}
-        position="absolute"
+        position="fixed"
         w="auto"
         h="80px"
         top="50px"
@@ -102,7 +103,7 @@ export const CloudsAnimation = ({ children }: PropsWithChildren<{}>) => {
       />
       <Image
         src={Cloud2}
-        position="absolute"
+        position="fixed"
         w="auto"
         h="120px"
         top="80px"
@@ -111,7 +112,7 @@ export const CloudsAnimation = ({ children }: PropsWithChildren<{}>) => {
       />
       <Image
         src={Cloud3}
-        position="absolute"
+        position="fixed"
         w="auto"
         h="160px"
         top="120px"
@@ -120,7 +121,7 @@ export const CloudsAnimation = ({ children }: PropsWithChildren<{}>) => {
       />
       <Image
         src={Cloud1}
-        position="absolute"
+        position="fixed"
         w="auto"
         h="100px"
         top="160px"
@@ -129,7 +130,7 @@ export const CloudsAnimation = ({ children }: PropsWithChildren<{}>) => {
       />
       <Image
         src={Cloud2}
-        position="absolute"
+        position="fixed"
         w="auto"
         h="112px"
         top="220px"
@@ -138,7 +139,7 @@ export const CloudsAnimation = ({ children }: PropsWithChildren<{}>) => {
       />
       <Image
         src={Cloud3}
-        position="absolute"
+        position="fixed"
         w="auto"
         h="160px"
         top="300px"
@@ -147,7 +148,7 @@ export const CloudsAnimation = ({ children }: PropsWithChildren<{}>) => {
       />
       <Image
         src={Airplane}
-        position="absolute"
+        position="fixed"
         w="auto"
         h="40px"
         top="85px"

package/src/components/onboarding/pages/ActivateAccount.tsx

@@ -1,6 +1,11 @@
 import { t } from 'i18next'
 import { Box, Container, Text, Center, Button } from '@chakra-ui/react'
-import { Logo, WelcomeHeader, ButtonLoader } from '@/components'
+import {
+  Logo,
+  WelcomeHeader,
+  ButtonLoader,
+  BasePageWrapper,
+} from '@/components'
 import { ActivateAccountI } from '@/interfaces'
 import { useWindowDimensions } from '@/hooks'
 
@@ -14,7 +19,7 @@ export const ActivateAccount = ({
   } = useWindowDimensions()
 
   return (
-    <Box w="container.full" zIndex="2" position="relative">
+    <BasePageWrapper>
       <Container size="validation" boxShadow="lg">
         <Container variant="secondary">
           <Logo />
@@ -47,6 +52,6 @@ export const ActivateAccount = ({
           </Center>
         </Container>
       </Container>
-    </Box>
+    </BasePageWrapper>
   )
 }

package/src/components/onboarding/pages/BasePageWrapper.tsx

@@ -0,0 +1,10 @@
+import { Box } from '@chakra-ui/react'
+import { PropsWithChildren } from 'react'
+
+export const BasePageWrapper = ({ children }: PropsWithChildren) => {
+  return (
+    <Box w="container.full" zIndex="2" position="relative" mt="onboarding.top">
+      {children}
+    </Box>
+  )
+}

package/src/components/onboarding/pages/EmailValidation.tsx

@@ -8,7 +8,7 @@ import {
   Center,
   Button,
 } from '@chakra-ui/react'
-import { Logo, ButtonLoader } from '@/components'
+import { Logo, ButtonLoader, BasePageWrapper } from '@/components'
 import { EmailValidationI } from '@/interfaces'
 import { Confirmation } from '@/assets/images'
 
@@ -18,7 +18,7 @@ export const EmailValidation = ({
   handleResendBt,
 }: EmailValidationI) => {
   return (
-    <Box w="container.full" zIndex="2" position="relative">
+    <BasePageWrapper>
       <Container size="validation" boxShadow="lg">
         <Container variant="secondary">
           <Logo />
@@ -64,6 +64,6 @@ export const EmailValidation = ({
           </Button>
         </Center>
       </Container>
-    </Box>
+    </BasePageWrapper>
   )
 }

package/src/components/onboarding/pages/NewPassword.tsx

@@ -1,6 +1,12 @@
 import { t } from 'i18next'
 import { Box, Button, Text, Container, Stack, chakra } from '@chakra-ui/react'
-import { Logo, Footer, ButtonLoader, PasswordInput } from '@/components'
+import {
+  Logo,
+  Footer,
+  ButtonLoader,
+  PasswordInput,
+  BasePageWrapper,
+} from '@/components'
 import { isValidPassword, passwordMatch } from '@/utils'
 import { useNewPassword } from '@/hooks'
 import { NewPasswordI } from '@/interfaces'
@@ -13,7 +19,7 @@ export const NewPassword = ({
   const { inputs, handleInputChange, handleSubmit, isValidated } =
     useNewPassword(handleReset)
   return (
-    <Box w="container.full" zIndex="2" position="relative">
+    <BasePageWrapper>
       <Container size="onboarding" boxShadow="lg">
         <Logo />
         <Container variant="ghost" mt={4} mb={6}>
@@ -82,6 +88,6 @@ export const NewPassword = ({
         </Box>
       </Container>
       <Footer />
-    </Box>
+    </BasePageWrapper>
   )
 }

package/src/components/onboarding/pages/ResendResetPassword.tsx

@@ -8,7 +8,7 @@ import {
   Center,
   Button,
 } from '@chakra-ui/react'
-import { ButtonLoader, Logo } from '@/components'
+import { BasePageWrapper, ButtonLoader, Logo } from '@/components'
 import { EmailValidationI } from '@/interfaces'
 import { ResendPassword } from '@/assets/images'
 
@@ -18,7 +18,7 @@ export const ResendResetPassword = ({
   handleResendBt,
 }: EmailValidationI) => {
   return (
-    <Box w="container.full" zIndex="2" position="relative">
+    <BasePageWrapper>
       <Container size="validation" boxShadow="lg">
         <Container variant="secondary">
           <Logo />
@@ -65,6 +65,6 @@ export const ResendResetPassword = ({
           </Button>
         </Center>
       </Container>
-    </Box>
+    </BasePageWrapper>
   )
 }

package/src/components/onboarding/pages/ResetPassword.tsx

@@ -7,6 +7,7 @@ import {
   CardFooter,
   TextInput,
   ButtonLoader,
+  BasePageWrapper,
 } from '@/components'
 import { isEmptyField, isValidEmail } from '@/utils'
 import { ResetPasswordI } from '@/interfaces'
@@ -25,7 +26,7 @@ export const ResetPassword = ({
     ? t('forms.errorEmailNotActivated')
     : t('forms.errorEmail')
   return (
-    <Box w="container.full" zIndex="2" position="relative">
+    <BasePageWrapper>
       <Container size="onboarding" boxShadow="lg">
         <Logo />
         <PageTitle title={t('reset.title')} />
@@ -72,6 +73,6 @@ export const ResetPassword = ({
         />
       </Container>
       <Footer />
-    </Box>
+    </BasePageWrapper>
   )
 }

package/src/components/onboarding/pages/SignIn.tsx

@@ -8,6 +8,7 @@ import {
   PasswordInput,
   TextInput,
   ButtonLoader,
+  BasePageWrapper,
 } from '@/components'
 import { isEmptyField } from '@/utils'
 import { SignInI } from '@/interfaces'
@@ -25,14 +26,13 @@ export const SignIn = ({
     useSignIn(values)
 
   return (
-    <Box w="container.full" mt="onboarding.top" zIndex="2" position="relative">
+    <BasePageWrapper>
       <Container size="onboarding" boxShadow="lg">
         <Logo />
         <PageTitle title={t('signin.title')} />
         <Box px={['container.sm', 'container.md', 'container.lg']} mb={6}>
           <Stack spacing={8}>
             <Stack spacing="base" as="form">
- 
               <TextInput
                 autoCapitalize="none"
                 autoCorrect="off"
@@ -71,7 +71,6 @@ export const SignIn = ({
                   handleInputChange(event)
                 }}
               />
-      
             </Stack>
             <Stack spacing={4}>
               <Button
@@ -104,6 +103,6 @@ export const SignIn = ({
         />
       </Container>
       <Footer />
-    </Box>
+    </BasePageWrapper>
   )
 }

package/src/components/onboarding/pages/SignUp.tsx

@@ -8,6 +8,7 @@ import {
   PasswordInput,
   TextInput,
   ButtonLoader,
+  BasePageWrapper,
 } from '@/components'
 import { SignUpI } from '@/interfaces'
 import {
@@ -45,7 +46,7 @@ export const SignUp = ({
   })
 
   return (
-    <Box w="container.full" mt="onboarding.top" zIndex="2" position="relative">
+    <BasePageWrapper>
       <Container size="onboarding" boxShadow="lg">
         <Logo />
         <PageTitle title={t('signup.title')} />
@@ -58,7 +59,7 @@ export const SignUp = ({
               placeholder={t('forms.firstName')}
               value={inputs.firstName}
               handleChange={handleInputChange}
-              autoComplete='given-name'
+              autoComplete="given-name"
             />
             <TextInput
               errorMessage={t('forms.lastName') + ' ' + t('forms.required')}
@@ -67,7 +68,7 @@ export const SignUp = ({
               placeholder={t('forms.lastName')}
               value={inputs.lastName}
               handleChange={handleInputChange}
-              autoComplete='family-name'
+              autoComplete="family-name"
             />
             <TextInput
               autoCapitalize="none"
@@ -81,7 +82,7 @@ export const SignUp = ({
               placeholder={t('forms.email')}
               value={inputs.email}
               handleChange={handleInputChange}
-              autoComplete='email'
+              autoComplete="email"
             />
             {showPromoCode && (
               <TextInput
@@ -91,7 +92,7 @@ export const SignUp = ({
                 placeholder={t('forms.promoCode')}
                 value={inputs.promoCode ?? ''}
                 handleChange={handleInputChange}
-                autoComplete='off'
+                autoComplete="off"
               />
             )}
             <Text textAlign="center" variant="caption">
@@ -108,7 +109,7 @@ export const SignUp = ({
               placeholder={t('forms.password')}
               value={inputs.password ?? ''}
               handleChange={(event) => handleInputChange(event)}
-              autoComplete='new-password' 
+              autoComplete="new-password"
             />
             <PasswordInput
               errorMessage={passwordErrorMessage(inputs.confirmPassword)}
@@ -121,7 +122,7 @@ export const SignUp = ({
               placeholder={t('forms.passwordConfirm')}
               value={inputs.confirmPassword ?? ''}
               handleChange={(event) => handleInputChange(event)}
-              autoComplete='new-password'
+              autoComplete="new-password"
             />
             <Center
               px={['container.sm', 'container.md', 'container.lg']}
@@ -150,6 +151,6 @@ export const SignUp = ({
         />
       </Container>
       <Footer />
-    </Box>
+    </BasePageWrapper>
   )
 }

package/src/components/onboarding/pages/TwoFactor.tsx

@@ -1,6 +1,12 @@
 import { t } from 'i18next'
 import { Box, Button, Text, Container, Stack, Center } from '@chakra-ui/react'
-import { Logo, Footer, ButtonLoader, TextInput } from '@/components'
+import {
+  Logo,
+  Footer,
+  ButtonLoader,
+  TextInput,
+  BasePageWrapper,
+} from '@/components'
 import { isEmptyField } from '@/utils'
 import { TwoFactorI } from '@/interfaces'
 import { useTwoFactor } from '@/hooks'
@@ -15,7 +21,7 @@ export const TwoFactor = ({
     useTwoFactor(handleReset)
 
   return (
-    <Box w="container.full" zIndex="2" position="relative">
+    <BasePageWrapper>
       <Container size="onboarding" boxShadow="lg">
         <Logo />
         <Stack my="6">
@@ -58,6 +64,6 @@ export const TwoFactor = ({
         </Box>
       </Container>
       <Footer />
-    </Box>
+    </BasePageWrapper>
   )
 }

package/src/components/onboarding/pages/index.ts

@@ -1,9 +1,10 @@
-export * from "./ActivateAccount"
-export * from "./EmailValidation"
-export * from "./ResetPassword"
-export * from "./SignIn"
-export * from "./SignUp"
-export * from "./Welcome"
-export * from "./NewPassword"
-export * from "./ResendResetPassword"
-export * from "./TwoFactor"
+export * from './ActivateAccount'
+export * from './BasePageWrapper'
+export * from './EmailValidation'
+export * from './ResetPassword'
+export * from './SignIn'
+export * from './SignUp'
+export * from './Welcome'
+export * from './NewPassword'
+export * from './ResendResetPassword'
+export * from './TwoFactor'

package/src/stories/onboarding/pages/NewPassword.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta } from '@storybook/react'
-import { Box } from '@chakra-ui/react'
-import { NewPassword } from '@/components'
+import { NewPassword, CloudsAnimation } from '@/components'
 import { NewPasswordI } from '@/interfaces'
 
 export default {
@@ -10,9 +9,9 @@ export default {
 
 export const NewPasswordPage = (args: NewPasswordI) => {
   return (
-    <Box p="base">
+    <CloudsAnimation>
       <NewPassword {...args} />
-    </Box>
+    </CloudsAnimation>
   )
 }
 

package/src/stories/onboarding/pages/ResendResetPassword.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta } from '@storybook/react'
-import { Box } from '@chakra-ui/react'
-import { ResendResetPassword } from '@/components'
+import { ResendResetPassword, CloudsAnimation } from '@/components'
 import { EmailValidationI } from '@/interfaces'
 
 export default {
@@ -10,9 +9,9 @@ export default {
 
 export const ResendResetPasswordPage = (args: EmailValidationI) => {
   return (
-    <Box p="base">
+    <CloudsAnimation>
       <ResendResetPassword {...args} />
-    </Box>
+    </CloudsAnimation>
   )
 }
 

package/src/stories/onboarding/pages/ResetPassword.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta } from '@storybook/react'
-import { Box } from '@chakra-ui/react'
-import { ResetPassword } from '@/components'
+import { ResetPassword, CloudsAnimation } from '@/components'
 import { ResetPasswordI } from '@/interfaces'
 
 export default {
@@ -10,9 +9,9 @@ export default {
 
 export const ResetPasswordPage = (args: ResetPasswordI) => {
   return (
-    <Box p="base">
+    <CloudsAnimation>
       <ResetPassword {...args} />
-    </Box>
+    </CloudsAnimation>
   )
 }
 

package/src/stories/onboarding/pages/SignIn.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta } from '@storybook/react'
-import { Box } from '@chakra-ui/react'
-import { SignIn } from '@/components'
+import { SignIn, CloudsAnimation } from '@/components'
 import { SignInI } from '@/interfaces'
 
 export default {
@@ -8,9 +7,9 @@ export default {
   component: SignIn,
   decorators: [
     (Story) => (
-      <Box p="base">
+      <CloudsAnimation>
         <Story />
-      </Box>
+      </CloudsAnimation>
     ),
   ],
 } as Meta

package/src/stories/onboarding/pages/SignUp.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta } from '@storybook/react'
-import { Box } from '@chakra-ui/react'
-import { SignUp } from '@/components'
+import { CloudsAnimation, SignUp } from '@/components'
 import { SignUpI } from '@/interfaces'
 
 export default {
@@ -10,9 +9,9 @@ export default {
 
 export const SignUpPage = (args: SignUpI) => {
   return (
-    <Box p="base">
+    <CloudsAnimation>
       <SignUp {...args} />
-    </Box>
+    </CloudsAnimation>
   )
 }