mitre-form-component/dist/index.cjs.map

Componente de formulário de captação de leads para ser usado em projetos da Mitre Realty.

{"version":3,"sources":["../src/index.ts","../src/components/Form/index.tsx","../src/components/hooks/useError.ts","../src/utils/utm.ts","../src/components/styles/utils.ts","../src/components/Form/styles.ts","../src/components/styles/global.ts","../src/components/Input/index.tsx","../src/components/Input/masks.ts","../src/components/Input/styles.ts","../src/components/Button/styles.ts","../src/components/Button/index.tsx","../src/components/Alert/index.tsx","../src/components/Alert/styles.ts","../src/components/PhoneInput/index.tsx","../src/components/PhoneInput/styles.ts","../src/components/ProductSelect/index.tsx","../src/components/ProductSelect/styles.ts"],"sourcesContent":["export { default as MitreFormComponent } from \"./components/Form\";\nexport type { MitreFormComponentProps, RequestBody } from \"./components/Form\";\n","import React, { useState } from \"react\";\nimport { useError } from \"../hooks/useError\";\nimport { useForm, SubmitHandler, Controller } from \"react-hook-form\";\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport * as yup from \"yup\";\n\nimport { UTM, isBrowser, resolveUtmWithPriority } from '../../utils/utm';\nimport { Product } from '../../domain/Product';\n\nimport { PhoneNumberUtil } from 'google-libphonenumber';\nconst phoneUtil = PhoneNumberUtil.getInstance();\n\nimport {\n  FormContainer,\n  HeaderContainer,\n  ButtonContainer,\n  Form,\n  Title,\n  Text\n} from \"./styles\";\nimport FontLoader, { GlobalStyles } from \"../styles/global\";\n\nimport { Input } from \"../Input\";\nimport { Button } from \"../Button\";\nimport { Alert } from \"../Alert\";\nimport { PhoneInput } from \"../PhoneInput\";\nimport { ProductSelect } from \"../ProductSelect\";\n\nexport interface MitreFormComponentProps {\n  products: Product[];\n  apiUrl: string;\n  apiToken: string;\n  showHeader?: boolean;\n  backgroundColor?: string;\n  buttonBackgroundColor?: string;\n  buttonTextColor?: string;\n  textColor?: string;\n  innerPadding?: string;\n  inputBackgroundColor?: string;\n  inputFocusBorderColor?: string;\n  inputBorderColor?: string;\n  inputTextColor?: string;\n  inputPlaceholderColor?: string;\n  onSuccess?: (requestBody: RequestBody, leadId: string) => void;\n  onError?: (error: Error) => void;\n}\n\nexport interface RequestBody {\n  name: string;\n  email: string;\n  phone: string;\n  message: string;\n  productId: string;\n  utm_source: string;\n  utm_medium?: string;\n  utm_campaign?: string;\n  utm_term?: string;\n}\n\nconst isPhoneValid = (phone: string) => {\n  try {\n    return phoneUtil.isValidNumber(phoneUtil.parseAndKeepRawInput(phone));\n  } catch (error) {\n    console.log('erro ao validar telefone = ' + error)\n    return false;\n  }\n};\n\n// Schema base sem productId\nconst baseSchema = {\n  name: yup.string().required(\"Nome é obrigatório\"),\n  email: yup.string().required(\"Email é obrigatório\").email(\"Email inválido\"),\n  phone: yup.object().shape({\n    phone: yup.string().required(\"Telefone é obrigatório!\")\n      .test(\n        'is-valid-phone',\n        'Número de telefone inválido!',\n        function (value) {\n          const digitsOnly = value?.replace(/\\D/g, '') || '';\n          return digitsOnly.length >= 8 && isPhoneValid(value)\n        }),\n    inputValue: yup.string().required(\"Telefone é obrigatório!\"),\n    dialCode: yup.string().required(\"Código de país é obrigatório\")\n  }),\n};\n\n// Schema com productId quando necessário\nconst schemaWithProduct = yup.object().shape({\n  ...baseSchema,\n  productId: yup.string().required(\"Produto é obrigatório\"),\n});\n\nconst schema = yup.object().shape(baseSchema);\n\nconst MitreFormComponent = React.forwardRef<HTMLDivElement, MitreFormComponentProps>(({\n  products,\n  apiUrl,\n  apiToken,\n  showHeader = true,\n  backgroundColor = \"var(--gray-180)\",\n  textColor = \"var(--black)\",\n  buttonBackgroundColor = \"#F6C76B\",\n  buttonTextColor = \"var(--black)\",\n  innerPadding = \"1rem\",\n  inputBackgroundColor = \"var(--white)\",\n  inputBorderColor = \"var(--transparent)\",\n  inputFocusBorderColor = \"var(--yellow-500)\",\n  inputPlaceholderColor = \"var(--gray-100)\",\n  inputTextColor = \"var(--black)\",\n  onSuccess,\n  onError,\n}, ref) => {\n  const [loading, setIsLoading] = useState(false);\n  const { error, handleError, clearError } = useError();\n  const [successMessage, setSuccessMessage] = useState('');\n  const [formKey, setFormKey] = useState(0);\n  const [selectedProductId, setSelectedProductId] = useState<number | null>(null);\n\n  // Validação do array de produtos\n  const validateProducts = (): string | null => {\n    if (!products) {\n      return \"Lista de produtos não foi fornecida\";\n    }\n\n    if (!Array.isArray(products)) {\n      return \"Lista de produtos deve ser um array\";\n    }\n\n    if (products.length === 0) {\n      return \"Lista de produtos não pode estar vazia\";\n    }\n\n    // Validar cada produto no array\n    for (let i = 0; i < products.length; i++) {\n      const product = products[i];\n\n      if (!product) {\n        return `Produto na posição ${i} é inválido (nulo/undefined)`;\n      }\n\n      if (typeof product.id !== 'number' || product.id <= 0) {\n        return `Produto na posição ${i} possui ID inválido (deve ser um número positivo)`;\n      }\n\n      if (typeof product.name !== 'string' || product.name.trim().length === 0) {\n        return `Produto na posição ${i} possui nome inválido (deve ser uma string não vazia)`;\n      }\n    }\n\n    return null;\n  };\n\n  const productsValidationError = validateProducts();\n\n  // UTM resolved inside the component (URL > localStorage (7d TTL) > referrer)\n  const [utm, setUtm] = useState<UTM>({ utm_source: 'direto', createdAt: new Date().toISOString() });\n\n  // Usar schema com productId se houver mais de 1 produto\n  const formSchema = products && products.length > 1 ? schemaWithProduct : schema;\n\n  const { control, register, handleSubmit, formState: { errors }, reset, clearErrors } = useForm<{\n    name: string;\n    email: string;\n    phone: { phone: string; inputValue: string; dialCode: string; };\n    productId?: string;\n  }>({\n    resolver: yupResolver(formSchema),\n    mode: 'onSubmit',\n  });\n\n  React.useEffect(() => {\n    if (!isBrowser()) return;\n    const { data } = resolveUtmWithPriority(new Date());\n    setUtm(data);\n  }, []);\n\n  const resetForm = () => {\n    const resetData: any = {\n      name: \"\",\n      email: \"\",\n      phone: { phone: \"\", inputValue: \"\", dialCode: \"\" },\n    };\n\n    // Incluir productId no reset se houver mais de 1 produto\n    if (products && products.length > 1) {\n      resetData.productId = \"\";\n      setSelectedProductId(null);\n    }\n\n    reset(resetData, {\n      keepErrors: false,\n      keepDirty: false,\n      keepTouched: false,\n      keepIsSubmitted: false,\n      keepSubmitCount: false,\n      keepValues: false,\n      keepDefaultValues: false,\n    });\n    clearErrors();\n    setFormKey(k => k + 1); // Force remount\n  };\n\n  const sendMessage: SubmitHandler<{\n    name: string;\n    email: string;\n    phone: { phone: string; inputValue: string; dialCode: string; };\n    productId?: string;\n  }> = async (data) => {\n    const { name, email, phone, productId } = data;\n\n    const phoneValue = phone.inputValue;\n    const phoneDigitsOnly = phoneValue?.replace(/\\D/g, '') || '';\n\n    const message = \"Gostaria de mais informações sobre o produto\";\n\n    try {\n      setIsLoading(true);\n\n      if (!products || products.length === 0 || !apiToken) {\n        throw new Error(\"Parâmetros obrigatórios não informados\");\n      }\n\n      // Determinar qual produto usar\n      let selectedProduct: Product;\n\n      if (products.length === 1) {\n        // Se há apenas 1 produto, usar ele\n        selectedProduct = products[0];\n      } else {\n        // Se há múltiplos produtos, usar o selecionado\n        if (!productId) {\n          throw new Error(\"Produto deve ser selecionado\");\n        }\n        const foundProduct = products.find(p => p.id.toString() === productId);\n        if (!foundProduct) {\n          throw new Error(\"Produto selecionado não encontrado\");\n        }\n        selectedProduct = foundProduct;\n      }\n\n      const requestBody: RequestBody = {\n        name,\n        email,\n        phone: phoneDigitsOnly,\n        message,\n        productId: selectedProduct.id.toString(),\n        utm_source: utm.utm_source,\n        utm_campaign: utm.utm_campaign,\n        utm_medium: utm.utm_medium,\n        utm_term: utm.utm_term,\n      };\n\n      const response = await fetch(`${apiUrl}/leads`, {\n        method: \"POST\",\n        headers: {\n          \"Content-Type\": \"application/json\",\n          Authorization: `Basic ${apiToken}`,\n        },\n        body: JSON.stringify(requestBody),\n      });\n\n      if (!response.ok) {\n        throw new Error(\"Falha ao enviar a mensagem!\");\n      }\n\n      const responseData = await response.json();\n      const leadId = responseData.leadId || responseData.id || '';\n\n      setSuccessMessage(\"Mensagem enviada com sucesso!\");\n      resetForm();\n      onSuccess?.(requestBody, leadId);\n    } catch (err) {\n      const error = err instanceof Error ? err : new Error(\"Erro desconhecido\");\n      handleError(err);\n      onError?.(error);\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  // Se houver erro na validação dos produtos, renderizar erro no lugar do formulário\n  if (productsValidationError) {\n    // Logar o erro específico no console para debug\n    console.error('Erro na validação dos produtos:', productsValidationError);\n\n    return (\n      <>\n        <FontLoader />\n        <GlobalStyles />\n\n        <FormContainer $backgroundColor={backgroundColor} $innerPadding={innerPadding} ref={ref}>\n          <HeaderContainer>\n            <Title $textColor={textColor}>Erro no carregamento do formulário!</Title>\n            <Text $textColor={textColor}>\n              Não foi possível carregar o formulário. Tente novamente mais tarde.\n            </Text>\n          </HeaderContainer>\n        </FormContainer>\n      </>\n    );\n  }\n\n  return (\n    <>\n      <FontLoader />\n      <GlobalStyles />\n\n      {error && (\n        <Alert\n          type=\"error\"\n          dismissible\n          onDismiss={clearError}\n          autoDismiss={5000}\n        >\n          {error!.message}\n        </Alert>\n      )}\n\n      {successMessage && (\n        <Alert\n          type=\"success\"\n          dismissible\n          onDismiss={() => setSuccessMessage('')}\n          autoDismiss={5000}\n        >\n          {successMessage}\n        </Alert>\n      )}\n\n      <FormContainer $backgroundColor={backgroundColor} $innerPadding={innerPadding} ref={ref} >\n        {showHeader &&\n          <HeaderContainer>\n            <Title $textColor={textColor}>Atendimento por mensagem</Title>\n\n            <Text $textColor={textColor}>Informe seus dados e retornaremos a mensagem.</Text>\n          </HeaderContainer>\n        }\n\n        <Form $textColor={textColor} onSubmit={handleSubmit(sendMessage)} noValidate>\n          {products.length > 1 && (\n            <ProductSelect\n              id=\"productId\"\n              label=\"Produto de interesse *\"\n              placeholder=\"Selecione um produto\"\n              {...register(\"productId\")}\n              error={errors.productId?.message}\n              products={products}\n              required\n              labelTextColor={textColor}\n              backgroundColor={inputBackgroundColor}\n              borderColor={inputBorderColor}\n              focusBorderColor={inputFocusBorderColor}\n              textColor={inputTextColor}\n            />\n          )}\n\n          <Input\n            id=\"name\"\n            label=\"Nome *\"\n            placeholder=\"Digite seu nome\"\n            {...register(\"name\")}\n            error={errors.name?.message}\n            autoComplete=\"name\"\n            required\n            labelTextColor={textColor}\n            backgroundColor={inputBackgroundColor}\n            borderColor={inputBorderColor}\n            focusBorderColor={inputFocusBorderColor}\n            inputPlaceholderColor={inputPlaceholderColor}\n            inputTextColor={inputTextColor}\n          />\n\n          <Input\n            id=\"email\"\n            label=\"Email *\"\n            type=\"email\"\n            placeholder=\"exemplo@email.com\"\n            {...register(\"email\")}\n            error={errors.email?.message}\n            autoComplete=\"email\"\n            required\n            labelTextColor={textColor}\n            backgroundColor={inputBackgroundColor}\n            borderColor={inputBorderColor}\n            focusBorderColor={inputFocusBorderColor}\n            inputPlaceholderColor={inputPlaceholderColor}\n            inputTextColor={inputTextColor}\n          />\n\n          <Controller\n            key={formKey}\n            name=\"phone\"\n            control={control}\n            defaultValue={{ phone: \"\", inputValue: \"\", dialCode: \"\" }}\n            shouldUnregister={true}\n            render={({ field }) => {\n              const errorMsg =\n                errors.phone?.inputValue?.message ||\n                errors.phone?.phone?.message ||\n                errors.phone?.message;\n\n              return (\n                <PhoneInput\n                  id=\"phone\"\n                  label=\"Telefone *\"\n                  placeholder=\"(11) 00000-0000\"\n                  error={errorMsg}\n                  required\n                  value={field.value.phone}\n                  onChange={field.onChange}\n                  name={field.name}\n                  labelTextColor={textColor}\n                  backgroundColor={inputBackgroundColor}\n                  borderColor={inputBorderColor}\n                  focusBorderColor={inputFocusBorderColor}\n                  inputPlaceholderColor={inputPlaceholderColor}\n                  inputTextColor={inputTextColor}\n                />\n              );\n            }}\n          />\n\n          <h6>* Campos de preenchimento obrigatório.</h6>\n\n          <ButtonContainer>\n            <Button bgColor={buttonBackgroundColor} color={buttonTextColor} type=\"submit\" isSubmitting={loading}>\n              Enviar mensagem\n            </Button>\n          </ButtonContainer>\n\n          <p>A Mitre Realty respeita a sua privacidade e utiliza os seus dados pessoais para contatá-lo por e-mail ou telefone aqui registrados. Para saber mais, acesse a nossa{' '}\n            <a\n              href=\"https://www.mitrerealty.com.br/politica-de-privacidade\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              Política de Privacidade\n            </a>. Ao clicar em {'\"'}enviar{'\"'}, você concorda em permitir que a Mitre Realty, armazene e processe os dados pessoais fornecidos por você para finalidade informada</p>\n\n        </Form>\n      </FormContainer>\n    </>\n  );\n});\n\nMitreFormComponent.displayName = \"MitreFormComponent\";\n\nexport default MitreFormComponent;\n","import { useState } from \"react\";\n\nexport function useError() {\n  const [error, setError] = useState<Error | null>(null);\n\n  const handleError = (err: unknown) => {\n    const errorObj = err instanceof Error ? err : new Error(String(err));\n    setError(errorObj);\n    console.error(errorObj);\n  };\n\n  const clearError = () => setError(null);\n\n  return { error, handleError, clearError };\n}\n","export type UTM = {\n    utm_source: string; // default 'direto'\n    utm_campaign?: string;\n    utm_medium?: string;\n    utm_term?: string;\n    createdAt: string; // ISO 8601\n  };\n  \n  const UTM_STORAGE_KEY = 'utm_meta';\n  const TTL_DAYS = 7;\n  \n  export const isBrowser = () =>\n    typeof window !== 'undefined' && typeof document !== 'undefined';\n  \n  const daysToMs = (days: number) => days * 24 * 60 * 60 * 1000;\n  \n  export function readStoredUtm(maxAgeDays = TTL_DAYS): { data: UTM | null; isValid: boolean } {\n    if (!isBrowser()) return { data: null, isValid: false };\n    try {\n      const raw = window.localStorage.getItem(UTM_STORAGE_KEY);\n      if (!raw) return { data: null, isValid: false };\n      const parsed = JSON.parse(raw) as UTM;\n      if (!parsed?.createdAt) return { data: null, isValid: false };\n      const age = Date.now() - new Date(parsed.createdAt).getTime();\n      const isValid = age <= daysToMs(maxAgeDays);\n      return { data: isValid ? parsed : null, isValid };\n    } catch {\n      return { data: null, isValid: false };\n    }\n  }\n  \n  export function saveUtm(data: Partial<UTM>, now = new Date()): UTM | null {\n    if (!isBrowser()) return null;\n    const payload: UTM = {\n      utm_source: data.utm_source || 'direto',\n      utm_campaign: data.utm_campaign,\n      utm_medium: data.utm_medium,\n      utm_term: data.utm_term,\n      createdAt: now.toISOString(),\n    };\n    try {\n      window.localStorage.setItem(UTM_STORAGE_KEY, JSON.stringify(payload));\n    } catch { /* ignore quota errors */ }\n    return payload;\n  }\n  \n  export function parseUrlUtm(loc?: Location): Partial<UTM> {\n    if (!isBrowser()) return {};\n    const locationObj = loc || window.location;\n    const sp = new URL(locationObj.href).searchParams;\n    const utm_source = sp.get('utm_source') || undefined;\n    const utm_campaign = sp.get('utm_campaign') || undefined;\n    const utm_medium = sp.get('utm_medium') || undefined;\n    const utm_term = sp.get('utm_term') || undefined;\n    return { utm_source, utm_campaign, utm_medium, utm_term };\n  }\n  \n  export function inferSourceFromReferrer(ref?: string): string | undefined {\n    if (!isBrowser()) return undefined;\n    const href = (ref ?? document.referrer ?? '').toLowerCase();\n    if (!href) return 'direto';\n    const hostMatch = href.match(/https?:\\/\\/([^/]+)/);\n    const host = hostMatch?.[1] ?? href;\n    if (/google\\./.test(host) || /^g\\.co$/.test(host) || /^goo\\.gl$/.test(host)) return 'google';\n\n    if (\n      /(^|\\.)facebook\\.com$/.test(host) ||\n      /(^|\\.)m\\.facebook\\.com$/.test(host) ||\n      /(^|\\.)fb\\.com$/.test(host) ||\n      /(^|\\.)fb\\.me$/.test(host) ||\n      /(^|\\.)fb\\.watch$/.test(host) ||\n      /(^|\\.)m\\.me$/.test(host)\n    ) return 'facebook';\n\n    if (\n      /(^|\\.)instagram\\.com$/.test(host) ||\n      /(^|\\.)l\\.instagram\\.com$/.test(host) ||\n      /(^|\\.)instagr\\.am$/.test(host) ||\n      /^ig\\.me$/.test(host)\n    ) return 'instagram';\n\n    if (/(^|\\.)linkedin\\.com$/.test(host) || /^lnkd\\.in$/.test(host)) return 'linkedin';\n\n    if (/^t\\.co$/.test(host) || /(^|\\.)twitter\\.com$/.test(host) || /(^|\\.)x\\.com$/.test(host)) return 'twitter';\n\n    if (/(^|\\.)youtube\\.com$/.test(host) || /^youtu\\.be$/.test(host)) return 'youtube';\n\n    if (/(^|\\.)mail\\.google\\.com$/.test(host)) return 'email';\n\n    if (/(^|\\.)outlook\\.live\\.com$/.test(host) || /(^|\\.)outlook\\.office\\.com$/.test(host)) return 'email';\n\n    if (/^(wa\\.me)$/.test(host) || /(^|\\.)api\\.whatsapp\\.com$/.test(host) || /(^|\\.)web\\.whatsapp\\.com$/.test(host)) return 'whatsapp';\n\n    if (/^t\\.me$/.test(host)) return 'telegram';\n\n    if (/(^|\\.)tiktok\\.com$/.test(host)) return 'tiktok';\n    return 'direto';\n  }\n  \n  /** Resolve UTM e persiste quando necessário. Prioridade: localStorage (válido) > URL > referrer */\n  export function resolveUtmWithPriority(\n    now = new Date(),\n    propOverride?: Partial<UTM>\n  ): { data: UTM; source: 'localStorage' | 'url' | 'referrer' } {\n    // 1) Se houver UTM válido no localStorage (<= 7 dias), usar SEM sobrescrever\n    const stored = readStoredUtm();\n    if (stored.data) {\n      const merged = { ...stored.data, ...propOverride } as UTM;\n      return { data: merged, source: 'localStorage' };\n    }\n  \n    // 2) Se NÃO houver válido no localStorage, tentar URL. Se houver, salvar e usar\n    const fromUrl = parseUrlUtm();\n    if (fromUrl.utm_source) {\n      const saved = saveUtm(fromUrl, now)!;\n      const merged = { ...saved, ...propOverride } as UTM;\n      return { data: merged, source: 'url' };\n    }\n  \n    // 3) Fallback: inferir do referrer, apenas ler (não salvar no localStorage)\n    const utm_source = inferSourceFromReferrer();\n    const payload: UTM = {\n      utm_source: utm_source || 'direto',\n      utm_campaign: propOverride?.utm_campaign,\n      utm_medium: propOverride?.utm_medium,\n      utm_term: propOverride?.utm_term,\n      createdAt: now.toISOString(),\n    };\n    return { data: payload, source: 'referrer' };\n  }","type directionType = \"column\" | \"row\";\ntype alignItemsType = \"center\" | \"flex-start\";\n\ntype jutifyContentType = \"center\" | \"space-between\";\n\nexport function flex(\n  direction: directionType = \"row\",\n  alignItems?: alignItemsType,\n  justifyContent?: jutifyContentType\n) {\n  return `\n    align-items:${alignItems || null};\n    display:flex;\n    flex-direction:${direction};\n    justify-content:${justifyContent || null};\n  `;\n}\n\nexport const alignX = `\n  left:50%;\n  transform:translateX(-50%);\n`;\n\nexport const alignXAndY = `\n  left:50%;\n  top:50%;\n  transform:translate(-50%, -50%);\n`;\n\nexport const darkEffect = `\n  &:hover {\n    cursor:pointer;\n    filter:brightness(98%);\n  }\n\n  &:active {\n    filter:brightness(95%);\n  }\n`;\n\nexport const opacityEffect = `\n  &:hover {\n    cursor:pointer;\n    opacity:.9;\n  }\n\n  &:active {\n    opacity:.7;\n  }\n`;\n\nexport const modalZIndex = 9999;\n\nexport const breakpoints = {\n  tablet: \"1024px\",\n};\n","import { flex, opacityEffect } from \"../styles/utils\";\nimport styled from \"styled-components\";\n\nexport const FormContainer = styled.div<{\n  $backgroundColor: string;\n  $innerPadding: string;\n}>`\n  ${flex(\"column\")}\n  align-items: stretch;\n  justify-content: flex-start;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  background: ${(props) => props.$backgroundColor || \"var(--gray-180)\"};\n\n  padding: ${(props) => props.$innerPadding || \"1rem\"};\n\n  /* Hide scrollbars for WebKit browsers */\n  ::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* Hide scrollbars for Firefox */\n  scrollbar-width: none;\n\n  box-sizing: border-box;\n  height: 100%;\n`;\n\nexport const HeaderContainer = styled.div`\n  margin-bottom: 1rem;\n`;\n\nexport const ButtonContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  margin-top: 0.75rem;\n\n  button {\n    ${opacityEffect}\n    color: var(--black);\n    font-weight: 600;\n    border: none;\n    border-radius: 8px;\n    width: 60%;\n    margin-top: 10px;\n    margin-bottom: 10px;\n  }\n`;\n\nexport const Form = styled.form<{ $textColor: string }>`\n  label {\n    font-weight: 700;\n  }\n\n  input {\n    margin-bottom: 0.75rem;\n  }\n\n  p {\n    font-family: \"Montserrat\", sans-serif;\n    font-style: italic;\n    font-weight: 200;\n    font-size: 0.8rem;\n    color: ${(props) => props.$textColor || \"var(--black)\"};\n    text-align: start;\n  }\n\n  a {\n    font-family: \"Montserrat\", sans-serif;\n    font-style: italic;\n    font-weight: 200;\n    font-size: 0.8rem;\n    color: ${(props) => props.$textColor || \"var(--black)\"};\n  }\n\n  h6 {\n    text-align: start;\n    margin-left: 10px;\n    color: ${(props) => props.$textColor || \"var(--black)\"};\n  }\n\n  & > div {\n    margin-bottom: 10px;,\n  }\n`;\n\nexport const Title = styled.h2<{ $textColor: string }>`\n  font-size: 1.25rem;\n  font-weight: 700;\n  line-height: 24px;\n  letter-spacing: 0em;\n  color: ${(props) => props.$textColor || \"var(--black)\"};\n`;\n\nexport const Text = styled.p<{ $textColor: string }>`\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 23px;\n  letter-spacing: 0em;\n  margin-top: 10px;\n  color: ${(props) => props.$textColor || \"var(--black)\"};\n`;\n","import { createGlobalStyle } from \"styled-components\";\nimport React, { useEffect } from \"react\";\n\nexport const GlobalStyles = createGlobalStyle`\n  :root {\n    --red: #e52e4d;\n    --white: #FFF;\n    --black: #2F2F2F;\n    --black-2:#1E1E1E;\n    --alphaBlack: #000000;\n    --black-2:#1E1E1E;\n    --black-3:#353535;\n\n    --yellow-400:#FFD789;\n    --yellow-500: #F6C76B;\n    --gray-40:#F0F0F0;\n    --gray-45:#767676;\n    --gray-50: #686A69;\n    --gray-60: #8F8F8F;\n    --gray-100: #B6B6B6;\n    --gray-150: #B9B9B9;\n    --gray-180: #CECECE;\n    --gray-200: #D2D2D2;\n    --gray-300: #EBEBEB;\n    --gray-400: #ECECEC;\n    --gray-500: #F4F4F4;\n    --gray-550:#6F6F6F;\n    --gray-600:#686868;\n    --gray-700: #535353;\n    --gray-800:#9D9D9D;\n    --shadow-500: 0px 4px 8px rgba(91, 91, 91, 0.2);\n    --green:#57C06E;\n    --green-2:#2DCE68;\n    --blue:#007BFF;\n\n    --transparent: transparent;\n  }\n\n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n\n  html {\n    scroll-behavior: smooth;\n\n    @media (max-width: 1080px) {\n      font-size: 93.75%;\n    }\n    @media (max-width: 720px) {\n      font-size: 87.5%;\n    }\n  }\n\n  body {\n    background: var(--white);\n    -webkit-font-smoothing: antialiased;\n  }\n\n  body, input, textarea, select, button {\n    font-family: \"Montserrat\", sans-serif;\n    font-weight: 400;\n  } \n\n  h1, h2, h3, h4, h5, h6, strong {\n    font-weight: 600;\n  }\n\n  button {\n    cursor: pointer;\n  }\n\n  [disabled] {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n\n  .hidden {\n    overflow: hidden;\n  }\n\n  ::-webkit-scrollbar {\n    -webkit-appearance: none;\n    background: var(--gray-500);\n    width: 6px;\n    height: 10px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: var(--gray-50);\n  }\n\n  .aligncenter {\n    text-align: center;\n  }\n\n  .width-190px {\n    width:190px;\n  }\n\n  .hidden-content {\n    display:none !important;\n  }\n\n  .global-margin-bottom {\n    margin-bottom:20px;\n  }\n\n  .background-light-gray {\n    background:#F4F4F4;\n  }\n\n  .full-width-and-height {\n    height:100%;\n    width:100%;\n  }\n\n  .flex-direction-column {\n    flex-direction:column;\n  }\n\n  .bold {\n    font-weight:700;\n  }\n\n  .margin-center-x {\n    margin:0 auto;\n  }\n\n  .border-none {\n    border:none;\n  }\n\n  .text-center {\n    text-align:center;\n  }\n\n  .relative {\n    position:relative;\n  }\n\n  /* accessibility */\n  body ._access-menu p._text-center{\n    font-family: \"Montserrat\", sans-serif;\n    font-style: italic;\n    font-size: 1.2rem!important;\n    margin-top: 6px;\n    margin-bottom: 3px;\n  } \n\n`;\n\nconst FontLoader: React.FC = () => {\n  useEffect(() => {\n    const link = document.createElement(\"link\");\n    link.href =\n      \"https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap\";\n    link.rel = \"stylesheet\";\n    document.head.appendChild(link);\n  }, []);\n\n  return null;\n};\n\nexport default FontLoader;\n","import {\n  FormEvent,\n  forwardRef,\n  ForwardRefRenderFunction,\n  InputHTMLAttributes,\n  useCallback,\n} from \"react\";\nimport { FieldError } from \"react-hook-form\";\nimport { cep, cpf, currency, date } from \"./masks\";\n\nimport {\n  FormControl,\n  FormErrorMessage,\n  FormLabel,\n  Input as FormInput,\n} from \"./styles\";\n\ntype InputType =\n  | \"text\"\n  | \"email\"\n  | \"password\"\n  | \"number\"\n  | \"tel\"\n  | \"url\"\n  | \"date\"\n  | \"time\"\n  | \"datetime-local\";\n\ninterface InputProps extends InputHTMLAttributes<HTMLInputElement> {\n  id: string;\n  label?: string;\n  error?: string | FieldError;\n  showErrorMessage?: boolean;\n  labelTextColor?: string;\n  backgroundColor?: string;\n  borderColor?: string;\n  focusBorderColor?: string;\n  inputTextColor?: string;\n  inputPlaceholderColor?: string;\n  mask?: \"cep\" | \"currency\" | \"cpf\" | \"phone\" | \"date\";\n  type?: InputType;\n}\n\nconst InputBase: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (\n  { id,\n    label,\n    error,\n    showErrorMessage = true,\n    labelTextColor,\n    backgroundColor,\n    borderColor,\n    focusBorderColor,\n    inputPlaceholderColor,\n    inputTextColor,\n    mask = \"\",\n    type = \"text\",\n    ...rest\n  },\n  ref\n) => {\n  const handleKeyUp = useCallback(\n    (e: FormEvent<HTMLInputElement>) => {\n      if (mask === \"cep\") cep(e);\n      if (mask === \"currency\") currency(e);\n      if (mask === \"cpf\") cpf(e);\n      if (mask === \"date\") date(e);\n    },\n    [mask]\n  );\n\n  return (\n    <FormControl isInvalid={!!error}>\n      {!!label && <FormLabel htmlFor={id} $textColor={labelTextColor}>{label}</FormLabel>}\n\n      {!mask ? (\n        <FormInput\n          id={id}\n          ref={ref}\n          type={type}\n          aria-invalid={!!error && showErrorMessage ? \"true\" : \"false\"}\n          autoComplete={rest.autoComplete || \"on\"}\n          $backgroundColor={backgroundColor}\n          $borderColor={borderColor}\n          $focusBorderColor={focusBorderColor}\n          $placeholderColor={inputPlaceholderColor}\n          $textColor={inputTextColor}\n          {...rest}\n        />\n      ) : (\n        <FormInput\n          id={id}\n          ref={ref}\n          type={type}\n          aria-invalid={!!error && showErrorMessage ? \"true\" : \"false\"}\n          autoComplete={rest.autoComplete || \"on\"}\n          onKeyUp={handleKeyUp}\n          $backgroundColor={backgroundColor}\n          $borderColor={borderColor}\n          $focusBorderColor={focusBorderColor}\n          $placeholderColor={inputPlaceholderColor}\n          $textColor={inputTextColor}\n          {...rest}\n        />\n      )}\n\n      {!!error && showErrorMessage && (\n        <FormErrorMessage data-testid=\"error-message\">\n          {typeof error === 'string' ? error : error.message}\n        </FormErrorMessage>\n      )}\n    </FormControl>\n  );\n};\n\nexport const Input = forwardRef(InputBase);\n","import { FormEvent } from \"react\";\n\nexport function cep(e: FormEvent<HTMLInputElement>) {\n  e.currentTarget.maxLength = 9;\n  let value = e.currentTarget.value;\n  value = value.replace(/\\D/g, \"\");\n  value = value.replace(/^(\\d{5})(\\d)/, \"$1-$2\");\n  e.currentTarget.value = value;\n  return e;\n}\n\nexport function currency(e: FormEvent<HTMLInputElement>) {\n  let value = e.currentTarget.value;\n  value = value.replace(/\\D/g, \"\");\n  value = value.replace(/(\\d)(\\d{2})$/, \"$1,$2\");\n  value = value.replace(/(?=(\\d{3})+(\\D))\\B/g, \".\");\n\n  e.currentTarget.value = value;\n  return e;\n}\n\nexport function cpf(e: FormEvent<HTMLInputElement>) {\n  e.currentTarget.maxLength = 14;\n  let value = e.currentTarget.value;\n  if (!value.match(/^(\\d{3}).(\\d{3}).(\\d{3})-(\\d{2})$/)) {\n    value = value.replace(/\\D/g, \"\");\n    value = value.replace(/(\\d{3})(\\d)/, \"$1.$2\");\n    value = value.replace(/(\\d{3})(\\d)/, \"$1.$2\");\n    value = value.replace(/(\\d{3})(\\d{2})$/, \"$1-$2\");\n\n    e.currentTarget.value = value;\n  }\n  return e;\n}\n\nexport function date(e: FormEvent<HTMLInputElement>) {\n  let value = e.currentTarget.value;\n  value = value.replace(/\\D/g, \"\");\n  value = value.replace(/(\\d{2})(\\d)/, \"$1/$2\");\n  value = value.replace(/(\\d{2})(\\d)/, \"$1/$2\");\n  e.currentTarget.value = value;\n  return e;\n}\n\nexport function phone(e: FormEvent<HTMLInputElement>) {\n  let value = e.currentTarget.value;\n  value = value.replace(/\\D/g, \"\");\n  value = value.replace(/(\\d{2})(\\d)/, \"$1/$2\");\n  value = value.replace(/(\\d{2})(\\d)/, \"$1/$2\");\n  e.currentTarget.value = value;\n  return e;\n}\n","import { InputHTMLAttributes } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nexport const FormLabel = styled.label<{ $textColor?: string }>`\n  font-family: \"Montserrat\", sans-serif;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 1rem;\n  color: ${(props) => props.$textColor || \"var(--black)\"};\n  display: block;\n  margin-bottom: 0.5rem;\n  text-align: left;\n`;\n\nexport const Input = styled.input<\n  InputHTMLAttributes<HTMLInputElement> & { \n    $backgroundColor?: string, \n    $borderColor?: string, \n    $focusBorderColor?: string, \n    $placeholderColor?: string\n    $textColor?: string,\n  }\n>`\n  font-family: \"Montserrat\", sans-serif;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  background: ${(props) => props.$backgroundColor || \"var(--white)\"};\n  color: ${(props) => props.$textColor || \"var(--black)\"};\n  padding: 0.5rem;\n  border-radius: 0.125rem;\n  border: 1px solid ${(props) => props.$borderColor || \"transparent\"};\n  display: block;\n  height: 3.125rem;\n  width: 100%;\n\n  &:focus {\n    border-radius: 0.125rem;\n    border: 2px solid ${(props) => props.$focusBorderColor || \"var(--yellow-500)\"};\n    outline: none;\n  }\n\n  &::placeholder {\n    font-size: 1rem;\n    line-height: 1.5rem;\n    color: ${(props) => props.$placeholderColor || \"var(--gray-100)\"};\n    font-weight: 800;\n  }\n\n  /* Autofill styles */\n  &:-webkit-autofill {\n    background: ${(props) => props.$backgroundColor || \"var(--white)\"} !important;\n    color: ${(props) => props.$textColor || \"var(--black)\"} !important;\n    -webkit-text-fill-color: ${(props) => props.$textColor || \"var(--black)\"} !important;\n    transition: background-color 5000s ease-in-out 0s; /* Prevent flashing */\n  }\n\n  &:-webkit-autofill::first-line {\n    font-family: \"Montserrat\", sans-serif;\n    font-size: 1rem;\n    font-weight: 500;\n  }\n`;\n\nexport const FormErrorMessage = styled.small`\n  font-size: 0.75rem;\n  line-height: 1.125rem;\n  color: var(--red);\n  margin-top: 0.25rem;\n  display: block;\n`;\n\nexport const FormControl = styled.div.withConfig({\n  shouldForwardProp: (prop) => ![\"isInvalid\"].includes(prop),\n})<{ isInvalid?: boolean }>`\n  ${FormLabel} {\n    ${(props) =>\n      props.isInvalid &&\n      css`\n        color: var(--red);\n      `};\n  }\n\n  ${Input} {\n    ${(props) =>\n      props.isInvalid &&\n      css`\n        border: 1px solid var(--red);\n\n        &:not(:focus)::placeholder {\n          color: var(--red);\n          font-weight: 600;\n        }\n      `};\n\n    &:focus {\n      ${(props) =>\n        props.isInvalid &&\n        css`\n          border: 1px solid var(--red);\n        `};\n    }\n  }\n`;\n","import { darken } from \"polished\";\nimport styled, { css } from \"styled-components\";\n\ntype ButtonProps = {\n  hasIcon?: boolean;\n  isSubmitting?: boolean;\n  hasSubmittingMessage?: boolean;\n  bgColor?: string;\n  bordercolor?: string;\n  color?: string;\n  height?: string;\n};\n\nexport const Icon = styled.span`\n  font-size: 0;\n  line-height: 0;\n  transition: all 0.25s ease;\n\n  transform: translate3d(-30px, 0px, 0px);\n  visibility: hidden;\n  opacity: 0;\n  margin-right: 0.625rem;\n`;\n\nexport const Text = styled.span`\n  font-family: \"Montserrat\", sans-serif;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  margin-bottom: -2px;\n\n  transition: all 0.25s ease;\n`;\n\nexport const TextSubmitting = styled.span`\n  font-family: \"Montserrat\", sans-serif;\n  font-weight: 400;\n  font-size: 1rem;\n\n  transition: all 0.25s ease;\n`;\n\nexport const LoadingIcon = styled.span.withConfig({\n  shouldForwardProp: (prop) => prop !== \"hasText\",\n})<{ hasText?: boolean }>`\n  display: block;\n\n  width: 1rem;\n  height: 1rem;\n  border: 0.125rem solid var(--white);\n  border-radius: 50%;\n  animation: loadingAnimation 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  border-color: var(--white) transparent transparent transparent;\n\n  margin-right: ${(props) => (props.hasText ? \"0.625rem\" : \"0\")};\n\n  @keyframes loadingAnimation {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n`;\n\nexport const Button = styled.button.withConfig({\n  shouldForwardProp: (prop) =>\n    ![\n      \"hasIcon\",\n      \"isSubmitting\",\n      \"hasSubmittingMessage\",\n      \"bgColor\",\n      \"bordercolor\",\n      \"color\",\n      \"height\",\n    ].includes(prop),\n})<ButtonProps>`\n  background: ${(props) => darken(0.1, props?.bgColor || \"#F6C76B\")};\n  color: ${(props) => props?.color || \"#2F2F2F\"};\n  border: 1px solid ${(props) => darken(0.1, props?.bordercolor || \"#F6C76B\")};\n  border-radius: 2px;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 0.75rem;\n  height: ${(props) => props?.height || \"3.125rem\"};\n  position: relative;\n  font-size: 0;\n  line-height: 0;\n\n  transition: all 0.25s;\n\n  ${Icon} {\n    display: ${(props) => (props?.hasIcon ? \"block\" : \"\")};\n  }\n\n  ${Text} {\n    transform: ${(props) =>\n      props?.hasIcon ? \"translate3d(-4.5px, 0px, 0px)\" : \"unset\"};\n\n    @media print, screen and (min-width: 40em) {\n      transform: ${(props) =>\n        props?.hasIcon ? \"translate3d(-14.5px, 0px, 0px)\" : \"unset\"};\n    }\n\n    color: ${(props) => props?.color || \"#2F2F2F\"};\n  }\n\n  &:hover {\n    background: ${(props) => darken(0.2, props?.bgColor || \"#F6C76B\")};\n    border-color: ${(props) => darken(0.2, props?.bordercolor || \"#F6C76B\")};\n\n    ${Icon} {\n      opacity: 1;\n      visibility: visible;\n      transform: translate3d(0px, 0px, 0px);\n    }\n\n    ${Text} {\n      transform: ${(props) =>\n        props?.hasIcon ? \"translate3d(-5px, 0px, 0px)\" : \"unset\"};\n    }\n  }\n\n  ${Text} {\n    ${(props) =>\n      props.isSubmitting &&\n      !props.hasSubmittingMessage &&\n      css`\n        transform: unset;\n        opacity: 0;\n      `}\n  }\n\n  ${LoadingIcon} {\n    ${(props) =>\n      props.isSubmitting &&\n      !props.hasSubmittingMessage &&\n      css`\n        display: flex;\n        -webkit-box-align: center;\n        align-items: center;\n        position: absolute;\n      `}\n  }\n`;\n","import { ButtonHTMLAttributes, ReactElement, ReactNode } from \"react\";\n\nimport {\n  Button as ButtonComponent,\n  Icon,\n  LoadingIcon,\n  Text,\n  TextSubmitting,\n} from \"./styles\";\n\ntype ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n  children: ReactNode;\n  icon?: ReactElement;\n  isSubmitting?: boolean;\n  submittingMessage?: string;\n  bgColor?: string;\n  bordercolor?: string;\n  color?: string;\n  height?: string;\n};\n\nexport function Button({\n  children,\n  icon,\n  isSubmitting = false,\n  submittingMessage = \"\",\n  disabled = false,\n  color = \"var(--black)\",\n  ...rest\n}: ButtonProps) {\n  return (\n    <ButtonComponent\n      isSubmitting={isSubmitting}\n      hasSubmittingMessage={submittingMessage.length > 0}\n      disabled={isSubmitting || disabled}\n      aria-disabled={isSubmitting || disabled}\n      hasIcon={!!icon}\n      color={color}\n      {...rest}\n    >\n      {icon && !isSubmitting && <Icon data-testid=\"button-icon\">{icon}</Icon>}\n      {isSubmitting && <LoadingIcon hasText={submittingMessage.length > 0} />}\n      {(!isSubmitting || submittingMessage.length === 0) && (\n        <Text className=\"text\">{children}</Text>\n      )}\n      {isSubmitting && submittingMessage.length > 0 && (\n        <TextSubmitting>{submittingMessage}</TextSubmitting>\n      )}\n    </ButtonComponent>\n  );\n}\n","import React, { useEffect, useState, useCallback } from 'react';\nimport { AlertContainer, DismissButton } from './styles';\nimport { AlertType } from './styles';\n\nimport { HiX } from 'react-icons/hi';\n\ninterface AlertProps {\n  type?: AlertType;\n  children: React.ReactNode;\n  className?: string;\n  dismissible?: boolean;\n  onDismiss?: () => void;\n  autoDismiss?: number;\n}\n\nexport const Alert = ({\n  type = 'info',\n  children,\n  className,\n  dismissible = false,\n  onDismiss,\n  autoDismiss\n}: AlertProps) => {\n  const [isClosing, setIsClosing] = useState(false);\n\n  const handleDismiss = useCallback(() => {\n    setIsClosing(true);\n    setTimeout(() => onDismiss?.(), 300);\n  }, [onDismiss]);\n\n  useEffect(() => {\n    if (autoDismiss) {\n      const timer = setTimeout(handleDismiss, autoDismiss);\n      return () => clearTimeout(timer);\n    }\n  }, [autoDismiss, handleDismiss]);\n\n  return (\n    <AlertContainer\n      $type={type}\n      $dismissible={dismissible}\n      $isClosing={isClosing}\n      className={className}\n      role=\"alert\"\n    >\n      {children}\n      {dismissible && (\n        <DismissButton \n          onClick={handleDismiss} \n          aria-label=\"Dismiss alert\"\n        >\n          <HiX /> \n        </DismissButton>\n      )}\n    </AlertContainer>\n  );\n};","import styled, { css, keyframes } from \"styled-components\";\n\nexport type AlertType = \"error\" | \"warning\" | \"info\" | \"success\";\n\nconst fadeIn = keyframes`\n  from { opacity: 0; transform: translateY(-10px); }\n  to { opacity: 1; transform: translateY(0); }\n`;\n\nconst fadeOut = keyframes`\n  from { opacity: 1; transform: translateY(0); }\n  to { opacity: 0; transform: translateY(-10px); }\n`;\n\ninterface AlertContainerProps {\n  $type: AlertType;\n  $dismissible?: boolean;\n  $isClosing: boolean;\n}\n\nconst typeStyles = {\n  error: css`\n    background-color: var(--red);\n    border: 1px solid var(--red);\n    color: var(--white);\n    svg {\n      color: var(--white);\n    }\n  `,\n  warning: css`\n    background-color: var(--yellow-500);\n    border: 1px solid var(--yellow-400);\n    color: var(--black);\n    svg {\n      color: var(--black);\n    }\n  `,\n  info: css`\n    background-color: var(--blue);\n    border: 1px solid var(--blue);\n    color: var(--white);\n    svg {\n      color: var(--white);\n    }\n  `,\n  success: css`\n    background-color: var(--green);\n    border: 1px solid var(--green-2);\n    color: var(--white);\n    svg {\n      color: var(--white);\n    }\n  `,\n};\n\nexport const AlertContainer = styled.div<AlertContainerProps>`\n  position: fixed;\n  width: 500px;\n  top: 15px;\n  right: 15px;\n  padding: 1rem ${({ $dismissible }) => ($dismissible ? \"2.5rem\" : \"1rem\")} 1rem\n    1rem;\n  margin-bottom: 1rem;\n  animation: ${({ $isClosing }) => ($isClosing ? fadeOut : fadeIn)} 0.3s\n    ease-out;\n  animation-fill-mode: forwards;\n  align-items: center;\n  gap: 0.5rem;\n  box-shadow: var(--shadow-500);\n  border-radius: 0.5rem;\n  font-size: 1rem;\n  font-weight: 500;\n\n  ${({ $type }) => typeStyles[$type]}\n`;\n\nexport const DismissButton = styled.button`\n  position: absolute;\n  background: transparent;\n  right: 10px;\n  border: none;\n  cursor: pointer;\n  color: inherit;\n  opacity: 1;\n  transition: opacity 0.2s;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  svg {\n    width: 1rem;\n    height: 1rem;\n  }\n`;\n","import {\n  forwardRef,\n  ForwardRefRenderFunction,\n  InputHTMLAttributes,\n} from \"react\";\nimport { FieldError } from \"react-hook-form\";\nimport { StyledPhoneInput, FormControl, FormLabel, FormErrorMessage } from \"./styles\";\nimport { PhoneInputRefType, ParsedCountry } from \"react-international-phone\";\n\ninterface PhoneInputChange {\n  phone: string;\n  dialCode: string;\n  inputValue: string;\n}\n\ninterface PhoneInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {\n  id: string;\n  label?: string;\n  error?: string | FieldError;\n  showErrorMessage?: boolean;\n  value: string;\n  onChange?: (value: PhoneInputChange) => void;\n  labelTextColor?: string;\n  backgroundColor?: string;\n  borderColor?: string;\n  focusBorderColor: string;\n  inputPlaceholderColor?: string;\n  inputTextColor?: string;\n}\n\nconst PhoneInputBase: ForwardRefRenderFunction<PhoneInputRefType, PhoneInputProps> = (\n  { id,\n    label,\n    error,\n    showErrorMessage = true,\n    labelTextColor,\n    backgroundColor,\n    borderColor,\n    focusBorderColor,\n    inputPlaceholderColor,\n    inputTextColor,\n    value,\n    ...rest\n  },\n  ref\n) => {\n  return (\n    <FormControl isInvalid={!!error} >\n      {!!label && <FormLabel htmlFor={id} $textColor={labelTextColor}>{label}</FormLabel>}\n      <StyledPhoneInput\n        ref={ref}\n        defaultCountry=\"br\"\n        disableCountryGuess={true}\n        disableDialCodeAndPrefix={true}\n        showDisabledDialCodeAndPrefix={false}\n        placeholder={rest.placeholder}\n        aria-invalid={!!error && showErrorMessage ? \"true\" : \"false\"}\n        value={String(value)}\n        onChange={(phone: string, meta: { country: ParsedCountry; inputValue: string }) => {\n          if (typeof rest.onChange === \"function\") {\n            rest.onChange({\n              phone,\n              dialCode: meta.country.dialCode,\n              inputValue: meta.inputValue,\n            });\n          }\n        }}\n        inputProps={{\n          id,\n          name: rest.name || 'phone',\n          required: rest.required,\n          autoFocus: rest.autoFocus,\n          autoComplete: rest.autoComplete || \"tel\",\n        }}\n        $backgroundColor={backgroundColor}\n        $borderColor={borderColor}\n        $focusBorderColor={focusBorderColor}\n        $placeholderColor={inputPlaceholderColor}\n        $textColor={inputTextColor}\n      />\n      {!!error && showErrorMessage && (\n        <FormErrorMessage data-testid=\"error-message\">\n          {typeof error === 'string' ? error : error?.message}\n        </FormErrorMessage>\n      )}\n    </FormControl>\n  );\n};\n\nexport const PhoneInput = forwardRef(PhoneInputBase);\n","import styled, { css } from \"styled-components\";\nimport { PhoneInput } from \"react-international-phone\";\nimport \"react-international-phone/style.css\";\n\nexport const FormLabel = styled.label<{ $textColor?: string }>`\n  font-family: \"Montserrat\", sans-serif;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 1rem;\n  color: ${(props) => props.$textColor || \"var(--black)\"};\n  display: block;\n  margin-bottom: 0.5rem;\n  text-align: left;\n`;\n\nexport const StyledPhoneInput = styled(PhoneInput)<{ \n  $backgroundColor?: string, \n  $borderColor?: string, \n  $focusBorderColor?: string, \n  $placeholderColor?: string\n  $textColor?: string,\n}>`\n  width: 100%;\n  height: 3.125rem;\n  background: ${(props) => props.$backgroundColor || \"var(--white)\"};\n  font-family: \"Montserrat\", sans-serif;\n  border: 1px solid ${(props) => props.$borderColor || \"transparent\"};\n  border-radius: 0.125rem;\n\n  &:focus-within {\n    border-radius: 0.125rem;\n    border: 2px solid ${(props) => props.$focusBorderColor || \"var(--yellow-500)\"};\n    outline: none;\n\n    .react-international-phone-country-selector-button {\n      border-right: 1px solid ${(props) => props.$focusBorderColor || \"var(--yellow-500)\"};\n    }\n  }\n\n  /* Style for the inner phone input container */\n  .react-international-phone-input-container {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    overflow: hidden;\n    font-family: \"Montserrat\", sans-serif;\n    font-size: 1rem;\n    font-weight: 500;\n    color: ${(props) => props.$textColor || \"var(--black)\"};\n    background: ${(props) => props.$backgroundColor || \"var(--white)\"};\n  }\n\n  /* Style for the country selector button */\n  .react-international-phone-country-selector-button {\n    height: 100%;\n    background: ${(props) => props.$backgroundColor || \"var(--white)\"};\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-family: \"Montserrat\", sans-serif;\n    font-size: 1rem;\n    font-weight: 500;\n    cursor: pointer;\n    outline: none;\n    border: none;\n    border-right: 1px solid ${(props) => props.$borderColor || \"var(--transparent)\"};\n  }\n\n  /* Style for the input itself */\n  input.react-international-phone-input {\n    flex: 1;\n    height: 100%;\n    padding: 0 0.5rem;\n    margin: 0;\n    background: ${(props) => props.$backgroundColor || \"var(--white)\"};\n    font-family: \"Montserrat\", sans-serif;\n    font-style: normal;\n    font-weight: 500;\n    font-size: 1rem;\n    line-height: 1.5rem;\n    color: ${(props) => props.$textColor || \"var(--black)\"};\n    outline: none;\n    border: none;\n    border-radius: 0.125rem;\n\n    &::placeholder {\n      font-size: 1rem;\n      line-height: 1.5rem;\n      color: ${(props) => props.$placeholderColor || \"var(--gray-100)\"};\n      font-weight: 800;\n    }\n\n    &:-webkit-autofill {\n      background: ${(props) => props.$backgroundColor || \"var(--white)\"} !important;\n      -webkit-text-fill-color: ${(props) => props.$textColor || \"var(--black)\"} !important;\n      transition: background-color 5000s ease-in-out 0s;\n    }\n\n    &:-webkit-autofill::first-line {\n      font-family: \"Montserrat\", sans-serif;\n      font-size: 1rem;\n      font-weight: 500;\n    }\n  }\n`;\n\nexport const FormErrorMessage = styled.small`\n  font-size: 0.75rem;\n  line-height: 1.125rem;\n  color: var(--red);\n  margin-top: 0.25rem;\n  display: block;\n`;\n\nexport const FormControl = styled.div.withConfig({\n  shouldForwardProp: (prop) => ![\"isInvalid\"].includes(prop),\n})<{ isInvalid?: boolean }>`\n  ${FormLabel} {\n    ${(props) =>\n      props.isInvalid &&\n      css`\n        color: var(--red);\n      `};\n  }\n\n  ${StyledPhoneInput} {\n    ${(props) =>\n      props.isInvalid &&\n      css`\n        border: 1px solid var(--red);\n\n        &:not(:focus)::placeholder {\n          color: var(--red);\n          font-weight: 600;\n        }\n      `};\n\n    .react-international-phone-input-container {\n      ${(props) =>\n        props.isInvalid &&\n        css`\n          border: 1px solid var(--red);\n\n          &:not(:focus)::placeholder {\n            color: var(--red);\n            font-weight: