mitre-form-component 0.1.3 → 2.0.0

package/dist/index.js

@@ -300,6 +300,92 @@ var Subtitle = styled.p`
   color: ${(props) => props.$textColor || theme.colors.black};
 `;
 
+// src/components/ProductSelect/styles.ts
+import styled2, { css } from "styled-components";
+var FormLabel = styled2.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 = styled2.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 = styled2.small`
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  color: ${theme.colors.red};
+  margin-top: 0.25rem;
+  display: block;
+`;
+var FormControl = styled2.div.withConfig({
+  shouldForwardProp: (prop) => !["isInvalid"].includes(prop)
+})`
+  ${FormLabel} {
+    ${(props) => props.isInvalid && css`
+        color: ${theme.colors.red};
+      `};
+  }
+
+  ${Select} {
+    ${(props) => props.isInvalid && css`
+        border: 1px solid ${theme.colors.red};
+      `};
+
+    &:focus {
+      ${(props) => props.isInvalid && css`
+          border: 1px solid ${theme.colors.red};
+        `};
+    }
+  }
+`;
+
 // src/components/styles/FontLoader.tsx
 import { useEffect } from "react";
 var useMontserratFont = () => {
@@ -369,8 +455,8 @@ function date(e) {
 }
 
 // src/components/Input/styles.ts
-import styled2, { css } from "styled-components";
-var FormLabel = styled2.label`
+import styled3, { css as css2 } from "styled-components";
+var FormLabel2 = styled3.label`
   font-family: ${theme.fonts.primary};
   font-style: normal;
   font-weight: 500;
@@ -380,7 +466,7 @@ var FormLabel = styled2.label`
   margin-bottom: 0.5rem;
   text-align: left;
 `;
-var Input = styled2.input`
+var Input = styled3.input`
   font-family: ${theme.fonts.primary};
   font-style: normal;
   font-weight: 500;
@@ -422,24 +508,24 @@ var Input = styled2.input`
     font-weight: 500;
   }
 `;
-var FormErrorMessage = styled2.small`
+var FormErrorMessage2 = styled3.small`
   font-size: 0.75rem;
   line-height: 1.125rem;
   color: ${theme.colors.red};
   margin-top: 0.25rem;
   display: block;
 `;
-var FormControl = styled2.div.withConfig({
+var FormControl2 = styled3.div.withConfig({
   shouldForwardProp: (prop) => !["isInvalid"].includes(prop)
 })`
-  ${FormLabel} {
-    ${(props) => props.isInvalid && css`
+  ${FormLabel2} {
+    ${(props) => props.isInvalid && css2`
         color: ${theme.colors.red};
       `};
   }
 
   ${Input} {
-    ${(props) => props.isInvalid && css`
+    ${(props) => props.isInvalid && css2`
         border: 1px solid ${theme.colors.red};
 
         &:not(:focus)::placeholder {
@@ -449,7 +535,7 @@ var FormControl = styled2.div.withConfig({
       `};
 
     &:focus {
-      ${(props) => props.isInvalid && css`
+      ${(props) => props.isInvalid && css2`
           border: 1px solid ${theme.colors.red};
         `};
     }
@@ -482,8 +568,8 @@ var InputBase = ({
     },
     [mask]
   );
-  return /* @__PURE__ */ jsxs(FormControl, { isInvalid: !!error, children: [
-    !!label && /* @__PURE__ */ jsx(FormLabel, { htmlFor: id, $textColor: labelTextColor, children: label }),
+  return /* @__PURE__ */ jsxs(FormControl2, { isInvalid: !!error, children: [
+    !!label && /* @__PURE__ */ jsx(FormLabel2, { htmlFor: id, $textColor: labelTextColor, children: label }),
     !mask ? /* @__PURE__ */ jsx(
       Input,
       {
@@ -516,15 +602,15 @@ var InputBase = ({
         ...rest
       }
     ),
-    !!error && showErrorMessage && /* @__PURE__ */ jsx(FormErrorMessage, { "data-testid": "error-message", children: typeof error === "string" ? error : error.message })
+    !!error && showErrorMessage && /* @__PURE__ */ jsx(FormErrorMessage2, { "data-testid": "error-message", children: typeof error === "string" ? error : error.message })
   ] });
 };
 var Input2 = forwardRef(InputBase);
 
 // src/components/Button/styles.ts
 import { darken } from "polished";
-import styled3, { css as css2 } from "styled-components";
-var Icon = styled3.span`
+import styled4, { css as css3 } from "styled-components";
+var Icon = styled4.span`
   font-size: 0;
   line-height: 0;
   transition: all 0.25s ease;
@@ -534,7 +620,7 @@ var Icon = styled3.span`
   opacity: 0;
   margin-right: 0.625rem;
 `;
-var Text = styled3.span`
+var Text = styled4.span`
   font-family: ${theme.fonts.primary};
   font-size: 1rem;
   line-height: 1.5rem;
@@ -542,14 +628,14 @@ var Text = styled3.span`
 
   transition: all 0.25s ease;
 `;
-var TextSubmitting = styled3.span`
+var TextSubmitting = styled4.span`
   font-family: ${theme.fonts.primary};
   font-weight: 400;
   font-size: 1rem;
 
   transition: all 0.25s ease;
 `;
-var LoadingIcon = styled3.span.withConfig({
+var LoadingIcon = styled4.span.withConfig({
   shouldForwardProp: (prop) => prop !== "hasText"
 })`
   display: block;
@@ -572,7 +658,7 @@ var LoadingIcon = styled3.span.withConfig({
     }
   }
 `;
-var Button = styled3.button.withConfig({
+var Button = styled4.button.withConfig({
   shouldForwardProp: (prop) => ![
     "hasIcon",
     "isSubmitting",
@@ -629,14 +715,14 @@ var Button = styled3.button.withConfig({
   }
 
   ${Text} {
-    ${(props) => props.isSubmitting && !props.hasSubmittingMessage && css2`
+    ${(props) => props.isSubmitting && !props.hasSubmittingMessage && css3`
         transform: unset;
         opacity: 0;
       `}
   }
 
   ${LoadingIcon} {
-    ${(props) => props.isSubmitting && !props.hasSubmittingMessage && css2`
+    ${(props) => props.isSubmitting && !props.hasSubmittingMessage && css3`
         display: flex;
         -webkit-box-align: center;
         align-items: center;
@@ -680,7 +766,7 @@ function Button2({
 import { useEffect as useEffect2, useState as useState2, useCallback as useCallback2 } from "react";
 
 // src/components/Alert/styles.ts
-import styled4, { css as css3, keyframes } from "styled-components";
+import styled5, { css as css4, keyframes } from "styled-components";
 var fadeIn = keyframes`
   from { opacity: 0; transform: translateY(-10px); }
   to { opacity: 1; transform: translateY(0); }
@@ -690,7 +776,7 @@ var fadeOut = keyframes`
   to { opacity: 0; transform: translateY(-10px); }
 `;
 var typeStyles = {
-  error: css3`
+  error: css4`
     background-color: ${theme.colors.red};
     border: 1px solid ${theme.colors.red};
     color: ${theme.colors.white};
@@ -698,7 +784,7 @@ var typeStyles = {
       color: ${theme.colors.white};
     }
   `,
-  warning: css3`
+  warning: css4`
     background-color: ${theme.colors.yellow500};
     border: 1px solid ${theme.colors.yellow400};
     color: ${theme.colors.black};
@@ -706,7 +792,7 @@ var typeStyles = {
       color: ${theme.colors.black};
     }
   `,
-  info: css3`
+  info: css4`
     background-color: ${theme.colors.blue};
     border: 1px solid ${theme.colors.blue};
     color: ${theme.colors.white};
@@ -714,7 +800,7 @@ var typeStyles = {
       color: ${theme.colors.white};
     }
   `,
-  success: css3`
+  success: css4`
     background-color: ${theme.colors.green};
     border: 1px solid ${theme.colors.green2};
     color: ${theme.colors.white};
@@ -723,7 +809,7 @@ var typeStyles = {
     }
   `
 };
-var AlertContainer = styled4.div`
+var AlertContainer = styled5.div`
   position: fixed;
   width: 500px;
   top: 15px;
@@ -743,7 +829,7 @@ var AlertContainer = styled4.div`
 
   ${({ $type }) => typeStyles[$type]}
 `;
-var DismissButton = styled4.button`
+var DismissButton = styled5.button`
   position: absolute;
   background: transparent;
   right: 10px;
@@ -808,16 +894,183 @@ var Alert = ({
   );
 };
 
+// src/components/Modal/index.tsx
+import { useEffect as useEffect3, useRef } from "react";
+import { HiX as HiX2 } from "react-icons/hi";
+
+// src/components/Modal/styles.ts
+import styled6, { css as css5, keyframes as keyframes2 } from "styled-components";
+var fadeIn2 = keyframes2`
+  from { opacity: 0; }
+  to { opacity: 1; }
+`;
+var slideIn = keyframes2`
+  from { opacity: 0; transform: translateY(-20px) scale(0.96); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+`;
+var Overlay = styled6.div`
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  padding: 1rem;
+  animation: ${fadeIn2} 0.18s ease-out;
+`;
+var accentStyles = {
+  success: css5`
+    color: ${theme.colors.green2};
+  `,
+  error: css5`
+    color: ${theme.colors.red};
+  `
+};
+var Container = styled6.div`
+  position: relative;
+  background: ${theme.colors.white};
+  border-radius: 0.75rem;
+  box-shadow: ${theme.shadows.shadow500};
+  max-width: 420px;
+  width: 100%;
+  padding: 1.75rem 1.5rem 1.25rem;
+  font-family: ${theme.fonts.primary};
+  animation: ${slideIn} 0.22s ease-out;
+
+  &::before {
+    content: "";
+    display: block;
+    width: 56px;
+    height: 4px;
+    border-radius: 999px;
+    margin: 0 auto 1rem;
+    background: ${({ $type }) => $type === "success" ? theme.colors.green2 : theme.colors.red};
+  }
+
+  h2 {
+    margin: 0 0 0.5rem;
+    font-size: 1.25rem;
+    font-weight: 700;
+    text-align: center;
+    ${({ $type }) => accentStyles[$type]}
+  }
+
+  p {
+    margin: 0 0 1.5rem;
+    font-size: 0.95rem;
+    line-height: 1.45;
+    text-align: center;
+    color: ${theme.colors.black};
+  }
+`;
+var CloseButton = styled6.button`
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: ${theme.colors.gray550};
+  padding: 0.25rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  transition: background 0.15s, color 0.15s;
+
+  &:hover {
+    background: ${theme.colors.gray300};
+    color: ${theme.colors.black};
+  }
+
+  svg {
+    width: 1.1rem;
+    height: 1.1rem;
+  }
+`;
+var PrimaryButton = styled6.button`
+  display: block;
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: none;
+  border-radius: 0.5rem;
+  background: ${({ $bgColor }) => $bgColor || theme.colors.yellow500};
+  color: ${({ $textColor }) => $textColor || theme.colors.black};
+  font-family: ${theme.fonts.primary};
+  font-size: 1rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: filter 0.15s;
+
+  &:hover {
+    filter: brightness(0.95);
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${theme.colors.yellow400};
+    outline-offset: 2px;
+  }
+`;
+
+// src/components/Modal/index.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var Modal = ({
+  type,
+  title,
+  message,
+  primaryButtonText,
+  onPrimaryAction,
+  onClose,
+  primaryButtonBgColor,
+  primaryButtonTextColor
+}) => {
+  const primaryButtonRef = useRef(null);
+  useEffect3(() => {
+    primaryButtonRef.current?.focus();
+  }, []);
+  useEffect3(() => {
+    const handleKey = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [onClose]);
+  const handleOverlayClick = (event) => {
+    if (event.target === event.currentTarget) {
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsx4(Overlay, { onClick: handleOverlayClick, role: "dialog", "aria-modal": "true", "aria-label": title, children: /* @__PURE__ */ jsxs4(Container, { $type: type, children: [
+    /* @__PURE__ */ jsx4(CloseButton, { onClick: onClose, "aria-label": "Fechar", children: /* @__PURE__ */ jsx4(HiX2, {}) }),
+    /* @__PURE__ */ jsx4("h2", { children: title }),
+    /* @__PURE__ */ jsx4("p", { children: message }),
+    /* @__PURE__ */ jsx4(
+      PrimaryButton,
+      {
+        ref: primaryButtonRef,
+        onClick: onPrimaryAction,
+        $bgColor: primaryButtonBgColor,
+        $textColor: primaryButtonTextColor,
+        type: "button",
+        children: primaryButtonText
+      }
+    )
+  ] }) });
+};
+
 // src/components/PhoneInput/index.tsx
 import {
   forwardRef as forwardRef2
 } from "react";
 
 // src/components/PhoneInput/styles.ts
-import styled5, { css as css4 } from "styled-components";
+import styled7, { css as css6 } from "styled-components";
 import { PhoneInput } from "react-international-phone";
 import "react-international-phone/style.css";
-var FormLabel2 = styled5.label`
+var FormLabel3 = styled7.label`
   font-family: ${theme.fonts.primary};
   font-style: normal;
   font-weight: 500;
@@ -827,7 +1080,7 @@ var FormLabel2 = styled5.label`
   margin-bottom: 0.5rem;
   text-align: left;
 `;
-var StyledPhoneInput = styled5(PhoneInput)`
+var StyledPhoneInput = styled7(PhoneInput)`
   width: 100%;
   height: 3.125rem;
   background: ${(props) => props.$backgroundColor || theme.colors.white};
@@ -941,24 +1194,24 @@ var StyledPhoneInput = styled5(PhoneInput)`
     }
   }
 `;
-var FormErrorMessage2 = styled5.small`
+var FormErrorMessage3 = styled7.small`
   font-size: 0.75rem;
   line-height: 1.125rem;
   color: ${theme.colors.red};
   margin-top: 0.25rem;
   display: block;
 `;
-var FormControl2 = styled5.div.withConfig({
+var FormControl3 = styled7.div.withConfig({
   shouldForwardProp: (prop) => !["isInvalid"].includes(prop)
 })`
-  ${FormLabel2} {
-    ${(props) => props.isInvalid && css4`
+  ${FormLabel3} {
+    ${(props) => props.isInvalid && css6`
         color: ${theme.colors.red};
       `};
   }
 
   ${StyledPhoneInput} {
-    ${(props) => props.isInvalid && css4`
+    ${(props) => props.isInvalid && css6`
         border: 1px solid ${theme.colors.red};
 
         &:not(:focus)::placeholder {
@@ -968,7 +1221,7 @@ var FormControl2 = styled5.div.withConfig({
       `};
 
     .react-international-phone-input-container {
-      ${(props) => props.isInvalid && css4`
+      ${(props) => props.isInvalid && css6`
           border: 1px solid ${theme.colors.red};
 
           &:not(:focus)::placeholder {
@@ -979,7 +1232,7 @@ var FormControl2 = styled5.div.withConfig({
     }
 
     .react-international-phone-country-selector-button {
-      ${(props) => props.isInvalid && css4`
+      ${(props) => props.isInvalid && css6`
           border-right: 1px solid ${theme.colors.red};
         `};
     }
@@ -987,7 +1240,7 @@ var FormControl2 = styled5.div.withConfig({
 `;
 
 // src/components/PhoneInput/index.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var PhoneInputBase = ({
   id,
   label,
@@ -1002,9 +1255,9 @@ var PhoneInputBase = ({
   value,
   ...rest
 }, ref) => {
-  return /* @__PURE__ */ jsxs4(FormControl2, { isInvalid: !!error, children: [
-    !!label && /* @__PURE__ */ jsx4(FormLabel2, { htmlFor: id, $textColor: labelTextColor, children: label }),
-    /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs5(FormControl3, { isInvalid: !!error, children: [
+    !!label && /* @__PURE__ */ jsx5(FormLabel3, { htmlFor: id, $textColor: labelTextColor, children: label }),
+    /* @__PURE__ */ jsx5(
       StyledPhoneInput,
       {
         ref,
@@ -1038,7 +1291,7 @@ var PhoneInputBase = ({
         $textColor: inputTextColor
       }
     ),
-    !!error && showErrorMessage && /* @__PURE__ */ jsx4(FormErrorMessage2, { "data-testid": "error-message", children: typeof error === "string" ? error : error?.message })
+    !!error && showErrorMessage && /* @__PURE__ */ jsx5(FormErrorMessage3, { "data-testid": "error-message", children: typeof error === "string" ? error : error?.message })
   ] });
 };
 var PhoneInput2 = forwardRef2(PhoneInputBase);
@@ -1047,95 +1300,7 @@ var PhoneInput2 = forwardRef2(PhoneInputBase);
 import {
   forwardRef as forwardRef3
 } from "react";
-
-// src/components/ProductSelect/styles.ts
-import styled6, { css as css5 } from "styled-components";
-var FormLabel3 = styled6.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 = styled6.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 = styled6.small`
-  font-size: 0.75rem;
-  line-height: 1.125rem;
-  color: ${theme.colors.red};
-  margin-top: 0.25rem;
-  display: block;
-`;
-var FormControl3 = styled6.div.withConfig({
-  shouldForwardProp: (prop) => !["isInvalid"].includes(prop)
-})`
-  ${FormLabel3} {
-    ${(props) => props.isInvalid && css5`
-        color: ${theme.colors.red};
-      `};
-  }
-
-  ${Select} {
-    ${(props) => props.isInvalid && css5`
-        border: 1px solid ${theme.colors.red};
-      `};
-
-    &:focus {
-      ${(props) => props.isInvalid && css5`
-          border: 1px solid ${theme.colors.red};
-        `};
-    }
-  }
-`;
-
-// src/components/ProductSelect/index.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var ProductSelectBase = ({
   id,
   label,
@@ -1150,9 +1315,9 @@ var ProductSelectBase = ({
   placeholder = "Selecione um produto",
   ...rest
 }, ref) => {
-  return /* @__PURE__ */ jsxs5(FormControl3, { isInvalid: !!error, children: [
-    !!label && /* @__PURE__ */ jsx5(FormLabel3, { htmlFor: id, $textColor: labelTextColor, children: label }),
-    /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(FormControl, { isInvalid: !!error, children: [
+    !!label && /* @__PURE__ */ jsx6(FormLabel, { htmlFor: id, $textColor: labelTextColor, children: label }),
+    /* @__PURE__ */ jsxs6(
       Select,
       {
         id,
@@ -1164,19 +1329,78 @@ var ProductSelectBase = ({
         $textColor: textColor,
         ...rest,
         children: [
-          /* @__PURE__ */ jsx5("option", { value: "", disabled: true, children: placeholder }),
-          products.map((product) => /* @__PURE__ */ jsx5("option", { value: product.id, children: product.name }, product.id))
+          /* @__PURE__ */ jsx6("option", { value: "", disabled: true, children: placeholder }),
+          products.map((product) => /* @__PURE__ */ jsx6("option", { value: product.id, children: product.name }, product.id))
         ]
       }
     ),
-    !!error && showErrorMessage && /* @__PURE__ */ jsx5(FormErrorMessage3, { "data-testid": "error-message", children: typeof error === "string" ? error : error.message })
+    !!error && showErrorMessage && /* @__PURE__ */ jsx6(FormErrorMessage, { "data-testid": "error-message", children: typeof error === "string" ? error : error.message })
   ] });
 };
 var ProductSelect = forwardRef3(ProductSelectBase);
 
+// src/config/environments.ts
+var ENVIRONMENTS = {
+  homol: {
+    apiUrl: "https://leads-hml.mitrerealty.com.br/api-leads",
+    apiToken: "TEFORElOR19NSVRSRTptZlFXZnhvUHdNbWVZY0FidkF0QWJ3Q2RFYWtKckJBOXg5cGNsOTBvS1V0N2ZsU0d4TEtNdEZZd3k0NFlEc0c3",
+    whatsappPhone: "551148100601",
+    chatUrl: "https://crm-hml.mitrerealty.com.br/wcc/UserLoginSubmit.do"
+  },
+  prod: {
+    apiUrl: "https://leads.mitrerealty.com.br/api-leads",
+    apiToken: "TEFORElOR19NSVRSRTptZlFXZnhvUHdNbWVZY0FidkF0QWJ3Q2RFYWtKckJBOXg5cGNsOTBvS1V0N2ZsU0d4TEtNdEZZd3k0NFlEc0c3",
+    whatsappPhone: "551148100601",
+    chatUrl: "https://crm.mitrerealty.com.br/wcc/UserLoginSubmit.do"
+  }
+};
+var resolveEnvironment = (ambiente = "homol") => {
+  return ENVIRONMENTS[ambiente] ?? null;
+};
+
 // src/components/Form/index.tsx
-import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var phoneUtil = PhoneNumberUtil.getInstance();
+var PreferenciaContato = /* @__PURE__ */ ((PreferenciaContato2) => {
+  PreferenciaContato2["Whatsapp"] = "Whatsapp";
+  PreferenciaContato2["Email"] = "Email";
+  PreferenciaContato2["Ligacao"] = "Liga\xE7\xE3o";
+  return PreferenciaContato2;
+})(PreferenciaContato || {});
+var WHATSAPP_MESSAGE = "Ol\xE1! Tenho interesse e gostaria de mais informa\xE7\xF5es.";
+var WHATSAPP_TITLE = "Fale com um corretor por WhatsApp";
+var WHATSAPP_SUBTITLE = "Informe seus dados para contato.";
+var WHATSAPP_BUTTON_TEXT = "Entrar";
+var CHAT_TITLE = "Fale com um corretor por chat";
+var CHAT_SUBTITLE = "Informe seus dados para contato.";
+var CHAT_BUTTON_TEXT = "Entrar";
+var MODAL_ERROR_TITLE = "N\xE3o foi poss\xEDvel completar seu contato";
+var MODAL_ERROR_MESSAGE = "Por favor, tente novamente em alguns instantes.";
+var MODAL_ERROR_BUTTON_TEXT = "OK";
+var MODAL_SUCCESS_TITLE = "Cadastro realizado!";
+var MODAL_SUCCESS_MESSAGE_WHATSAPP = "Clique abaixo para continuar pelo WhatsApp.";
+var MODAL_SUCCESS_BUTTON_WHATSAPP = "Abrir WhatsApp";
+var MODAL_SUCCESS_MESSAGE_CHAT = "Clique abaixo para iniciar o atendimento.";
+var MODAL_SUCCESS_BUTTON_CHAT = "Iniciar atendimento";
+function buildWhatsappUrl(phone) {
+  const digits = phone.replace(/\D/g, "");
+  const text = encodeURIComponent(WHATSAPP_MESSAGE);
+  return `https://api.whatsapp.com/send?phone=${digits}&text=${text}`;
+}
+function submitChatInNewTab(chatUrl, virtualObj) {
+  const form = document.createElement("form");
+  form.method = "POST";
+  form.action = chatUrl;
+  form.target = "_blank";
+  const input = document.createElement("input");
+  input.type = "hidden";
+  input.name = "virtual_obj";
+  input.value = JSON.stringify(virtualObj);
+  form.appendChild(input);
+  document.body.appendChild(form);
+  form.submit();
+  document.body.removeChild(form);
+}
 var isPhoneValid = (phone) => {
   try {
     return phoneUtil.isValidNumber(phoneUtil.parseAndKeepRawInput(phone));
@@ -1208,8 +1432,8 @@ var schemaWithProduct = yup.object().shape({
 var schema = yup.object().shape(baseSchema);
 var MitreFormComponent = React2.forwardRef(({
   products,
-  apiUrl,
-  apiToken,
+  ambiente = "homol",
+  canal = "form",
   showHeader = true,
   title = "Atendimento por mensagem",
   subtitle = "Informe seus dados e retornaremos a mensagem.",
@@ -1223,8 +1447,10 @@ var MitreFormComponent = React2.forwardRef(({
   inputFocusBorderColor = theme.colors.yellow500,
   inputPlaceholderColor = theme.colors.gray100,
   inputTextColor = theme.colors.black,
-  onSuccess,
-  onError
+  showPreferenciaContato = false,
+  idProdutoTerceiro,
+  idEmpreendimento,
+  naoCriarEvento
 }, ref) => {
   useMontserratFont();
   const [loading, setIsLoading] = useState3(false);
@@ -1232,6 +1458,7 @@ var MitreFormComponent = React2.forwardRef(({
   const [successMessage, setSuccessMessage] = useState3("");
   const [formKey, setFormKey] = useState3(0);
   const [selectedProductId, setSelectedProductId] = useState3(null);
+  const [actionModal, setActionModal] = useState3(null);
   const validateProducts = () => {
     if (!products) {
       return "Lista de produtos n\xE3o foi fornecida";
@@ -1256,7 +1483,53 @@ var MitreFormComponent = React2.forwardRef(({
     }
     return null;
   };
+  const env = resolveEnvironment(ambiente);
+  const validateAmbienteConfig = () => {
+    if (!env) {
+      return `ambiente='${ambiente}' n\xE3o \xE9 reconhecido. Use 'homol' ou 'prod'.`;
+    }
+    if (!env.apiUrl || !env.apiToken) {
+      return `Configura\xE7\xE3o interna do ambiente '${ambiente}' est\xE1 incompleta (apiUrl/apiToken).`;
+    }
+    return null;
+  };
+  const validateWhatsappConfig = () => {
+    if (canal !== "whatsapp") return null;
+    if (!env) return null;
+    const raw = env.whatsappPhone?.trim() ?? "";
+    if (!raw) {
+      return `canal='whatsapp' exige whatsappPhone no ambiente '${ambiente}'.`;
+    }
+    const normalized = raw.startsWith("+") ? raw : `+${raw}`;
+    if (!isPhoneValid(normalized)) {
+      return `whatsappPhone do ambiente '${ambiente}' \xE9 inv\xE1lido (${JSON.stringify(env.whatsappPhone)}).`;
+    }
+    return null;
+  };
+  const validateChatConfig = () => {
+    if (canal !== "chat") return null;
+    if (!env) return null;
+    const raw = env.chatUrl?.trim() ?? "";
+    if (!raw) {
+      return `canal='chat' exige chatUrl no ambiente '${ambiente}'.`;
+    }
+    try {
+      const parsed = new URL(raw);
+      if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
+        return `chatUrl do ambiente '${ambiente}' precisa ter protocolo http(s) (recebido: ${JSON.stringify(env.chatUrl)}).`;
+      }
+    } catch {
+      return `chatUrl do ambiente '${ambiente}' n\xE3o \xE9 URL absoluta v\xE1lida (recebido: ${JSON.stringify(env.chatUrl)}).`;
+    }
+    return null;
+  };
   const productsValidationError = validateProducts();
+  const ambienteConfigError = validateAmbienteConfig();
+  const whatsappConfigError = validateWhatsappConfig();
+  const chatConfigError = validateChatConfig();
+  const effectiveShowPreferenciaContato = canal === "whatsapp" || canal === "chat" ? false : showPreferenciaContato;
+  const effectiveTitle = canal === "whatsapp" ? WHATSAPP_TITLE : canal === "chat" ? CHAT_TITLE : title;
+  const effectiveSubtitle = canal === "whatsapp" ? WHATSAPP_SUBTITLE : canal === "chat" ? CHAT_SUBTITLE : subtitle;
   const [utm, setUtm] = useState3({ utm_source: "direto", createdAt: (/* @__PURE__ */ new Date()).toISOString() });
   const formSchema = products && products.length > 1 ? schemaWithProduct : schema;
   const { control, register, handleSubmit, formState: { errors }, reset, clearErrors } = useForm({
@@ -1291,13 +1564,17 @@ var MitreFormComponent = React2.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";
+    setActionModal(null);
     try {
       setIsLoading(true);
-      if (!products || products.length === 0 || !apiToken) {
+      if (!env) {
+        throw new Error("Ambiente n\xE3o resolvido");
+      }
+      if (!products || products.length === 0) {
         throw new Error("Par\xE2metros obrigat\xF3rios n\xE3o informados");
       }
       let selectedProduct;
@@ -1313,6 +1590,8 @@ var MitreFormComponent = React2.forwardRef(({
         }
         selectedProduct = foundProduct;
       }
+      const paginaAtual = typeof window !== "undefined" ? window.location.href : void 0;
+      const naoCriarEventoEfetivo = canal !== "form" && (naoCriarEvento ?? true);
       const requestBody = {
         name,
         email,
@@ -1322,13 +1601,24 @@ var MitreFormComponent = React2.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,
+        ...canal === "whatsapp" ? { preferencia_contato: "Whatsapp" /* Whatsapp */ } : effectiveShowPreferenciaContato && preferencia_contato ? { preferencia_contato } : {},
+        ...canal !== "form" ? {
+          canal,
+          ...paginaAtual ? { pagina: paginaAtual } : {},
+          // Paridade com atendimento.html legado: o mesmo <form id="chat-form">
+          // era usado para chat e whatsapp, portanto is_chat=true ia em ambos.
+          is_chat: true,
+          ...idProdutoTerceiro !== void 0 ? { idProdutoTerceiro } : {},
+          ...idEmpreendimento !== void 0 ? { idEmpreendimento } : {},
+          ...naoCriarEventoEfetivo ? { naoCriarEvento: true } : {}
+        } : {}
       };
-      const response = await fetch(`${apiUrl}/leads`, {
+      const response = await fetch(`${env.apiUrl}/leads`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
-          Authorization: `Basic ${apiToken}`
+          Authorization: `Basic ${env.apiToken}`
         },
         body: JSON.stringify(requestBody)
       });
@@ -1337,26 +1627,61 @@ var MitreFormComponent = React2.forwardRef(({
       }
       const responseData = await response.json();
       const leadId = responseData.leadId || responseData.id || "";
-      setSuccessMessage("Mensagem enviada com sucesso!");
       resetForm();
-      onSuccess?.(requestBody, leadId);
+      if (canal === "whatsapp") {
+        setActionModal({
+          kind: "success",
+          canal: "whatsapp",
+          targetUrl: buildWhatsappUrl(env.whatsappPhone)
+        });
+      } else if (canal === "chat") {
+        const virtualObj = {
+          ...requestBody,
+          externalOriginId: leadId,
+          ...paginaAtual ? { pagina: paginaAtual } : {},
+          ...idProdutoTerceiro !== void 0 ? { idProdutoTerceiro } : {},
+          ...idEmpreendimento !== void 0 ? { idEmpreendimento } : {},
+          ...naoCriarEventoEfetivo ? { naoCriarEvento: true } : {}
+        };
+        setActionModal({
+          kind: "success",
+          canal: "chat",
+          chatUrl: env.chatUrl,
+          virtualObj
+        });
+      } else {
+        setSuccessMessage("Mensagem enviada com sucesso!");
+      }
     } catch (err) {
-      const error2 = err instanceof Error ? err : new Error("Erro desconhecido");
-      handleError(err);
-      onError?.(error2);
+      if (canal === "whatsapp" || canal === "chat") {
+        setActionModal({ kind: "error" });
+      } else {
+        handleError(err);
+      }
     } finally {
       setIsLoading(false);
     }
   };
-  if (productsValidationError) {
-    console.error("Erro na valida\xE7\xE3o dos produtos:", productsValidationError);
-    return /* @__PURE__ */ jsx6(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: /* @__PURE__ */ jsxs6(HeaderContainer, { children: [
-      /* @__PURE__ */ jsx6(Title, { $textColor: textColor, children: "Erro no carregamento do formul\xE1rio!" }),
-      /* @__PURE__ */ jsx6(Subtitle, { $textColor: textColor, children: "N\xE3o foi poss\xEDvel carregar o formul\xE1rio. Tente novamente mais tarde." })
+  if (productsValidationError || ambienteConfigError || whatsappConfigError || chatConfigError) {
+    if (productsValidationError) {
+      console.error("Erro na valida\xE7\xE3o dos produtos:", productsValidationError);
+    }
+    if (ambienteConfigError) {
+      console.error("Erro na valida\xE7\xE3o do ambiente:", ambienteConfigError);
+    }
+    if (whatsappConfigError) {
+      console.error("Erro na valida\xE7\xE3o do canal whatsapp:", whatsappConfigError);
+    }
+    if (chatConfigError) {
+      console.error("Erro na valida\xE7\xE3o do canal chat:", chatConfigError);
+    }
+    return /* @__PURE__ */ jsx7(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: /* @__PURE__ */ jsxs7(HeaderContainer, { children: [
+      /* @__PURE__ */ jsx7(Title, { $textColor: textColor, children: "Erro no carregamento do formul\xE1rio!" }),
+      /* @__PURE__ */ jsx7(Subtitle, { $textColor: textColor, children: "N\xE3o foi poss\xEDvel carregar o formul\xE1rio. Tente novamente mais tarde." })
     ] }) });
   }
-  return /* @__PURE__ */ jsxs6(Fragment, { children: [
-    error && /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs7(Fragment, { children: [
+    error && /* @__PURE__ */ jsx7(
       Alert,
       {
         type: "error",
@@ -1366,7 +1691,7 @@ var MitreFormComponent = React2.forwardRef(({
         children: error.message
       }
     ),
-    successMessage && /* @__PURE__ */ jsx6(
+    successMessage && /* @__PURE__ */ jsx7(
       Alert,
       {
         type: "success",
@@ -1376,13 +1701,58 @@ var MitreFormComponent = React2.forwardRef(({
         children: successMessage
       }
     ),
-    /* @__PURE__ */ jsxs6(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: [
-      showHeader && /* @__PURE__ */ jsxs6(HeaderContainer, { children: [
-        /* @__PURE__ */ jsx6(Title, { $textColor: textColor, children: title }),
-        /* @__PURE__ */ jsx6(Subtitle, { $textColor: textColor, children: subtitle })
+    actionModal?.kind === "error" && /* @__PURE__ */ jsx7(
+      Modal,
+      {
+        type: "error",
+        title: MODAL_ERROR_TITLE,
+        message: MODAL_ERROR_MESSAGE,
+        primaryButtonText: MODAL_ERROR_BUTTON_TEXT,
+        onPrimaryAction: () => setActionModal(null),
+        onClose: () => setActionModal(null),
+        primaryButtonBgColor: buttonBackgroundColor,
+        primaryButtonTextColor: buttonTextColor
+      }
+    ),
+    actionModal?.kind === "success" && actionModal.canal === "whatsapp" && /* @__PURE__ */ jsx7(
+      Modal,
+      {
+        type: "success",
+        title: MODAL_SUCCESS_TITLE,
+        message: MODAL_SUCCESS_MESSAGE_WHATSAPP,
+        primaryButtonText: MODAL_SUCCESS_BUTTON_WHATSAPP,
+        onPrimaryAction: () => {
+          window.open(actionModal.targetUrl, "_blank", "noopener,noreferrer");
+          setActionModal(null);
+        },
+        onClose: () => setActionModal(null),
+        primaryButtonBgColor: buttonBackgroundColor,
+        primaryButtonTextColor: buttonTextColor
+      }
+    ),
+    actionModal?.kind === "success" && actionModal.canal === "chat" && /* @__PURE__ */ jsx7(
+      Modal,
+      {
+        type: "success",
+        title: MODAL_SUCCESS_TITLE,
+        message: MODAL_SUCCESS_MESSAGE_CHAT,
+        primaryButtonText: MODAL_SUCCESS_BUTTON_CHAT,
+        onPrimaryAction: () => {
+          submitChatInNewTab(actionModal.chatUrl, actionModal.virtualObj);
+          setActionModal(null);
+        },
+        onClose: () => setActionModal(null),
+        primaryButtonBgColor: buttonBackgroundColor,
+        primaryButtonTextColor: buttonTextColor
+      }
+    ),
+    /* @__PURE__ */ jsxs7(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: [
+      showHeader && /* @__PURE__ */ jsxs7(HeaderContainer, { children: [
+        /* @__PURE__ */ jsx7(Title, { $textColor: textColor, children: effectiveTitle }),
+        /* @__PURE__ */ jsx7(Subtitle, { $textColor: textColor, children: effectiveSubtitle })
       ] }),
-      /* @__PURE__ */ jsxs6(Form, { $textColor: textColor, onSubmit: handleSubmit(sendMessage), noValidate: true, children: [
-        products.length > 1 && /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsxs7(Form, { $textColor: textColor, onSubmit: handleSubmit(sendMessage), noValidate: true, children: [
+        products.length > 1 && /* @__PURE__ */ jsx7(
           ProductSelect,
           {
             id: "productId",
@@ -1399,7 +1769,7 @@ var MitreFormComponent = React2.forwardRef(({
             textColor: inputTextColor
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           Input2,
           {
             id: "name",
@@ -1417,7 +1787,7 @@ var MitreFormComponent = React2.forwardRef(({
             inputTextColor
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           Input2,
           {
             id: "email",
@@ -1436,7 +1806,7 @@ var MitreFormComponent = React2.forwardRef(({
             inputTextColor
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           Controller,
           {
             name: "phone",
@@ -1445,7 +1815,7 @@ var MitreFormComponent = React2.forwardRef(({
             shouldUnregister: true,
             render: ({ field }) => {
               const errorMsg = errors.phone?.inputValue?.message || errors.phone?.phone?.message || errors.phone?.message;
-              return /* @__PURE__ */ jsx6(
+              return /* @__PURE__ */ jsx7(
                 PhoneInput2,
                 {
                   id: "phone",
@@ -1468,12 +1838,32 @@ var MitreFormComponent = React2.forwardRef(({
           },
           formKey
         ),
-        /* @__PURE__ */ jsx6("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
-        /* @__PURE__ */ jsx6(ButtonContainer, { children: /* @__PURE__ */ jsx6(Button2, { bgColor: buttonBackgroundColor, color: buttonTextColor, type: "submit", isSubmitting: loading, children: "Enviar mensagem" }) }),
-        /* @__PURE__ */ jsxs6("p", { children: [
+        effectiveShowPreferenciaContato && /* @__PURE__ */ jsxs7(FormControl, { isInvalid: !!errors.preferencia_contato, children: [
+          /* @__PURE__ */ jsx7(FormLabel, { htmlFor: "preferencia_contato", $textColor: textColor, children: "Prefer\xEAncia de Contato" }),
+          /* @__PURE__ */ jsxs7(
+            Select,
+            {
+              id: "preferencia_contato",
+              ...register("preferencia_contato"),
+              defaultValue: "",
+              $backgroundColor: inputBackgroundColor,
+              $borderColor: inputBorderColor,
+              $focusBorderColor: inputFocusBorderColor,
+              $textColor: inputTextColor,
+              children: [
+                /* @__PURE__ */ jsx7("option", { value: "", disabled: true, children: "Selecione uma op\xE7\xE3o" }),
+                Object.values(PreferenciaContato).map((op) => /* @__PURE__ */ jsx7("option", { value: op, children: op }, op))
+              ]
+            }
+          ),
+          errors.preferencia_contato && /* @__PURE__ */ jsx7(FormErrorMessage, { children: errors.preferencia_contato.message })
+        ] }),
+        /* @__PURE__ */ jsx7("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
+        /* @__PURE__ */ jsx7(ButtonContainer, { children: /* @__PURE__ */ jsx7(Button2, { bgColor: buttonBackgroundColor, color: buttonTextColor, type: "submit", isSubmitting: loading, children: canal === "whatsapp" ? WHATSAPP_BUTTON_TEXT : canal === "chat" ? CHAT_BUTTON_TEXT : "Enviar mensagem" }) }),
+        /* @__PURE__ */ jsxs7("p", { children: [
           "A Mitre Realty respeita a sua privacidade e utiliza os seus dados pessoais para contat\xE1-lo por e-mail ou telefone aqui registrados. Para saber mais, acesse a nossa",
           " ",
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             "a",
             {
               href: "https://www.mitrerealty.com.br/politica-de-privacidade",
@@ -1495,6 +1885,7 @@ var MitreFormComponent = React2.forwardRef(({
 MitreFormComponent.displayName = "MitreFormComponent";
 var Form_default = MitreFormComponent;
 export {
-  Form_default as MitreFormComponent
+  Form_default as MitreFormComponent,
+  PreferenciaContato
 };
 //# sourceMappingURL=index.js.map