+
+//
+
+// )
diff --git a/packages/react/src/Templates/Login/Login.style.ts b/packages/react/src/Templates/Login/Login.style.ts
new file mode 100644
index 000000000..128b2e304
--- /dev/null
+++ b/packages/react/src/Templates/Login/Login.style.ts
@@ -0,0 +1,118 @@
+/* eslint-disable max-len */
+import { createUseStyles } from 'react-jss'
+import { Theme } from '@naturacosmeticos/natds-themes'
+
+const styles = createUseStyles((theme: Theme) => ({
+
+ container: {
+ display: 'flex',
+ position: 'relative',
+ fontFamily: [theme.tag.label.primary.fontFamily, theme.tag.label.fallback.fontFamily],
+ alignItems: 'center',
+ justifyContent: 'center',
+ flexDirection: 'column',
+ border: ' 1px solid #0000001F',
+ gap: theme.size.micro,
+ boxSizing: '-moz-initial',
+ minWidth: 360,
+ width: '100%',
+ fontWeight: theme.typography.fontWeight.medium,
+ fontSize: theme.typography.fontSize.level2
+ },
+ wrapper: {
+ width: '100%',
+ maxWidth: 328,
+ minHeight: '90px'
+ },
+ wrapperBTN: {
+ display: 'flex',
+ flexDirection: 'column',
+ width: '100%',
+ marginBottom: '80px',
+ maxWidth: 328,
+ gap: 16
+ },
+ wrapperLogo: {
+ display: 'flex',
+ width: '100%',
+ marginBottom: '40px',
+ alignItems: 'center',
+ flexDirection: 'column'
+ },
+ wrapperLogin: {
+ display: 'flex',
+ alignItems: 'center',
+ flexDirection: 'column',
+ width: '100%',
+ minHeight: '200px',
+ marginBottom: '13px',
+ gap: '24px'
+ },
+ wrapperChecks: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ width: '100%',
+ marginBottom: '67px',
+ maxWidth: 328
+ },
+ row: {
+ display: 'flex',
+ alignContent: 'center',
+ justifyContent: 'center',
+ width: '100%'
+ },
+ colLeft: {
+ display: 'flex',
+ alignItems: 'center',
+ flexDirection: 'column',
+ paddingTop: '150px',
+ width: '100%'
+ },
+ colRight: {
+ overflow: 'hidden',
+ width: '100%',
+ height: '900px'
+ },
+ btnOpenIMG: {
+ display: 'flex',
+ position: 'absolute',
+ // border: '1px solid red',
+ top: 5,
+ left: 5
+ },
+
+ '@media screen and (max-width: 1280px)': {
+ containerStep: {
+ display: 'flex',
+ justifyContent: 'center',
+ flexDirection: 'column',
+ // border: '1px solid yellow',
+ minHeight: '80px',
+ width: '100%',
+ gap: 24,
+ overflow: 'hidden'
+ },
+ containerSection: {
+ display: 'flex',
+ width: '100%',
+ gap: 16,
+ flexDirection: 'column-reverse',
+ justifyContent: 'center',
+ alignItems: 'center'
+ },
+ summaryContainer: {
+ display: 'flex',
+ width: '100%',
+ // alignItems: 'start',
+ maxWidth: 'unset',
+ minHeight: 'unset',
+ flexDirection: 'column',
+ justifyContent: 'start',
+ backgroundColor: theme.color.surface,
+ gap: 4
+ }
+ }
+}))
+
+export default styles
diff --git a/packages/react/src/Templates/Login/Login.tsx b/packages/react/src/Templates/Login/Login.tsx
new file mode 100644
index 000000000..f7bed950e
--- /dev/null
+++ b/packages/react/src/Templates/Login/Login.tsx
@@ -0,0 +1,94 @@
+/* eslint-disable no-shadow */
+/* eslint-disable complexity */
+import React, { useEffect, useState } from 'react'
+import styles from './Login.style'
+import TextField from '../../components/TextField/TextField'
+import Logo from '../../components/Logo/Logo'
+import Icon from '../../components/Icon'
+import CheckBox from '../../components/Checkbox'
+import Link from '../../components/Link'
+import Button from '../../components/Button'
+// import Image from '../../components/Image'
+import useMedia from '../hookMedia/useMedia'
+
+const URLIMG = 'https://www.naturaeco.com/wp-content/uploads/sites/428/2021/06/NET-ZERO-scaled.jpg'
+export interface openIMG {
+ openIMG: boolean
+}
+const Login: React.FC
+
+ )
+}
+
+export default Login
diff --git a/packages/react/src/components/Snackbar/Snackbar.styles.ts b/packages/react/src/components/Snackbar/Snackbar.styles.ts
index 981d4768d..beb2967c2 100644
--- a/packages/react/src/components/Snackbar/Snackbar.styles.ts
+++ b/packages/react/src/components/Snackbar/Snackbar.styles.ts
@@ -129,7 +129,7 @@ const styles = createUseStyles
+
+
+
+
+ {
+ !mediaOn && openImg && (
+
+
+
+
+
+ setPasswordTrans(!passwordTrans)}
+ onChange={(e) => setEmail(e.target.value)}
+ value={email}
+ type="text"
+ label="Login"
+ />
+
+
+
+ setPasswordTrans(!passwordTrans)}
+ onChange={(e) => setPassword(e.target.value)}
+ value={password}
+ type={`${passwordTrans ? 'text' : 'password'}`}
+ label="Password"
+ action="icon"
+ IconComponent={passwordTrans ?
+
+ setCheck(!check)} />
+
+
+
+
+
+
+
+ {/* 
+
+
+ )
+ }
+
+