mitre-form-component 0.1.2 → 0.1.4

package/README.md

@@ -70,6 +70,7 @@ const products = JSON.parse(process.env.VITE_PRODUCT_ID!);
   inputFocusBorderColor="#76B"  //[Opcional]
   inputPlaceholderColor="#FFF"  //[Opcional]
   inputTextColor="#FFF"  //[Opcional]
+  showPreferenciaContato={true}  //[Opcional] Exibe campo de preferência de contato
   onSuccess={(requestBody, leadId) => console.log('Formulário enviado com sucesso!', requestBody, leadId)}  //[Opcional]
   onError={(error) => console.error('Erro ao enviar formulário:', error)}  //[Opcional]
 />;
@@ -142,6 +143,7 @@ O `MitreFormComponent` aceita as seguintes props:
 - **`inputFocusBorderColor`** (opcional, string): Cor da borda do input quando selecionado. Padrão: `#F6C76B`.
 - **`inputPlaceholderColor`** (opcional, string): Cor do placeholder do input. Padrão: `#B6B6B6`.
 - **`inputTextColor`** (opcional, string): Cor do texto do input. Padrão: `#2F2F2F`.
+- **`showPreferenciaContato`** (opcional, boolean): Exibe um campo de seleção "Preferência de Contato" com as opções `Whatsapp`, `Email` e `Ligação`. Quando selecionado, o valor é enviado à API como `preferencia_contato`. Padrão: `false`.
 - **`onSuccess`** (opcional, função): Callback executado quando o formulário é enviado com sucesso. Recebe dois parâmetros: `requestBody` (objeto com os dados enviados) e `leadId` (string com o ID do lead retornado pela API).
 - **`onError`** (opcional, função): Callback executado quando ocorre um erro no envio do formulário. Recebe um objeto `Error` como parâmetro.
 
@@ -176,6 +178,37 @@ interface Product {
 
 ---
 
+## 📞 Preferência de Contato
+
+Quando `showPreferenciaContato={true}`, um campo de seleção é exibido no formulário com as seguintes opções:
+
+| Valor do enum            | Valor enviado à API |
+|--------------------------|---------------------|
+| `PreferenciaContato.Whatsapp` | `"Whatsapp"`   |
+| `PreferenciaContato.Email`    | `"Email"`      |
+| `PreferenciaContato.Ligacao`  | `"Ligação"`    |
+
+O campo é opcional: se o usuário não selecionar nenhuma opção, `preferencia_contato` não é enviado no body da requisição.
+
+O enum `PreferenciaContato` é exportado pela biblioteca para uso externo, se necessário:
+
+```tsx
+import { MitreFormComponent, PreferenciaContato } from "mitre-form-component-next";
+
+<MitreFormComponent
+  products={products}
+  apiUrl={process.env.NEXT_PUBLIC_REGISTER_LEADS_URL!}
+  apiToken={process.env.NEXT_PUBLIC_REGISTER_LEADS_TOKEN!}
+  showPreferenciaContato={true}
+  onSuccess={(requestBody) => {
+    // requestBody.preferencia_contato estará presente se o usuário selecionou uma opção
+    console.log(requestBody.preferencia_contato); // ex: "Whatsapp"
+  }}
+/>
+```
+
+---
+
 ## 🚨 Componente dentro de um `ErrorBoundary`
 
 Recomendamos que o componente `MitreFormComponent` seja sempre utilizado dentro de um `ErrorBoundary` para garantir que a aplicação não quebre em caso de falha no carregamento do componente. Também é preciso usar dynamic do next/dynamics para a importação.

package/dist/index.cjs

@@ -30,7 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  MitreFormComponent: () => Form_default
+  MitreFormComponent: () => Form_default,
+  PreferenciaContato: () => PreferenciaContato
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -336,6 +337,92 @@ var Subtitle = import_styled_components.default.p`
   color: ${(props) => props.$textColor || theme.colors.black};
 `;
 
+// src/components/ProductSelect/styles.ts
+var import_styled_components2 = __toESM(require("styled-components"), 1);
+var FormLabel = import_styled_components2.default.label`
+  font-family: ${theme.fonts.primary};
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1rem;
+  color: ${(props) => props.$textColor || theme.colors.black};
+  display: block;
+  margin-bottom: 0.5rem;
+  text-align: left;
+`;
+var Select = import_styled_components2.default.select`
+  font-family: ${theme.fonts.primary};
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  background: ${(props) => props.$backgroundColor || theme.colors.white};
+  color: ${(props) => props.$textColor || theme.colors.black};
+  padding: 0.5rem 3rem 0.5rem 0.5rem; /* Aumentado padding-right para 3rem */
+  border-radius: 0.125rem;
+  border: 1px solid ${(props) => props.$borderColor || theme.colors.transparent};
+  display: block;
+  height: 3.125rem;
+  width: 100%;
+  cursor: pointer;
+  
+  /* Remover a seta padrão do navegador */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  
+  /* Adicionar seta personalizada maior */
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 1rem center; /* Posicionado a 1rem da direita */
+  background-size: 1.25rem; /* Tamanho da seta aumentado para 1.25rem */
+
+  &:focus {
+    border-radius: 0.125rem;
+    border: 2px solid ${(props) => props.$focusBorderColor || theme.colors.yellow500};
+    outline: none;
+  }
+
+  /* Estilo para option disabled (placeholder) */
+  option:disabled {
+    color: ${theme.colors.gray100};
+    font-weight: 800;
+  }
+
+  /* Estilo para options normais */
+  option:not(:disabled) {
+    color: ${(props) => props.$textColor || theme.colors.black};
+    font-weight: 500;
+  }
+`;
+var FormErrorMessage = import_styled_components2.default.small`
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  color: ${theme.colors.red};
+  margin-top: 0.25rem;
+  display: block;
+`;
+var FormControl = import_styled_components2.default.div.withConfig({
+  shouldForwardProp: (prop) => !["isInvalid"].includes(prop)
+})`
+  ${FormLabel} {
+    ${(props) => props.isInvalid && import_styled_components2.css`
+        color: ${theme.colors.red};
+      `};
+  }
+
+  ${Select} {
+    ${(props) => props.isInvalid && import_styled_components2.css`
+        border: 1px solid ${theme.colors.red};
+      `};
+
+    &:focus {
+      ${(props) => props.isInvalid && import_styled_components2.css`
+          border: 1px solid ${theme.colors.red};
+        `};
+    }
+  }
+`;
+
 // src/components/styles/FontLoader.tsx
 var import_react2 = require("react");
 var useMontserratFont = () => {
@@ -402,8 +489,8 @@ function date(e) {
 }
 
 // src/components/Input/styles.ts
-var import_styled_components2 = __toESM(require("styled-components"), 1);
-var FormLabel = import_styled_components2.default.label`
+var import_styled_components3 = __toESM(require("styled-components"), 1);
+var FormLabel2 = import_styled_components3.default.label`
   font-family: ${theme.fonts.primary};
   font-style: normal;
   font-weight: 500;
@@ -413,7 +500,7 @@ var FormLabel = import_styled_components2.default.label`
   margin-bottom: 0.5rem;
   text-align: left;
 `;
-var Input = import_styled_components2.default.input`
+var Input = import_styled_components3.default.input`
   font-family: ${theme.fonts.primary};
   font-style: normal;
   font-weight: 500;
@@ -455,24 +542,24 @@ var Input = import_styled_components2.default.input`
     font-weight: 500;
   }
 `;
-var FormErrorMessage = import_styled_components2.default.small`
+var FormErrorMessage2 = import_styled_components3.default.small`
   font-size: 0.75rem;
   line-height: 1.125rem;
   color: ${theme.colors.red};
   margin-top: 0.25rem;
   display: block;
 `;
-var FormControl = import_styled_components2.default.div.withConfig({
+var FormControl2 = import_styled_components3.default.div.withConfig({
   shouldForwardProp: (prop) => !["isInvalid"].includes(prop)
 })`
-  ${FormLabel} {
-    ${(props) => props.isInvalid && import_styled_components2.css`
+  ${FormLabel2} {
+    ${(props) => props.isInvalid && import_styled_components3.css`
         color: ${theme.colors.red};
       `};
   }
 
   ${Input} {
-    ${(props) => props.isInvalid && import_styled_components2.css`
+    ${(props) => props.isInvalid && import_styled_components3.css`
         border: 1px solid ${theme.colors.red};
 
         &:not(:focus)::placeholder {
@@ -482,7 +569,7 @@ var FormControl = import_styled_components2.default.div.withConfig({
       `};
 
     &:focus {
-      ${(props) => props.isInvalid && import_styled_components2.css`
+      ${(props) => props.isInvalid && import_styled_components3.css`
           border: 1px solid ${theme.colors.red};
         `};
     }
@@ -515,8 +602,8 @@ var InputBase = ({
     },
     [mask]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FormControl, { isInvalid: !!error, children: [
-    !!label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormLabel, { htmlFor: id, $textColor: labelTextColor, children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FormControl2, { isInvalid: !!error, children: [
+    !!label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormLabel2, { htmlFor: id, $textColor: labelTextColor, children: label }),
     !mask ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       Input,
       {
@@ -549,15 +636,15 @@ var InputBase = ({
         ...rest
       }
     ),
-    !!error && showErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormErrorMessage, { "data-testid": "error-message", children: typeof error === "string" ? error : error.message })
+    !!error && showErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormErrorMessage2, { "data-testid": "error-message", children: typeof error === "string" ? error : error.message })
   ] });
 };
 var Input2 = (0, import_react3.forwardRef)(InputBase);
 
 // src/components/Button/styles.ts
 var import_polished = require("polished");
-var import_styled_components3 = __toESM(require("styled-components"), 1);
-var Icon = import_styled_components3.default.span`
+var import_styled_components4 = __toESM(require("styled-components"), 1);
+var Icon = import_styled_components4.default.span`
   font-size: 0;
   line-height: 0;
   transition: all 0.25s ease;
@@ -567,7 +654,7 @@ var Icon = import_styled_components3.default.span`
   opacity: 0;
   margin-right: 0.625rem;
 `;
-var Text = import_styled_components3.default.span`
+var Text = import_styled_components4.default.span`
   font-family: ${theme.fonts.primary};
   font-size: 1rem;
   line-height: 1.5rem;
@@ -575,14 +662,14 @@ var Text = import_styled_components3.default.span`
 
   transition: all 0.25s ease;
 `;
-var TextSubmitting = import_styled_components3.default.span`
+var TextSubmitting = import_styled_components4.default.span`
   font-family: ${theme.fonts.primary};
   font-weight: 400;
   font-size: 1rem;
 
   transition: all 0.25s ease;
 `;
-var LoadingIcon = import_styled_components3.default.span.withConfig({
+var LoadingIcon = import_styled_components4.default.span.withConfig({
   shouldForwardProp: (prop) => prop !== "hasText"
 })`
   display: block;
@@ -605,7 +692,7 @@ var LoadingIcon = import_styled_components3.default.span.withConfig({
     }
   }
 `;
-var Button = import_styled_components3.default.button.withConfig({
+var Button = import_styled_components4.default.button.withConfig({
   shouldForwardProp: (prop) => ![
     "hasIcon",
     "isSubmitting",
@@ -662,14 +749,14 @@ var Button = import_styled_components3.default.button.withConfig({
   }
 
   ${Text} {
-    ${(props) => props.isSubmitting && !props.hasSubmittingMessage && import_styled_components3.css`
+    ${(props) => props.isSubmitting && !props.hasSubmittingMessage && import_styled_components4.css`
         transform: unset;
         opacity: 0;
       `}
   }
 
   ${LoadingIcon} {
-    ${(props) => props.isSubmitting && !props.hasSubmittingMessage && import_styled_components3.css`
+    ${(props) => props.isSubmitting && !props.hasSubmittingMessage && import_styled_components4.css`
         display: flex;
         -webkit-box-align: center;
         align-items: center;
@@ -713,17 +800,17 @@ function Button2({
 var import_react4 = require("react");
 
 // src/components/Alert/styles.ts
-var import_styled_components4 = __toESM(require("styled-components"), 1);
-var fadeIn = import_styled_components4.keyframes`
+var import_styled_components5 = __toESM(require("styled-components"), 1);
+var fadeIn = import_styled_components5.keyframes`
   from { opacity: 0; transform: translateY(-10px); }
   to { opacity: 1; transform: translateY(0); }
 `;
-var fadeOut = import_styled_components4.keyframes`
+var fadeOut = import_styled_components5.keyframes`
   from { opacity: 1; transform: translateY(0); }
   to { opacity: 0; transform: translateY(-10px); }
 `;
 var typeStyles = {
-  error: import_styled_components4.css`
+  error: import_styled_components5.css`
     background-color: ${theme.colors.red};
     border: 1px solid ${theme.colors.red};
     color: ${theme.colors.white};
@@ -731,7 +818,7 @@ var typeStyles = {
       color: ${theme.colors.white};
     }
   `,
-  warning: import_styled_components4.css`
+  warning: import_styled_components5.css`
     background-color: ${theme.colors.yellow500};
     border: 1px solid ${theme.colors.yellow400};
     color: ${theme.colors.black};
@@ -739,7 +826,7 @@ var typeStyles = {
       color: ${theme.colors.black};
     }
   `,
-  info: import_styled_components4.css`
+  info: import_styled_components5.css`
     background-color: ${theme.colors.blue};
     border: 1px solid ${theme.colors.blue};
     color: ${theme.colors.white};
@@ -747,7 +834,7 @@ var typeStyles = {
       color: ${theme.colors.white};
     }
   `,
-  success: import_styled_components4.css`
+  success: import_styled_components5.css`
     background-color: ${theme.colors.green};
     border: 1px solid ${theme.colors.green2};
     color: ${theme.colors.white};
@@ -756,7 +843,7 @@ var typeStyles = {
     }
   `
 };
-var AlertContainer = import_styled_components4.default.div`
+var AlertContainer = import_styled_components5.default.div`
   position: fixed;
   width: 500px;
   top: 15px;
@@ -776,7 +863,7 @@ var AlertContainer = import_styled_components4.default.div`
 
   ${({ $type }) => typeStyles[$type]}
 `;
-var DismissButton = import_styled_components4.default.button`
+var DismissButton = import_styled_components5.default.button`
   position: absolute;
   background: transparent;
   right: 10px;
@@ -845,10 +932,10 @@ var Alert = ({
 var import_react5 = require("react");
 
 // src/components/PhoneInput/styles.ts
-var import_styled_components5 = __toESM(require("styled-components"), 1);
+var import_styled_components6 = __toESM(require("styled-components"), 1);
 var import_react_international_phone = require("react-international-phone");
 var import_style = require("react-international-phone/style.css");
-var FormLabel2 = import_styled_components5.default.label`
+var FormLabel3 = import_styled_components6.default.label`
   font-family: ${theme.fonts.primary};
   font-style: normal;
   font-weight: 500;
@@ -858,7 +945,7 @@ var FormLabel2 = import_styled_components5.default.label`
   margin-bottom: 0.5rem;
   text-align: left;
 `;
-var StyledPhoneInput = (0, import_styled_components5.default)(import_react_international_phone.PhoneInput)`
+var StyledPhoneInput = (0, import_styled_components6.default)(import_react_international_phone.PhoneInput)`
   width: 100%;
   height: 3.125rem;
   background: ${(props) => props.$backgroundColor || theme.colors.white};
@@ -904,7 +991,6 @@ var StyledPhoneInput = (0, import_styled_components5.default)(import_react_inter
     outline: none;
     border: none;
     border-right: 1px solid ${(props) => props.$borderColor || theme.colors.transparent};
-    padding-right: 5px;
     padding-left: 10px;
   }
 
@@ -957,7 +1043,7 @@ var StyledPhoneInput = (0, import_styled_components5.default)(import_react_inter
       font-size: 1rem;
       line-height: 1.5rem;
       color: ${(props) => props.$placeholderColor || theme.colors.gray100};
-      font-weight: 800;
+      font-weight: 700;
     }
 
     &:-webkit-autofill {
@@ -973,24 +1059,24 @@ var StyledPhoneInput = (0, import_styled_components5.default)(import_react_inter
     }
   }
 `;
-var FormErrorMessage2 = import_styled_components5.default.small`
+var FormErrorMessage3 = import_styled_components6.default.small`
   font-size: 0.75rem;
   line-height: 1.125rem;
   color: ${theme.colors.red};
   margin-top: 0.25rem;
   display: block;
 `;
-var FormControl2 = import_styled_components5.default.div.withConfig({
+var FormControl3 = import_styled_components6.default.div.withConfig({
   shouldForwardProp: (prop) => !["isInvalid"].includes(prop)
 })`
-  ${FormLabel2} {
-    ${(props) => props.isInvalid && import_styled_components5.css`
+  ${FormLabel3} {
+    ${(props) => props.isInvalid && import_styled_components6.css`
         color: ${theme.colors.red};
       `};
   }
 
   ${StyledPhoneInput} {
-    ${(props) => props.isInvalid && import_styled_components5.css`
+    ${(props) => props.isInvalid && import_styled_components6.css`
         border: 1px solid ${theme.colors.red};
 
         &:not(:focus)::placeholder {
@@ -1000,7 +1086,7 @@ var FormControl2 = import_styled_components5.default.div.withConfig({
       `};
 
     .react-international-phone-input-container {
-      ${(props) => props.isInvalid && import_styled_components5.css`
+      ${(props) => props.isInvalid && import_styled_components6.css`
           border: 1px solid ${theme.colors.red};
 
           &:not(:focus)::placeholder {
@@ -1011,7 +1097,7 @@ var FormControl2 = import_styled_components5.default.div.withConfig({
     }
 
     .react-international-phone-country-selector-button {
-      ${(props) => props.isInvalid && import_styled_components5.css`
+      ${(props) => props.isInvalid && import_styled_components6.css`
           border-right: 1px solid ${theme.colors.red};
         `};
     }
@@ -1034,8 +1120,8 @@ var PhoneInputBase = ({
   value,
   ...rest
 }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(FormControl2, { isInvalid: !!error, children: [
-    !!label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FormLabel2, { htmlFor: id, $textColor: labelTextColor, children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(FormControl3, { isInvalid: !!error, children: [
+    !!label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FormLabel3, { htmlFor: id, $textColor: labelTextColor, children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       StyledPhoneInput,
       {
@@ -1070,101 +1156,13 @@ var PhoneInputBase = ({
         $textColor: inputTextColor
       }
     ),
-    !!error && showErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FormErrorMessage2, { "data-testid": "error-message", children: typeof error === "string" ? error : error?.message })
+    !!error && showErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FormErrorMessage3, { "data-testid": "error-message", children: typeof error === "string" ? error : error?.message })
   ] });
 };
 var PhoneInput2 = (0, import_react5.forwardRef)(PhoneInputBase);
 
 // src/components/ProductSelect/index.tsx
 var import_react6 = require("react");
-
-// src/components/ProductSelect/styles.ts
-var import_styled_components6 = __toESM(require("styled-components"), 1);
-var FormLabel3 = import_styled_components6.default.label`
-  font-family: ${theme.fonts.primary};
-  font-style: normal;
-  font-weight: 500;
-  font-size: 1rem;
-  color: ${(props) => props.$textColor || theme.colors.black};
-  display: block;
-  margin-bottom: 0.5rem;
-  text-align: left;
-`;
-var Select = import_styled_components6.default.select`
-  font-family: ${theme.fonts.primary};
-  font-style: normal;
-  font-weight: 500;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  background: ${(props) => props.$backgroundColor || theme.colors.white};
-  color: ${(props) => props.$textColor || theme.colors.black};
-  padding: 0.5rem 3rem 0.5rem 0.5rem; /* Aumentado padding-right para 3rem */
-  border-radius: 0.125rem;
-  border: 1px solid ${(props) => props.$borderColor || theme.colors.transparent};
-  display: block;
-  height: 3.125rem;
-  width: 100%;
-  cursor: pointer;
-  
-  /* Remover a seta padrão do navegador */
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  
-  /* Adicionar seta personalizada maior */
-  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
-  background-repeat: no-repeat;
-  background-position: right 1rem center; /* Posicionado a 1rem da direita */
-  background-size: 1.25rem; /* Tamanho da seta aumentado para 1.25rem */
-
-  &:focus {
-    border-radius: 0.125rem;
-    border: 2px solid ${(props) => props.$focusBorderColor || theme.colors.yellow500};
-    outline: none;
-  }
-
-  /* Estilo para option disabled (placeholder) */
-  option:disabled {
-    color: ${theme.colors.gray100};
-    font-weight: 800;
-  }
-
-  /* Estilo para options normais */
-  option:not(:disabled) {
-    color: ${(props) => props.$textColor || theme.colors.black};
-    font-weight: 500;
-  }
-`;
-var FormErrorMessage3 = import_styled_components6.default.small`
-  font-size: 0.75rem;
-  line-height: 1.125rem;
-  color: ${theme.colors.red};
-  margin-top: 0.25rem;
-  display: block;
-`;
-var FormControl3 = import_styled_components6.default.div.withConfig({
-  shouldForwardProp: (prop) => !["isInvalid"].includes(prop)
-})`
-  ${FormLabel3} {
-    ${(props) => props.isInvalid && import_styled_components6.css`
-        color: ${theme.colors.red};
-      `};
-  }
-
-  ${Select} {
-    ${(props) => props.isInvalid && import_styled_components6.css`
-        border: 1px solid ${theme.colors.red};
-      `};
-
-    &:focus {
-      ${(props) => props.isInvalid && import_styled_components6.css`
-          border: 1px solid ${theme.colors.red};
-        `};
-    }
-  }
-`;
-
-// src/components/ProductSelect/index.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var ProductSelectBase = ({
   id,
@@ -1180,8 +1178,8 @@ var ProductSelectBase = ({
   placeholder = "Selecione um produto",
   ...rest
 }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(FormControl3, { isInvalid: !!error, children: [
-    !!label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FormLabel3, { htmlFor: id, $textColor: labelTextColor, children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(FormControl, { isInvalid: !!error, children: [
+    !!label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FormLabel, { htmlFor: id, $textColor: labelTextColor, children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       Select,
       {
@@ -1199,7 +1197,7 @@ var ProductSelectBase = ({
         ]
       }
     ),
-    !!error && showErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FormErrorMessage3, { "data-testid": "error-message", children: typeof error === "string" ? error : error.message })
+    !!error && showErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FormErrorMessage, { "data-testid": "error-message", children: typeof error === "string" ? error : error.message })
   ] });
 };
 var ProductSelect = (0, import_react6.forwardRef)(ProductSelectBase);
@@ -1207,6 +1205,12 @@ var ProductSelect = (0, import_react6.forwardRef)(ProductSelectBase);
 // src/components/Form/index.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var phoneUtil = import_google_libphonenumber.PhoneNumberUtil.getInstance();
+var PreferenciaContato = /* @__PURE__ */ ((PreferenciaContato2) => {
+  PreferenciaContato2["Whatsapp"] = "Whatsapp";
+  PreferenciaContato2["Email"] = "Email";
+  PreferenciaContato2["Ligacao"] = "Liga\xE7\xE3o";
+  return PreferenciaContato2;
+})(PreferenciaContato || {});
 var isPhoneValid = (phone) => {
   try {
     return phoneUtil.isValidNumber(phoneUtil.parseAndKeepRawInput(phone));
@@ -1253,6 +1257,7 @@ var MitreFormComponent = import_react7.default.forwardRef(({
   inputFocusBorderColor = theme.colors.yellow500,
   inputPlaceholderColor = theme.colors.gray100,
   inputTextColor = theme.colors.black,
+  showPreferenciaContato = false,
   onSuccess,
   onError
 }, ref) => {
@@ -1321,7 +1326,7 @@ var MitreFormComponent = import_react7.default.forwardRef(({
     setFormKey((k) => k + 1);
   };
   const sendMessage = async (data) => {
-    const { name, email, phone, productId } = data;
+    const { name, email, phone, productId, preferencia_contato } = data;
     const phoneValue = phone.inputValue;
     const phoneDigitsOnly = phoneValue?.replace(/\D/g, "") || "";
     const message = "Gostaria de mais informa\xE7\xF5es sobre o produto";
@@ -1352,7 +1357,8 @@ var MitreFormComponent = import_react7.default.forwardRef(({
         utm_source: utm.utm_source,
         utm_campaign: utm.utm_campaign,
         utm_medium: utm.utm_medium,
-        utm_term: utm.utm_term
+        utm_term: utm.utm_term,
+        ...showPreferenciaContato && preferencia_contato ? { preferencia_contato } : {}
       };
       const response = await fetch(`${apiUrl}/leads`, {
         method: "POST",
@@ -1498,6 +1504,26 @@ var MitreFormComponent = import_react7.default.forwardRef(({
           },
           formKey
         ),
+        showPreferenciaContato && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(FormControl, { isInvalid: !!errors.preferencia_contato, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FormLabel, { htmlFor: "preferencia_contato", $textColor: textColor, children: "Prefer\xEAncia de Contato" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            Select,
+            {
+              id: "preferencia_contato",
+              ...register("preferencia_contato"),
+              defaultValue: "",
+              $backgroundColor: inputBackgroundColor,
+              $borderColor: inputBorderColor,
+              $focusBorderColor: inputFocusBorderColor,
+              $textColor: inputTextColor,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "", disabled: true, children: "Selecione uma op\xE7\xE3o" }),
+                Object.values(PreferenciaContato).map((op) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: op, children: op }, op))
+              ]
+            }
+          ),
+          errors.preferencia_contato && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FormErrorMessage, { children: errors.preferencia_contato.message })
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ButtonContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Button2, { bgColor: buttonBackgroundColor, color: buttonTextColor, type: "submit", isSubmitting: loading, children: "Enviar mensagem" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { children: [
@@ -1526,6 +1552,7 @@ MitreFormComponent.displayName = "MitreFormComponent";
 var Form_default = MitreFormComponent;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  MitreFormComponent
+  MitreFormComponent,
+  PreferenciaContato
 });
 //# sourceMappingURL=index.cjs.map