@pipelinesolucoes/form 1.2.0-beta.1 → 1.2.0-beta.12

package/dist/components/login/FormSignUp.d.ts

@@ -1,159 +1,146 @@
 import React from 'react';
-import { TypographyVariant } from '@mui/material/styles';
 import { SvgIconProps } from '@mui/material';
 import { ButtonProps } from '../../types/ButtonProps';
 import { FieldProps } from '@/types/FieldProps';
-import { ColorProps } from '../../types/ColorProps';
-import { BorderProps } from '../../types/BorderProps';
-/**
- * Retorno do onClick/onSubmit do componente pai.
- * - success: define se a ação foi bem sucedida
- * - message: mensagem para exibir no próprio FormLogin
- * - color: cor opcional para a mensagem (caso queira sobrescrever as cores padrão)
- */
-export interface ClickResult {
-    success: boolean;
-    message: string;
-    color?: string;
-}
-export interface FormSignUpProps extends ColorProps, BorderProps, ButtonProps, FieldProps {
+import { BorderProps, ColorProps, LayoutProps } from '@pipelinesolucoes/theme';
+import { ClickResult } from './ClickResult';
+export interface FormSignUpProps extends ColorProps, BorderProps, ButtonProps, FieldProps, LayoutProps {
     Icon?: React.ElementType<SvgIconProps>;
     titulo?: () => React.ReactElement;
     googleButton: () => React.ReactElement;
-    color: string;
-    background?: string;
-    borderRadius?: string;
-    border?: string;
-    boxShadow?: string;
-    backgroundField?: string;
-    colorField?: string;
-    colorFocusedField?: string;
-    borderRadiusField?: string;
-    boxShadowField?: string;
-    borderColorField?: string;
-    paddingField?: string;
-    textButton?: string;
-    variantButton?: TypographyVariant;
-    backgroundButton?: string;
-    backgroundHoverButton?: string;
-    colorButton?: string;
-    colorHoverButton?: string;
-    borderRadiusButton?: string;
-    borderButton?: string;
-    boxShadowButton?: string;
-    widthButton?: string;
-    heightButton?: string;
-    paddingButton?: string;
-    marginButton?: string;
-    /** Cores padrão para mensagem (caso o pai não retorne color no ClickResult) */
-    color_message_sucess: string;
-    color_message_erro: string;
-    color_link: string;
-    color_separador: string;
+    colorLink?: string;
+    divider?: string;
     urlLogin: string;
     children?: React.ReactNode;
-    /**
-     * Evento disparado ao clicar no botão principal.
-     * O componente pai devolve a mensagem e o sucesso/erro.
-     */
+    patternPassword?: RegExp;
+    patternPasswordMessage?: string;
     onClick?: (data: {
         email: string;
         password: string;
     }) => Promise<ClickResult> | ClickResult;
 }
 /**
- * Componente de formulário de login com suporte a autenticação via Google e login por email/senha.
- * Inclui validação básica de email, exibição de mensagens de erro/sucesso retornadas pelo handler `onClick`
- * e customização visual via props (container, campos, botão e links).
- *
- * @param {string} urlRecuperarConta URL para a página de recuperação de conta/senha. Obrigatório.
- * @param {string} urlCriarConta URL para a página de criação de conta. Obrigatório.
- * @param {React.ElementType<SvgIconProps>} [Icon] Ícone opcional (MUI SvgIcon) exibido no topo do formulário.
- * @param {() => React.ReactElement} [titulo] Função que retorna o conteúdo do título exibido no topo do formulário.
- * @param {() => React.ReactElement} googleButton Função que retorna o botão de login com Google. Obrigatório.
- *
- * @param {string} color Cor usada em alguns textos/containers auxiliares (ex.: wrapper dos links). Obrigatório.
- * @param {string} [background='transparent'] Cor de fundo do container principal.
- * @param {string} [borderRadius='0'] Raio da borda do container principal.
- * @param {string} [border='none'] Borda do container principal.
- * @param {string} [boxShadow='none'] Sombra do container principal.
- *
- * @param {string} [backgroundField='transparent'] Fundo dos campos (email/senha).
- * @param {string} [colorField='#000'] Cor do texto dos campos (email/senha).
- * @param {string} [colorFocusedField] Cor do estado focado do campo (se suportado pelos campos internos).
- * @param {string} [borderRadiusField='0px'] Raio da borda dos campos.
- * @param {string} [boxShadowField='none'] Sombra dos campos.
- * @param {string} [borderColorField='#ccc'] Cor da borda dos campos.
- * @param {string} [paddingField='4px 8px'] Espaçamento interno dos campos.
- *
- * @param {string} [textButton='Enviar'] Texto do botão principal.
- * @param {TypographyVariant} [variantButton='body1'] Variante do Typography usada no texto do botão.
- * @param {string} [backgroundButton='transparent'] Fundo do botão principal.
- * @param {string} [backgroundHoverButton='transparent'] Fundo do botão no hover.
- * @param {string} [colorButton='#000'] Cor do texto do botão.
- * @param {string} [colorHoverButton='#000'] Cor do texto do botão no hover.
- * @param {string} [borderRadiusButton='0'] Raio da borda do botão.
- * @param {string} [borderButton='none'] Borda do botão.
- * @param {string} [boxShadowButton='none'] Sombra do botão.
- * @param {string} [widthButton='auto'] Largura do botão.
- * @param {string} [heightButton='auto'] Altura do botão.
- * @param {string} [paddingButton='4px 24px'] Padding do botão.
- * @param {string} [marginButton='0'] Margem do botão.
+ * Componente de formulário de cadastro (Sign Up) completo, com suporte a:
+ * criação de conta via email/senha, confirmação de senha, botão de cadastro social,
+ * validação básica de campos, exibição de mensagens de sucesso/erro
+ * e ampla customização visual via props ou tema.
+ *
+ * @param {string} urlLogin URL para a página de login (usuário já possui conta).
  *
- * @param {string} color_message_sucess Cor padrão para mensagem de sucesso (caso `onClick` não retorne `color`). Obrigatório.
- * @param {string} color_message_erro Cor padrão para mensagem de erro (caso `onClick` não retorne `color`). Obrigatório.
- * @param {string} color_link Cor aplicada nos links "Esqueceu sua senha?" e "Criar conta". Obrigatório.
- * @param {string} color_separador Cor da linha separadora (Divider). Obrigatório.
+ * @param {React.ElementType<SvgIconProps>} [Icon] Ícone exibido no topo do formulário.
+ *
+ * @param {() => React.ReactElement} [titulo] Função que retorna o título do formulário.
+ *
+ * @param {() => React.ReactElement} googleButton Função que renderiza o botão de cadastro social.
  *
  * @param {(data: { email: string; password: string }) => Promise<ClickResult> | ClickResult} [onClick]
- * Handler chamado ao submeter o formulário. Recebe `{ email, password }` e deve retornar um `ClickResult`.
- * - Se `success` for `true`, exibe `message` com `color_message_sucess` (ou `result.color` se fornecida)
- * - Se `success` for `false`, exibe `message` com `color_message_erro` (ou `result.color` se fornecida)
- * Se não for informado, o componente exibirá a mensagem: "Nenhuma ação foi configurada para o botão.".
+ * Callback executado ao submeter o formulário. Deve retornar um objeto com sucesso, mensagem e cor opcional.
+ *
+ * @param {React.ReactNode} [children] Conteúdo adicional renderizado abaixo do formulário.
+ *
+ * @param {string} [background] Cor de fundo do container principal do formulário.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.
+ *
+ * @param {string | number} [borderRadius] Raio da borda do container principal.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.
+ *
+ * @param {string} [border] Borda do container principal.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.
+ *
+ * @param {string} [boxShadow] Sombra do container principal.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.
+ *
+ * @param {string} [maxWidth] Largura Máxima do container principal do formulário.
+ *
+ * @param {string} [backgroundField] Cor de fundo dos campos de formulário.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.field.
+ *
+ * @param {string} [colorField] Cor do texto dos campos de formulário.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.field.
+ *
+ * @param {string | number} [borderRadiusField] Raio da borda dos campos.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.field.
+ *
+ * @param {string} [boxShadowField] Sombra aplicada aos campos.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.field.
+ *
+ * @param {string} [borderColorField] Cor da borda dos campos.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.field.
+ *
+ * @param {string | number} [paddingField] Espaçamento interno dos campos.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.field.
+ *
+ * @param {string | number} [marginField] Margem externa dos campos.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.field.
+ *
+ * @param {string} [textButton='Enviar'] Texto exibido no botão principal.
+ *
+ * @param {TypographyVariant} [variantButton='body1'] Variante tipográfica utilizada no texto do botão.
+ *
+ * @param {string} [backgroundButton] Cor de fundo do botão.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
+ *
+ * @param {string} [backgroundHoverButton] Cor de fundo do botão ao passar o mouse.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
+ *
+ * @param {string} [colorButton] Cor do texto do botão.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
+ *
+ * @param {string} [colorHoverButton] Cor do texto do botão ao passar o mouse.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
+ *
+ * @param {string | number} [borderRadiusButton] Raio da borda do botão.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
+ *
+ * @param {string} [borderButton='none'] Borda do botão.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
+ *
+ * @param {string} [boxShadowButton] Sombra aplicada ao botão.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
+ *
+ * @param {string | number} [widthButton='auto'] Largura do botão.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
+ *
+ * @param {string | number} [heightButton='auto'] Altura do botão.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
+ *
+ * @param {string | number} [paddingButton] Espaçamento interno do botão.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
+ *
+ * @param {string | number} [marginButton='0'] Margem externa do botão.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
+ *
+ * @param {string} [colorLink] Cor do link de redirecionamento para login.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
+ *
+ * @param {string} [divider] Cor do divisor visual entre login social e formulário.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
+ *
+ * @param {RegExp} [passwordPattern=/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^A-Za-z0-9]).{8,}$/] Regex para validar formato da senha válida.
  *
- * @param {React.ReactNode} [children] Conteúdo extra renderizado ao final do container (abaixo da mensagem).
+ * @param {RegExp} [patternPasswordMessage='A senha deve ter no mínimo 8 caracteres, com ao menos uma letra maiúscula, uma letra minúscula, um número e um caractere especial.'] Mensagem de senha invalida.
  *
  * @example
  * ```tsx
- * import FormLogin from '@/components/FormLogin';
- * import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
- * import { Button } from '@mui/material';
+ * import { FormSignUp } from '@/components/FormSignUp';
+ * import AccountCircleIcon from '@mui/icons-material/AccountCircle';
  *
- * export default function Example() {
+ * const Example = () => {
  *   return (
- *     <FormLogin
- *       urlRecuperarConta="/recuperar"
- *       urlCriarConta="/cadastro"
- *       Icon={LockOutlinedIcon}
- *       titulo={() => <h2>Entrar</h2>}
- *       googleButton={() => <Button variant="outlined">Continuar com Google</Button>}
- *       color="#111"
- *       background="#fff"
- *       borderRadius="12px"
- *       boxShadow="0 10px 30px rgba(0,0,0,0.08)"
- *       backgroundField="#fafafa"
- *       borderColorField="#e0e0e0"
- *       paddingField="10px 12px"
- *       textButton="Acessar"
- *       backgroundButton="#111"
- *       backgroundHoverButton="#000"
- *       colorButton="#fff"
- *       colorHoverButton="#fff"
- *       borderRadiusButton="10px"
- *       paddingButton="10px 16px"
- *       color_message_sucess="#1b5e20"
- *       color_message_erro="#b71c1c"
- *       color_link="#1976d2"
- *       color_separador="#e0e0e0"
+ *     <FormSignUp
+ *       urlLogin="/login"
+ *       Icon={AccountCircleIcon}
+ *       titulo={() => <h2>Criar conta</h2>}
+ *       googleButton={() => <button>Cadastrar com Google</button>}
  *       onClick={async ({ email, password }) => {
- *         if (email === 'teste@exemplo.com' && password === '123') {
- *           return { success: true, message: 'Login realizado com sucesso!' };
+ *         if (email && password) {
+ *           return { success: true, message: 'Conta criada com sucesso!' };
  *         }
- *         return { success: false, message: 'Email ou senha inválidos.' };
+ *         return { success: false, message: 'Erro ao criar conta.' };
  *       }}
  *     />
  *   );
- * }
+ * };
  * ```
  */
 declare const FormSignUp: React.FC<FormSignUpProps>;

package/dist/components/login/FormSignUp.js

@@ -1,157 +1,163 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Box, Divider, Typography } from '@mui/material';
-import { LinkFormStyled } from '../FormStyled';
-import { ButtonFormStyled } from '../ButtonFormStyled';
+import { useTheme } from '@mui/material/styles';
+import { Divider, Typography } from '@mui/material';
+import { ButtonFormStyled } from '../../style/ButtonFormStyled';
 import { validateEmailMessage } from '../../utils/validateEmail';
 import TextFieldValidate from '../TextFieldValidate';
 import TextFieldPassword from '../TextFieldPassword';
-const FormContainer = styled('div')(() => ({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '16px',
-    width: '100%',
-    margin: 'auto',
-    padding: '0px',
-}));
-const DivPassword = styled('div')(() => ({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '8px',
-    width: '100%',
-    margin: '0',
-    padding: '0',
-}));
-const DivTitulo = styled('div')(() => ({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '8px',
-    width: '100%',
-    margin: '0',
-    padding: '0',
-    alignItems: 'center',
-    justifyContent: 'center',
-}));
-const DivLink = styled('div', {
-    shouldForwardProp: (prop) => !['text_color', 'align'].includes(prop),
-})(({ text_color, align }) => ({
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: align,
-    width: '100%',
-    padding: '0',
-    flex: '1',
-    color: text_color,
-}));
-const DivCampos = styled('div')(() => ({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '4px',
-    width: '100%',
-    margin: '0',
-    padding: '0',
-    alignItems: 'center',
-    justifyContent: 'center',
-}));
+import { LinkFormStyled } from '../../style/LinkFormStyled';
+import { DivCampos, DivLink, DivTitulo, FormContainer, StyledRoot } from './StyleLogin';
 /**
- * Componente de formulário de login com suporte a autenticação via Google e login por email/senha.
- * Inclui validação básica de email, exibição de mensagens de erro/sucesso retornadas pelo handler `onClick`
- * e customização visual via props (container, campos, botão e links).
- *
- * @param {string} urlRecuperarConta URL para a página de recuperação de conta/senha. Obrigatório.
- * @param {string} urlCriarConta URL para a página de criação de conta. Obrigatório.
- * @param {React.ElementType<SvgIconProps>} [Icon] Ícone opcional (MUI SvgIcon) exibido no topo do formulário.
- * @param {() => React.ReactElement} [titulo] Função que retorna o conteúdo do título exibido no topo do formulário.
- * @param {() => React.ReactElement} googleButton Função que retorna o botão de login com Google. Obrigatório.
- *
- * @param {string} color Cor usada em alguns textos/containers auxiliares (ex.: wrapper dos links). Obrigatório.
- * @param {string} [background='transparent'] Cor de fundo do container principal.
- * @param {string} [borderRadius='0'] Raio da borda do container principal.
- * @param {string} [border='none'] Borda do container principal.
- * @param {string} [boxShadow='none'] Sombra do container principal.
- *
- * @param {string} [backgroundField='transparent'] Fundo dos campos (email/senha).
- * @param {string} [colorField='#000'] Cor do texto dos campos (email/senha).
- * @param {string} [colorFocusedField] Cor do estado focado do campo (se suportado pelos campos internos).
- * @param {string} [borderRadiusField='0px'] Raio da borda dos campos.
- * @param {string} [boxShadowField='none'] Sombra dos campos.
- * @param {string} [borderColorField='#ccc'] Cor da borda dos campos.
- * @param {string} [paddingField='4px 8px'] Espaçamento interno dos campos.
- *
- * @param {string} [textButton='Enviar'] Texto do botão principal.
- * @param {TypographyVariant} [variantButton='body1'] Variante do Typography usada no texto do botão.
- * @param {string} [backgroundButton='transparent'] Fundo do botão principal.
- * @param {string} [backgroundHoverButton='transparent'] Fundo do botão no hover.
- * @param {string} [colorButton='#000'] Cor do texto do botão.
- * @param {string} [colorHoverButton='#000'] Cor do texto do botão no hover.
- * @param {string} [borderRadiusButton='0'] Raio da borda do botão.
- * @param {string} [borderButton='none'] Borda do botão.
- * @param {string} [boxShadowButton='none'] Sombra do botão.
- * @param {string} [widthButton='auto'] Largura do botão.
- * @param {string} [heightButton='auto'] Altura do botão.
- * @param {string} [paddingButton='4px 24px'] Padding do botão.
- * @param {string} [marginButton='0'] Margem do botão.
+ * Componente de formulário de cadastro (Sign Up) completo, com suporte a:
+ * criação de conta via email/senha, confirmação de senha, botão de cadastro social,
+ * validação básica de campos, exibição de mensagens de sucesso/erro
+ * e ampla customização visual via props ou tema.
+ *
+ * @param {string} urlLogin URL para a página de login (usuário já possui conta).
+ *
+ * @param {React.ElementType<SvgIconProps>} [Icon] Ícone exibido no topo do formulário.
  *
- * @param {string} color_message_sucess Cor padrão para mensagem de sucesso (caso `onClick` não retorne `color`). Obrigatório.
- * @param {string} color_message_erro Cor padrão para mensagem de erro (caso `onClick` não retorne `color`). Obrigatório.
- * @param {string} color_link Cor aplicada nos links "Esqueceu sua senha?" e "Criar conta". Obrigatório.
- * @param {string} color_separador Cor da linha separadora (Divider). Obrigatório.
+ * @param {() => React.ReactElement} [titulo] Função que retorna o título do formulário.
+ *
+ * @param {() => React.ReactElement} googleButton Função que renderiza o botão de cadastro social.
  *
  * @param {(data: { email: string; password: string }) => Promise<ClickResult> | ClickResult} [onClick]
- * Handler chamado ao submeter o formulário. Recebe `{ email, password }` e deve retornar um `ClickResult`.
- * - Se `success` for `true`, exibe `message` com `color_message_sucess` (ou `result.color` se fornecida)
- * - Se `success` for `false`, exibe `message` com `color_message_erro` (ou `result.color` se fornecida)
- * Se não for informado, o componente exibirá a mensagem: "Nenhuma ação foi configurada para o botão.".
+ * Callback executado ao submeter o formulário. Deve retornar um objeto com sucesso, mensagem e cor opcional.
+ *
+ * @param {React.ReactNode} [children] Conteúdo adicional renderizado abaixo do formulário.
+ *
+ * @param {string} [background] Cor de fundo do container principal do formulário.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.
+ *
+ * @param {string | number} [borderRadius] Raio da borda do container principal.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.
+ *
+ * @param {string} [border] Borda do container principal.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.
+ *
+ * @param {string} [boxShadow] Sombra do container principal.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.
+ *
+ * @param {string} [maxWidth] Largura Máxima do container principal do formulário.
+ *
+ * @param {string} [backgroundField] Cor de fundo dos campos de formulário.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.field.
+ *
+ * @param {string} [colorField] Cor do texto dos campos de formulário.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.field.
+ *
+ * @param {string | number} [borderRadiusField] Raio da borda dos campos.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.field.
+ *
+ * @param {string} [boxShadowField] Sombra aplicada aos campos.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.field.
+ *
+ * @param {string} [borderColorField] Cor da borda dos campos.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.field.
+ *
+ * @param {string | number} [paddingField] Espaçamento interno dos campos.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.field.
+ *
+ * @param {string | number} [marginField] Margem externa dos campos.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.field.
+ *
+ * @param {string} [textButton='Enviar'] Texto exibido no botão principal.
+ *
+ * @param {TypographyVariant} [variantButton='body1'] Variante tipográfica utilizada no texto do botão.
+ *
+ * @param {string} [backgroundButton] Cor de fundo do botão.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
+ *
+ * @param {string} [backgroundHoverButton] Cor de fundo do botão ao passar o mouse.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
+ *
+ * @param {string} [colorButton] Cor do texto do botão.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
+ *
+ * @param {string} [colorHoverButton] Cor do texto do botão ao passar o mouse.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
+ *
+ * @param {string | number} [borderRadiusButton] Raio da borda do botão.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
+ *
+ * @param {string} [borderButton='none'] Borda do botão.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
+ *
+ * @param {string} [boxShadowButton] Sombra aplicada ao botão.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
+ *
+ * @param {string | number} [widthButton='auto'] Largura do botão.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
+ *
+ * @param {string | number} [heightButton='auto'] Altura do botão.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
+ *
+ * @param {string | number} [paddingButton] Espaçamento interno do botão.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
+ *
+ * @param {string | number} [marginButton='0'] Margem externa do botão.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
+ *
+ * @param {string} [colorLink] Cor do link de redirecionamento para login.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
+ *
+ * @param {string} [divider] Cor do divisor visual entre login social e formulário.
+ * Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
+ *
+ * @param {RegExp} [passwordPattern=/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^A-Za-z0-9]).{8,}$/] Regex para validar formato da senha válida.
  *
- * @param {React.ReactNode} [children] Conteúdo extra renderizado ao final do container (abaixo da mensagem).
+ * @param {RegExp} [patternPasswordMessage='A senha deve ter no mínimo 8 caracteres, com ao menos uma letra maiúscula, uma letra minúscula, um número e um caractere especial.'] Mensagem de senha invalida.
  *
  * @example
  * ```tsx
- * import FormLogin from '@/components/FormLogin';
- * import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
- * import { Button } from '@mui/material';
+ * import { FormSignUp } from '@/components/FormSignUp';
+ * import AccountCircleIcon from '@mui/icons-material/AccountCircle';
  *
- * export default function Example() {
+ * const Example = () => {
  *   return (
- *     <FormLogin
- *       urlRecuperarConta="/recuperar"
- *       urlCriarConta="/cadastro"
- *       Icon={LockOutlinedIcon}
- *       titulo={() => <h2>Entrar</h2>}
- *       googleButton={() => <Button variant="outlined">Continuar com Google</Button>}
- *       color="#111"
- *       background="#fff"
- *       borderRadius="12px"
- *       boxShadow="0 10px 30px rgba(0,0,0,0.08)"
- *       backgroundField="#fafafa"
- *       borderColorField="#e0e0e0"
- *       paddingField="10px 12px"
- *       textButton="Acessar"
- *       backgroundButton="#111"
- *       backgroundHoverButton="#000"
- *       colorButton="#fff"
- *       colorHoverButton="#fff"
- *       borderRadiusButton="10px"
- *       paddingButton="10px 16px"
- *       color_message_sucess="#1b5e20"
- *       color_message_erro="#b71c1c"
- *       color_link="#1976d2"
- *       color_separador="#e0e0e0"
+ *     <FormSignUp
+ *       urlLogin="/login"
+ *       Icon={AccountCircleIcon}
+ *       titulo={() => <h2>Criar conta</h2>}
+ *       googleButton={() => <button>Cadastrar com Google</button>}
  *       onClick={async ({ email, password }) => {
- *         if (email === 'teste@exemplo.com' && password === '123') {
- *           return { success: true, message: 'Login realizado com sucesso!' };
+ *         if (email && password) {
+ *           return { success: true, message: 'Conta criada com sucesso!' };
  *         }
- *         return { success: false, message: 'Email ou senha inválidos.' };
+ *         return { success: false, message: 'Erro ao criar conta.' };
  *       }}
  *     />
  *   );
- * }
+ * };
  * ```
  */
-const FormSignUp = ({ urlLogin, Icon, titulo, googleButton, color, background = 'transparent', borderRadius = '0', border = 'none', boxShadow = 'none', backgroundField = 'transparent', colorField = '#000', borderRadiusField = '0px', boxShadowField = 'none', borderColorField = '#ccc', paddingField = '4px 8px', textButton = 'Enviar', variantButton = 'body1', backgroundButton = 'transparent', backgroundHoverButton = 'transparent', colorButton = '#000', colorHoverButton = '#000', borderRadiusButton = '0', borderButton = 'none', boxShadowButton = 'none', widthButton = 'auto', heightButton = 'auto', paddingButton = '4px 24px', marginButton = '0', color_message_sucess, color_message_erro, color_link, color_separador, onClick, children, }) => {
+const FormSignUp = ({ urlLogin, Icon, titulo, googleButton, background, borderRadius, border, boxShadow, maxWidth, backgroundField, colorField, borderRadiusField, boxShadowField, borderColorField, paddingField, marginField, textButton = 'Enviar', variantButton = 'body1', backgroundButton, backgroundHoverButton, colorButton, colorHoverButton, borderRadiusButton, borderButton = 'none', boxShadowButton, widthButton = 'auto', heightButton = 'auto', paddingButton, marginButton = '0', colorLink, divider, patternPassword, patternPasswordMessage, onClick, children, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68, _69, _70;
+    const theme = useTheme();
+    const color_message_sucess = theme.palette.success.main;
+    const color_message_erro = theme.palette.error.main;
+    const bContainer = (_d = background !== null && background !== void 0 ? background : (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.pipelinesolucoes) === null || _a === void 0 ? void 0 : _a.forms) === null || _b === void 0 ? void 0 : _b.login) === null || _c === void 0 ? void 0 : _c.background) !== null && _d !== void 0 ? _d : 'transparent';
+    const brContainer = (_h = borderRadius !== null && borderRadius !== void 0 ? borderRadius : (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.pipelinesolucoes) === null || _e === void 0 ? void 0 : _e.forms) === null || _f === void 0 ? void 0 : _f.login) === null || _g === void 0 ? void 0 : _g.borderRadius) !== null && _h !== void 0 ? _h : '0';
+    const bdContainer = (_m = border !== null && border !== void 0 ? border : (_l = (_k = (_j = theme === null || theme === void 0 ? void 0 : theme.pipelinesolucoes) === null || _j === void 0 ? void 0 : _j.forms) === null || _k === void 0 ? void 0 : _k.login) === null || _l === void 0 ? void 0 : _l.border) !== null && _m !== void 0 ? _m : '0';
+    const bsContainer = (_r = boxShadow !== null && boxShadow !== void 0 ? boxShadow : (_q = (_p = (_o = theme === null || theme === void 0 ? void 0 : theme.pipelinesolucoes) === null || _o === void 0 ? void 0 : _o.forms) === null || _p === void 0 ? void 0 : _p.login) === null || _q === void 0 ? void 0 : _q.boxShadow) !== null && _r !== void 0 ? _r : 'none';
+    const bField = (_w = backgroundField !== null && backgroundField !== void 0 ? backgroundField : (_v = (_u = (_t = (_s = theme === null || theme === void 0 ? void 0 : theme.pipelinesolucoes) === null || _s === void 0 ? void 0 : _s.forms) === null || _t === void 0 ? void 0 : _t.login) === null || _u === void 0 ? void 0 : _u.field) === null || _v === void 0 ? void 0 : _v.background) !== null && _w !== void 0 ? _w : undefined;
+    const cField = (_1 = colorField !== null && colorField !== void 0 ? colorField : (_0 = (_z = (_y = (_x = theme === null || theme === void 0 ? void 0 : theme.pipelinesolucoes) === null || _x === void 0 ? void 0 : _x.forms) === null || _y === void 0 ? void 0 : _y.login) === null || _z === void 0 ? void 0 : _z.field) === null || _0 === void 0 ? void 0 : _0.color) !== null && _1 !== void 0 ? _1 : undefined;
+    const brField = (_6 = borderRadiusField !== null && borderRadiusField !== void 0 ? borderRadiusField : (_5 = (_4 = (_3 = (_2 = theme === null || theme === void 0 ? void 0 : theme.pipelinesolucoes) === null || _2 === void 0 ? void 0 : _2.forms) === null || _3 === void 0 ? void 0 : _3.login) === null || _4 === void 0 ? void 0 : _4.field) === null || _5 === void 0 ? void 0 : _5.borderRadius) !== null && _6 !== void 0 ? _6 : undefined;
+    const bsField = (_11 = boxShadowField !== null && boxShadowField !== void 0 ? boxShadowField : (_10 = (_9 = (_8 = (_7 = theme === null || theme === void 0 ? void 0 : theme.pipelinesolucoes) === null || _7 === void 0 ? void 0 : _7.forms) === null || _8 === void 0 ? void 0 : _8.login) === null || _9 === void 0 ? void 0 : _9.field) === null || _10 === void 0 ? void 0 : _10.boxShadow) !== null && _11 !== void 0 ? _11 : undefined;
+    const bcField = (_16 = borderColorField !== null && borderColorField !== void 0 ? borderColorField : (_15 = (_14 = (_13 = (_12 = theme === null || theme === void 0 ? void 0 : theme.pipelinesolucoes) === null || _12 === void 0 ? void 0 : _12.forms) === null || _13 === void 0 ? void 0 : _13.login) === null || _14 === void 0 ? void 0 : _14.field) === null || _15 === void 0 ? void 0 : _15.borderColor) !== null && _16 !== void 0 ? _16 : undefined;
+    const pField = (_21 = paddingField !== null && paddingField !== void 0 ? paddingField : (_20 = (_19 = (_18 = (_17 = theme === null || theme === void 0 ? void 0 : theme.pipelinesolucoes) === null || _17 === void 0 ? void 0 : _17.forms) === null || _18 === void 0 ? void 0 : _18.login) === null || _19 === void 0 ? void 0 : _19.field) === null || _20 === void 0 ? void 0 : _20.padding) !== null && _21 !== void 0 ? _21 : undefined;
+    const mgField = (_26 = marginField !== null && marginField !== void 0 ? marginField : (_25 = (_24 = (_23 = (_22 = theme === null || theme === void 0 ? void 0 : theme.pipelinesolucoes) === null || _22 === void 0 ? void 0 : _22.forms) === null || _23 === void 0 ? void 0 : _23.login) === null || _24 === void 0 ? void 0 : _24.field) === null || _25 === void 0 ? void 0 : _25.margin) !== null && _26 !== void 0 ? _26 : undefined;
+    const bgButton = (_31 = backgroundButton !== null && backgroundButton !== void 0 ? backgroundButton : (_30 = (_29 = (_28 = (_27 = theme === null || theme === void 0 ? void 0 : theme.pipelinesolucoes) === null || _27 === void 0 ? void 0 : _27.forms) === null || _28 === void 0 ? void 0 : _28.login) === null || _29 === void 0 ? void 0 : _29.button) === null || _30 === void 0 ? void 0 : _30.background) !== null && _31 !== void 0 ? _31 : undefined;
+    const bgHoverButton = (_36 = backgroundHoverButton !== null && backgroundHoverButton !== void 0 ? backgroundHoverButton : (_35 = (_34 = (_33 = (_32 = theme === null || theme === void 0 ? void 0 : theme.pipelinesolucoes) === null || _32 === void 0 ? void 0 : _32.forms) === null || _33 === void 0 ? void 0 : _33.login) === null || _34 === void 0 ? void 0 : _34.button) === null || _35 === void 0 ? void 0 : _35.backgroundHover) !== null && _36 !== void 0 ? _36 : undefined;
+    const cButton = (_41 = colorButton !== null && colorButton !== void 0 ? colorButton : (_40 = (_39 = (_38 = (_37 = theme === null || theme === void 0 ? void 0 : theme.pipelinesolucoes) === null || _37 === void 0 ? void 0 : _37.forms) === null || _38 === void 0 ? void 0 : _38.login) === null || _39 === void 0 ? void 0 : _39.button) === null || _40 === void 0 ? void 0 : _40.color) !== null && _41 !== void 0 ? _41 : undefined;
+    const cHoverButton = (_46 = colorHoverButton !== null && colorHoverButton !== void 0 ? colorHoverButton : (_45 = (_44 = (_43 = (_42 = theme === null || theme === void 0 ? void 0 : theme.pipelinesolucoes) === null || _42 === void 0 ? void 0 : _42.forms) === null || _43 === void 0 ? void 0 : _43.login) === null || _44 === void 0 ? void 0 : _44.button) === null || _45 === void 0 ? void 0 : _45.colorHover) !== null && _46 !== void 0 ? _46 : undefined;
+    const brButton = (_51 = borderRadiusButton !== null && borderRadiusButton !== void 0 ? borderRadiusButton : (_50 = (_49 = (_48 = (_47 = theme === null || theme === void 0 ? void 0 : theme.pipelinesolucoes) === null || _47 === void 0 ? void 0 : _47.forms) === null || _48 === void 0 ? void 0 : _48.login) === null || _49 === void 0 ? void 0 : _49.button) === null || _50 === void 0 ? void 0 : _50.borderRadius) !== null && _51 !== void 0 ? _51 : undefined;
+    const bsButton = (_56 = boxShadowButton !== null && boxShadowButton !== void 0 ? boxShadowButton : (_55 = (_54 = (_53 = (_52 = theme === null || theme === void 0 ? void 0 : theme.pipelinesolucoes) === null || _52 === void 0 ? void 0 : _52.forms) === null || _53 === void 0 ? void 0 : _53.login) === null || _54 === void 0 ? void 0 : _54.button) === null || _55 === void 0 ? void 0 : _55.boxShadow) !== null && _56 !== void 0 ? _56 : undefined;
+    const pButton = (_61 = paddingButton !== null && paddingButton !== void 0 ? paddingButton : (_60 = (_59 = (_58 = (_57 = theme === null || theme === void 0 ? void 0 : theme.pipelinesolucoes) === null || _57 === void 0 ? void 0 : _57.forms) === null || _58 === void 0 ? void 0 : _58.login) === null || _59 === void 0 ? void 0 : _59.button) === null || _60 === void 0 ? void 0 : _60.padding) !== null && _61 !== void 0 ? _61 : undefined;
+    const cdivider = (_65 = divider !== null && divider !== void 0 ? divider : (_64 = (_63 = (_62 = theme === null || theme === void 0 ? void 0 : theme.pipelinesolucoes) === null || _62 === void 0 ? void 0 : _62.forms) === null || _63 === void 0 ? void 0 : _63.login) === null || _64 === void 0 ? void 0 : _64.divider) !== null && _65 !== void 0 ? _65 : undefined;
+    const cLink = (_70 = colorLink !== null && colorLink !== void 0 ? colorLink : (_69 = (_68 = (_67 = (_66 = theme === null || theme === void 0 ? void 0 : theme.pipelinesolucoes) === null || _66 === void 0 ? void 0 : _66.forms) === null || _67 === void 0 ? void 0 : _67.login) === null || _68 === void 0 ? void 0 : _68.link) === null || _69 === void 0 ? void 0 : _69.color) !== null && _70 !== void 0 ? _70 : undefined;
     const [mensagemApi, setMensagemApi] = useState('');
     const [corMensagemApi, setCorMensagemApi] = useState(color_message_erro);
     const [email, setEmail] = useState('');
@@ -203,9 +209,7 @@ const FormSignUp = ({ urlLogin, Icon, titulo, googleButton, color, background =
             setIsLoading(false);
         }
     };
-    return (_jsxs(Box, { display: "flex", flexDirection: "column", justifyContent: "center", gap: "24px", flex: 1, sx: { padding: '24px', borderRadius: borderRadius,
-            background: background, border: border,
-            boxShadow: boxShadow }, children: [(Icon || titulo) && (_jsxs(DivTitulo, { children: [Icon && _jsx(Icon, {}), titulo && titulo()] })), _jsxs(FormContainer, { children: [googleButton && googleButton(), _jsx(Divider, { sx: { borderColor: color_separador }, children: "ou" }), _jsxs(DivCampos, { children: [_jsx(TextFieldValidate, { id: "email", label: "Email", placeholder: "Email", background: backgroundField, color: colorField, borderRadius: borderRadiusField, borderColor: borderColorField, boxShadow: boxShadowField, padding: paddingField, value: email, onChange: (e) => setEmail(e.target.value), required: true, requiredMessage: "Campo obrigat\u00F3rio", validate: validateEmailMessage, showErrorOn: "blur" }), _jsx(DivPassword, { children: _jsx(TextFieldPassword, { id: "password", label: "Senha", placeholder: "Senha", required: true, background: backgroundField, color: colorField, borderRadius: borderRadiusField, borderColor: borderColorField, boxShadow: boxShadowField, padding: paddingField, value: password, onPasswordChange: (p) => setPassword(p) }) }), _jsx(DivPassword, { children: _jsx(TextFieldPassword, { id: "passwordconfirmada", label: "Confirmar Senha", placeholder: "Confirmar Senha", required: true, background: backgroundField, color: colorField, borderRadius: borderRadiusField, borderColor: borderColorField, boxShadow: boxShadowField, padding: paddingField, value: confirmPassword, onPasswordChange: (p) => setConfirmPassword(p) }) })] }), _jsx(ButtonFormStyled, { backgroundButton: backgroundButton, backgroundHoverButton: backgroundHoverButton, colorButton: colorButton, colorHoverButton: colorHoverButton, borderRadiusButton: borderRadiusButton, borderButton: borderButton, boxShadowButton: boxShadowButton, widthButton: widthButton, heightButton: heightButton, paddingButton: paddingButton, marginButton: marginButton, disabled: isLoading, onClick: handleClick, children: isLoading ? ('Enviando...') : (_jsx(Typography, { variant: variantButton, component: "span", children: textButton })) }), _jsx(DivLink, { text_color: color, align: "center", children: _jsx(LinkFormStyled, { href: urlLogin, width: "auto", height: "100%", text_color: color_link, margin: "0", children: "Entrar" }) })] }), mensagemApi && (_jsx(Typography, { variant: "body2", sx: { color: corMensagemApi }, children: mensagemApi })), children] }));
+    return (_jsxs(StyledRoot, { background: bContainer, border_radius: brContainer, box_shadow: bsContainer, border: bdContainer, maxWidth: maxWidth, children: [(Icon || titulo) && (_jsxs(DivTitulo, { children: [Icon && _jsx(Icon, {}), titulo && titulo()] })), _jsxs(FormContainer, { children: [googleButton && googleButton(), _jsx(Divider, { sx: { borderColor: cdivider }, children: "ou" }), _jsxs(DivCampos, { children: [_jsx(TextFieldValidate, { id: "email", label: "Email", placeholder: "Email", background: bField, color: cField, borderRadius: brField, borderColor: bcField, boxShadow: bsField, padding: pField, value: email, onChange: (e) => setEmail(e.target.value), required: true, requiredMessage: "email obrigat\u00F3rio", validate: validateEmailMessage, showErrorOn: "blur" }), _jsx(TextFieldPassword, { id: "password", label: "Senha", placeholder: "Senha", required: true, background: bField, color: cField, borderRadius: brField, borderColor: bcField, boxShadow: bsField, padding: pField, value: password, pattern: patternPassword, patternMessage: patternPasswordMessage, onPasswordChange: (p) => setPassword(p) }), _jsx(TextFieldPassword, { id: "passwordconfirmada", label: "Confirmar Senha", placeholder: "Confirmar Senha", required: true, background: backgroundField, color: colorField, borderRadius: borderRadiusField, borderColor: borderColorField, boxShadow: boxShadowField, padding: paddingField, value: confirmPassword, onPasswordChange: (p) => setConfirmPassword(p) })] }), _jsx(ButtonFormStyled, { backgroundButton: bgButton, backgroundHoverButton: bgHoverButton, colorButton: cButton, colorHoverButton: cHoverButton, borderRadiusButton: brButton, borderButton: borderButton, boxShadowButton: bsButton, widthButton: widthButton, heightButton: heightButton, paddingButton: pButton, marginButton: marginButton, disabled: isLoading, onClick: handleClick, children: isLoading ? ('Enviando...') : (_jsx(Typography, { variant: variantButton, component: "span", children: textButton })) }), _jsxs(DivLink, { children: [_jsx(Typography, { variant: variantButton, component: 'span', color: cField, children: "J\u00E1 tem uma conta?" }), _jsx(LinkFormStyled, { href: urlLogin, text_color: cLink, children: _jsx(Typography, { variant: variantButton, component: 'span', marginLeft: "4px", children: "Entrar" }) })] })] }), mensagemApi && (_jsx(Typography, { variant: "body2", sx: { color: corMensagemApi }, children: mensagemApi })), children] }));
 };
 export default FormSignUp;
 //# sourceMappingURL=FormSignUp.js.map