mitre-form-component 0.0.4 → 0.0.6

package/dist/{index.mjs → index.cjs}

@@ -1,12 +1,46 @@
-"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  MitreFormComponent: () => Form_default
+});
+module.exports = __toCommonJS(index_exports);
 
 // src/components/Form/index.tsx
-import React3, { useState as useState3 } from "react";
+var import_react5 = __toESM(require("react"), 1);
 
 // src/components/hooks/useError.ts
-import { useState } from "react";
+var import_react = require("react");
 function useError() {
-  const [error, setError] = useState(null);
+  const [error, setError] = (0, import_react.useState)(null);
   const handleError = (err) => {
     const errorObj = err instanceof Error ? err : new Error(String(err));
     setError(errorObj);
@@ -17,9 +51,9 @@ function useError() {
 }
 
 // src/components/Form/index.tsx
-import { useForm } from "react-hook-form";
-import { yupResolver } from "@hookform/resolvers/yup";
-import * as yup from "yup";
+var import_react_hook_form = require("react-hook-form");
+var import_yup = require("@hookform/resolvers/yup");
+var yup = __toESM(require("yup"), 1);
 
 // src/components/styles/utils.ts
 function flex(direction = "row", alignItems, justifyContent) {
@@ -42,14 +76,18 @@ var opacityEffect = `
 `;
 
 // src/components/Form/styles.ts
-import styled from "styled-components";
-var FormContainer = styled.div`
+var import_styled_components = __toESM(require("styled-components"), 1);
+var FormContainer = import_styled_components.default.div`
   ${flex("column")}
   align-items: stretch;
   justify-content: flex-start;
   overflow-x: hidden;
   overflow-y: auto;
 
+  background: ${(props) => props.$backgroundColor || " #cecece"};
+
+  padding: ${(props) => props.innerPadding || "1rem"};
+
   /* Hide scrollbars for WebKit browsers */
   ::-webkit-scrollbar {
     display: none;
@@ -59,11 +97,12 @@ var FormContainer = styled.div`
   scrollbar-width: none;
 
   box-sizing: border-box;
+  height: 100%;
 `;
-var HeaderContainer = styled.div`
+var HeaderContainer = import_styled_components.default.div`
   margin-bottom: 1rem;
 `;
-var ButtonContainer = styled.div`
+var ButtonContainer = import_styled_components.default.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -71,7 +110,7 @@ var ButtonContainer = styled.div`
   width: 100%;
   margin-top: 0.75rem;
 `;
-var Form = styled.form`
+var Form = import_styled_components.default.form`
   label {
     font-weight: 700;
   }
@@ -119,14 +158,14 @@ var Form = styled.form`
     margin-bottom: 10px;
   }
 `;
-var Title = styled.h2`
+var Title = import_styled_components.default.h2`
   font-size: 1.25rem;
   font-weight: 700;
   line-height: 24px;
   letter-spacing: 0em;
   color: ${(props) => props.$textColor || "var(--black)"};
 `;
-var Text = styled.p`
+var Text = import_styled_components.default.p`
   font-size: 1rem;
   font-weight: 400;
   line-height: 23px;
@@ -136,9 +175,9 @@ var Text = styled.p`
 `;
 
 // src/components/styles/global.ts
-import { createGlobalStyle } from "styled-components";
-import { useEffect } from "react";
-var GlobalStyles = createGlobalStyle`
+var import_styled_components2 = require("styled-components");
+var import_react2 = require("react");
+var GlobalStyles = import_styled_components2.createGlobalStyle`
   :root {
     --red: #e52e4d;
     --white: #FFF;
@@ -285,7 +324,7 @@ var GlobalStyles = createGlobalStyle`
 
 `;
 var FontLoader = () => {
-  useEffect(() => {
+  (0, import_react2.useEffect)(() => {
     const link = document.createElement("link");
     link.href = "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap";
     link.rel = "stylesheet";
@@ -296,11 +335,7 @@ var FontLoader = () => {
 var global_default = FontLoader;
 
 // src/components/Input/index.tsx
-import {
-  forwardRef,
-  useCallback,
-  useRef
-} from "react";
+var import_react3 = require("react");
 
 // src/components/Input/masks.ts
 function cep(e) {
@@ -341,12 +376,12 @@ function date(e) {
 }
 
 // src/components/Input/index.tsx
-import "react-phone-input-2/lib/style.css";
+var import_style = require("react-phone-input-2/lib/style.css");
 
 // src/components/Input/styles.ts
-import styled2, { css } from "styled-components";
-import PhoneInput from "react-phone-input-2";
-var FormLabel = styled2.label`
+var import_styled_components3 = __toESM(require("styled-components"), 1);
+var import_react_phone_input_2 = __toESM(require("react-phone-input-2"), 1);
+var FormLabel = import_styled_components3.default.label`
   font-family: "Montserrat", sans-serif;
   font-style: normal;
   font-weight: 500;
@@ -356,7 +391,7 @@ var FormLabel = styled2.label`
   margin-bottom: 0.5rem;
   text-align: left;
 `;
-var Input = styled2.input`
+var Input = import_styled_components3.default.input`
   font-family: "Montserrat", sans-serif;
   font-style: normal;
   font-weight: 500;
@@ -398,7 +433,7 @@ var Input = styled2.input`
     font-weight: 500;
   }
 `;
-var FormPhoneInput = styled2(PhoneInput)`
+var FormPhoneInput = (0, import_styled_components3.default)(import_react_phone_input_2.default)`
   .form-control {
     background: white;
     color: ${(props) => props.isInvalid ? "var(--red)" : props.$textColor || "var(--black)"};
@@ -461,24 +496,24 @@ var FormPhoneInput = styled2(PhoneInput)`
     }
   }
 `;
-var FormErrorMessage = styled2.small`
+var FormErrorMessage = import_styled_components3.default.small`
   font-size: 0.75rem;
   line-height: 1.125rem;
   color: var(--red);
   margin-top: 0.25rem;
   display: block;
 `;
-var FormControl = styled2.div.withConfig({
+var FormControl = import_styled_components3.default.div.withConfig({
   shouldForwardProp: (prop) => !["isInvalid", "$bordercolor"].includes(prop)
 })`
   ${FormLabel} {
-    ${(props) => props.isInvalid && css`
+    ${(props) => props.isInvalid && import_styled_components3.css`
         color: var(--red);
       `};
   }
 
   ${Input} {
-    ${(props) => props.isInvalid && css`
+    ${(props) => props.isInvalid && import_styled_components3.css`
         border: 1px solid var(--red);
 
         &:not(:focus)::placeholder {
@@ -488,14 +523,14 @@ var FormControl = styled2.div.withConfig({
       `};
 
     &:focus {
-      ${(props) => props.isInvalid && css`
+      ${(props) => props.isInvalid && import_styled_components3.css`
           border: 1px solid var(--red);
         `};
     }
   }
 
   ${FormPhoneInput} {
-    ${(props) => props.isInvalid && css`
+    ${(props) => props.isInvalid && import_styled_components3.css`
         border: 1px solid var(--red);
 
         &:not(:focus)::placeholder {
@@ -505,7 +540,7 @@ var FormControl = styled2.div.withConfig({
       `};
 
     &:focus {
-      ${(props) => props.isInvalid && css`
+      ${(props) => props.isInvalid && import_styled_components3.css`
           border: 1px solid var(--red);
         `};
     }
@@ -513,11 +548,11 @@ var FormControl = styled2.div.withConfig({
 `;
 
 // src/components/Input/index.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+var import_jsx_runtime = require("react/jsx-runtime");
 var InputBase = ({ id, label, error, showErrorMessage = true, borderColor, textColor, mask = "", type = "text", ...rest }, ref) => {
-  const phoneInputRef = useRef(null);
+  const phoneInputRef = (0, import_react3.useRef)(null);
   const { onChange, name } = rest;
-  const handleKeyUp = useCallback(
+  const handleKeyUp = (0, import_react3.useCallback)(
     (e) => {
       if (mask === "cep") cep(e);
       if (mask === "currency") currency(e);
@@ -526,15 +561,15 @@ var InputBase = ({ id, label, error, showErrorMessage = true, borderColor, textC
     },
     [mask]
   );
-  const handlePhoneChange = useCallback((value) => {
+  const handlePhoneChange = (0, import_react3.useCallback)((value) => {
     onChange?.({ target: { value, name } });
     if (phoneInputRef.current?.input) {
       phoneInputRef.current.input.value = value;
     }
   }, [onChange, name]);
-  return /* @__PURE__ */ jsxs(FormControl, { isInvalid: !!error, children: [
-    !!label && /* @__PURE__ */ jsx(FormLabel, { htmlFor: id, $textColor: textColor, children: label }),
-    !mask ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FormControl, { isInvalid: !!error, children: [
+    !!label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormLabel, { htmlFor: id, $textColor: textColor, children: label }),
+    !mask ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       Input,
       {
         id,
@@ -545,7 +580,7 @@ var InputBase = ({ id, label, error, showErrorMessage = true, borderColor, textC
         autoComplete: rest.autoComplete || "on",
         ...rest
       }
-    ) : mask === "phone" ? /* @__PURE__ */ jsx(
+    ) : mask === "phone" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       FormPhoneInput,
       {
         country: "br",
@@ -572,7 +607,7 @@ var InputBase = ({ id, label, error, showErrorMessage = true, borderColor, textC
         disableCountryCode: true,
         value: rest.value
       }
-    ) : /* @__PURE__ */ jsx(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       Input,
       {
         id,
@@ -585,15 +620,15 @@ var InputBase = ({ id, label, error, showErrorMessage = true, borderColor, textC
         ...rest
       }
     ),
-    !!error && showErrorMessage && /* @__PURE__ */ jsx(FormErrorMessage, { "data-testid": "error-message", children: typeof error === "string" ? error : error.message })
+    !!error && showErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormErrorMessage, { "data-testid": "error-message", children: typeof error === "string" ? error : error.message })
   ] });
 };
-var Input2 = forwardRef(InputBase);
+var Input2 = (0, import_react3.forwardRef)(InputBase);
 
 // src/components/Button/styles.ts
-import { darken } from "polished";
-import styled3, { css as css2 } from "styled-components";
-var Icon = styled3.span`
+var import_polished = require("polished");
+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;
@@ -603,7 +638,7 @@ var Icon = styled3.span`
   opacity: 0;
   margin-right: 0.625rem;
 `;
-var Text2 = styled3.span`
+var Text2 = import_styled_components4.default.span`
   font-family: "Montserrat", sans-serif;
   font-size: 1rem;
   line-height: 1.5rem;
@@ -611,14 +646,14 @@ var Text2 = styled3.span`
 
   transition: all 0.25s ease;
 `;
-var TextSubmitting = styled3.span`
+var TextSubmitting = import_styled_components4.default.span`
   font-family: "Montserrat", sans-serif;
   font-weight: 400;
   font-size: 1rem;
 
   transition: all 0.25s ease;
 `;
-var LoadingIcon = styled3.span.withConfig({
+var LoadingIcon = import_styled_components4.default.span.withConfig({
   shouldForwardProp: (prop) => prop !== "hasText"
 })`
   display: block;
@@ -641,7 +676,7 @@ var LoadingIcon = styled3.span.withConfig({
     }
   }
 `;
-var Button = styled3.button.withConfig({
+var Button = import_styled_components4.default.button.withConfig({
   shouldForwardProp: (prop) => ![
     "hasIcon",
     "isSubmitting",
@@ -652,9 +687,9 @@ var Button = styled3.button.withConfig({
     "height"
   ].includes(prop)
 })`
-  background: ${(props) => darken(0.1, props?.bgColor || "#F6C76B")};
+  background: ${(props) => (0, import_polished.darken)(0.1, props?.bgColor || "#F6C76B")};
   color: ${(props) => props?.color || "#2F2F2F"};
-  border: 1px solid ${(props) => darken(0.1, props?.bordercolor || "#F6C76B")};
+  border: 1px solid ${(props) => (0, import_polished.darken)(0.1, props?.bordercolor || "#F6C76B")};
   border-radius: 2px;
 
   display: inline-flex;
@@ -683,8 +718,8 @@ var Button = styled3.button.withConfig({
   }
 
   &:hover {
-    background: ${(props) => darken(0.2, props?.bgColor || "#F6C76B")};
-    border-color: ${(props) => darken(0.2, props?.bordercolor || "#F6C76B")};
+    background: ${(props) => (0, import_polished.darken)(0.2, props?.bgColor || "#F6C76B")};
+    border-color: ${(props) => (0, import_polished.darken)(0.2, props?.bordercolor || "#F6C76B")};
 
     ${Icon} {
       opacity: 1;
@@ -698,14 +733,14 @@ var Button = styled3.button.withConfig({
   }
 
   ${Text2} {
-    ${(props) => props.isSubmitting && !props.hasSubmittingMessage && css2`
+    ${(props) => props.isSubmitting && !props.hasSubmittingMessage && import_styled_components4.css`
         transform: unset;
         opacity: 0;
       `}
   }
 
   ${LoadingIcon} {
-    ${(props) => props.isSubmitting && !props.hasSubmittingMessage && css2`
+    ${(props) => props.isSubmitting && !props.hasSubmittingMessage && import_styled_components4.css`
         display: flex;
         -webkit-box-align: center;
         align-items: center;
@@ -715,7 +750,7 @@ var Button = styled3.button.withConfig({
 `;
 
 // src/components/Button/index.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function Button2({
   children,
   icon,
@@ -725,7 +760,7 @@ function Button2({
   color = "#2F2F2F",
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     Button,
     {
       isSubmitting,
@@ -736,30 +771,30 @@ function Button2({
       color,
       ...rest,
       children: [
-        icon && !isSubmitting && /* @__PURE__ */ jsx2(Icon, { "data-testid": "button-icon", children: icon }),
-        isSubmitting && /* @__PURE__ */ jsx2(LoadingIcon, { hasText: submittingMessage.length > 0 }),
-        (!isSubmitting || submittingMessage.length === 0) && /* @__PURE__ */ jsx2(Text2, { className: "text", children }),
-        isSubmitting && submittingMessage.length > 0 && /* @__PURE__ */ jsx2(TextSubmitting, { children: submittingMessage })
+        icon && !isSubmitting && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { "data-testid": "button-icon", children: icon }),
+        isSubmitting && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LoadingIcon, { hasText: submittingMessage.length > 0 }),
+        (!isSubmitting || submittingMessage.length === 0) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text2, { className: "text", children }),
+        isSubmitting && submittingMessage.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TextSubmitting, { children: submittingMessage })
       ]
     }
   );
 }
 
 // src/components/Alert/index.tsx
-import { useEffect as useEffect2, useState as useState2, useCallback as useCallback2 } from "react";
+var import_react4 = require("react");
 
 // src/components/Alert/styles.ts
-import styled4, { css as css3, keyframes } from "styled-components";
-var fadeIn = 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 = keyframes`
+var fadeOut = import_styled_components5.keyframes`
   from { opacity: 1; transform: translateY(0); }
   to { opacity: 0; transform: translateY(-10px); }
 `;
 var typeStyles = {
-  error: css3`
+  error: import_styled_components5.css`
     background-color: var(--red);
     border: 1px solid var(--red);
     color: var(--white);
@@ -767,7 +802,7 @@ var typeStyles = {
       color: var(--white);
     }
   `,
-  warning: css3`
+  warning: import_styled_components5.css`
     background-color: var(--yellow-500);
     border: 1px solid var(--yellow-400);
     color: var(--black);
@@ -775,7 +810,7 @@ var typeStyles = {
       color: var(--black);
     }
   `,
-  info: css3`
+  info: import_styled_components5.css`
     background-color: var(--blue);
     border: 1px solid var(--blue);
     color: var(--white);
@@ -783,7 +818,7 @@ var typeStyles = {
       color: var(--white);
     }
   `,
-  success: css3`
+  success: import_styled_components5.css`
     background-color: var(--green);
     border: 1px solid var(--green-2);
     color: var(--white);
@@ -792,7 +827,7 @@ var typeStyles = {
     }
   `
 };
-var AlertContainer = styled4.div`
+var AlertContainer = import_styled_components5.default.div`
   position: fixed;
   width: 500px;
   top: 15px;
@@ -812,7 +847,7 @@ var AlertContainer = styled4.div`
 
   ${({ $type }) => typeStyles[$type]}
 `;
-var DismissButton = styled4.button`
+var DismissButton = import_styled_components5.default.button`
   position: absolute;
   background: transparent;
   right: 10px;
@@ -833,8 +868,8 @@ var DismissButton = styled4.button`
 `;
 
 // src/components/Alert/index.tsx
-import { HiX } from "react-icons/hi";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var import_hi = require("react-icons/hi");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var Alert = ({
   type = "info",
   children,
@@ -843,18 +878,18 @@ var Alert = ({
   onDismiss,
   autoDismiss
 }) => {
-  const [isClosing, setIsClosing] = useState2(false);
-  const handleDismiss = useCallback2(() => {
+  const [isClosing, setIsClosing] = (0, import_react4.useState)(false);
+  const handleDismiss = (0, import_react4.useCallback)(() => {
     setIsClosing(true);
     setTimeout(() => onDismiss?.(), 300);
   }, [onDismiss]);
-  useEffect2(() => {
+  (0, import_react4.useEffect)(() => {
     if (autoDismiss) {
       const timer = setTimeout(handleDismiss, autoDismiss);
       return () => clearTimeout(timer);
     }
   }, [autoDismiss, handleDismiss]);
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     AlertContainer,
     {
       $type: type,
@@ -864,12 +899,12 @@ var Alert = ({
       role: "alert",
       children: [
         children,
-        dismissible && /* @__PURE__ */ jsx3(
+        dismissible && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           DismissButton,
           {
             onClick: handleDismiss,
             "aria-label": "Dismiss alert",
-            children: /* @__PURE__ */ jsx3(HiX, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_hi.HiX, {})
           }
         )
       ]
@@ -878,7 +913,7 @@ var Alert = ({
 };
 
 // src/components/Form/index.tsx
-import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var schema = yup.object().shape({
   name: yup.string().required("Nome \xE9 obrigat\xF3rio"),
   email: yup.string().required("Email \xE9 obrigat\xF3rio").email("Email inv\xE1lido"),
@@ -891,7 +926,7 @@ var schema = yup.object().shape({
     }
   )
 });
-var MitreFormComponent = React3.forwardRef(({
+var MitreFormComponent = import_react5.default.forwardRef(({
   productId,
   apiUrl,
   apiToken,
@@ -901,13 +936,15 @@ var MitreFormComponent = React3.forwardRef(({
   utm_term,
   showHeader = true,
   colorPrimary = "#F6C76B",
-  textColor = "#2F2F2F"
+  textColor = "#2F2F2F",
+  backgroundColor = "#cecece",
+  innerPadding = "1rem"
 }, ref) => {
-  const [loading, setIsLoading] = useState3(false);
+  const [loading, setIsLoading] = (0, import_react5.useState)(false);
   const { error, handleError, clearError } = useError();
-  const [successMessage, setSuccessMessage] = useState3("");
-  const { register, handleSubmit, formState: { errors }, reset, watch } = useForm({
-    resolver: yupResolver(schema)
+  const [successMessage, setSuccessMessage] = (0, import_react5.useState)("");
+  const { register, handleSubmit, formState: { errors }, reset, watch } = (0, import_react_hook_form.useForm)({
+    resolver: (0, import_yup.yupResolver)(schema)
   });
   const phoneValue = watch("phone");
   const sendMessage = async (data) => {
@@ -947,10 +984,10 @@ var MitreFormComponent = React3.forwardRef(({
       setIsLoading(false);
     }
   };
-  return /* @__PURE__ */ jsxs4(Fragment, { children: [
-    /* @__PURE__ */ jsx4(global_default, {}),
-    /* @__PURE__ */ jsx4(GlobalStyles, {}),
-    error && /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(global_default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(GlobalStyles, {}),
+    error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       Alert,
       {
         type: "error",
@@ -960,7 +997,7 @@ var MitreFormComponent = React3.forwardRef(({
         children: error.message
       }
     ),
-    successMessage && /* @__PURE__ */ jsx4(
+    successMessage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       Alert,
       {
         type: "success",
@@ -970,13 +1007,13 @@ var MitreFormComponent = React3.forwardRef(({
         children: successMessage
       }
     ),
-    /* @__PURE__ */ jsxs4(FormContainer, { ref, children: [
-      showHeader && /* @__PURE__ */ jsxs4(HeaderContainer, { children: [
-        /* @__PURE__ */ jsx4(Title, { $textColor: textColor, children: "Atendimento por mensagem" }),
-        /* @__PURE__ */ jsx4(Text, { $textColor: textColor, children: "Informe seus dados e retornaremos a mensagem." })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(FormContainer, { $backgroundColor: backgroundColor, innerPadding, ref, children: [
+      showHeader && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(HeaderContainer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Title, { $textColor: textColor, children: "Atendimento por mensagem" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Text, { $textColor: textColor, children: "Informe seus dados e retornaremos a mensagem." })
       ] }),
-      /* @__PURE__ */ jsxs4(Form, { $textColor: textColor, onSubmit: handleSubmit(sendMessage), noValidate: true, children: [
-        /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Form, { $textColor: textColor, onSubmit: handleSubmit(sendMessage), noValidate: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           Input2,
           {
             id: "name",
@@ -990,7 +1027,7 @@ var MitreFormComponent = React3.forwardRef(({
             required: true
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           Input2,
           {
             id: "email",
@@ -1005,7 +1042,7 @@ var MitreFormComponent = React3.forwardRef(({
             required: true
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           Input2,
           {
             id: "phone",
@@ -1020,12 +1057,12 @@ var MitreFormComponent = React3.forwardRef(({
             value: phoneValue
           }
         ),
-        /* @__PURE__ */ jsx4("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
-        /* @__PURE__ */ jsx4(ButtonContainer, { children: /* @__PURE__ */ jsx4(Button2, { bgColor: colorPrimary, color: textColor, type: "submit", isSubmitting: loading, children: "Enviar mensagem" }) }),
-        /* @__PURE__ */ jsxs4("p", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ButtonContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Button2, { bgColor: colorPrimary, color: textColor, type: "submit", isSubmitting: loading, children: "Enviar mensagem" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("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__ */ jsx4(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "a",
             {
               href: "https://www.mitrerealty.com.br/politica-de-privacidade",
@@ -1046,7 +1083,8 @@ var MitreFormComponent = React3.forwardRef(({
 });
 MitreFormComponent.displayName = "MitreFormComponent";
 var Form_default = MitreFormComponent;
-export {
-  Form_default as MitreFormComponent
-};
-//# sourceMappingURL=index.mjs.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MitreFormComponent
+});
+//# sourceMappingURL=index.cjs.map