mitre-form-component 0.0.4 → 0.0.6

package/dist/index.js

@@ -1,47 +1,10 @@
-"use strict";
-"use client";
-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
-var import_react5 = __toESM(require("react"));
+import React3, { useState as useState3 } from "react";
 
 // src/components/hooks/useError.ts
-var import_react = require("react");
+import { useState } from "react";
 function useError() {
-  const [error, setError] = (0, import_react.useState)(null);
+  const [error, setError] = useState(null);
   const handleError = (err) => {
     const errorObj = err instanceof Error ? err : new Error(String(err));
     setError(errorObj);
@@ -52,9 +15,9 @@ function useError() {
 }
 
 // src/components/Form/index.tsx
-var import_react_hook_form = require("react-hook-form");
-var import_yup = require("@hookform/resolvers/yup");
-var yup = __toESM(require("yup"));
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
 
 // src/components/styles/utils.ts
 function flex(direction = "row", alignItems, justifyContent) {
@@ -77,14 +40,18 @@ var opacityEffect = `
 `;
 
 // src/components/Form/styles.ts
-var import_styled_components = __toESM(require("styled-components"));
-var FormContainer = import_styled_components.default.div`
+import styled from "styled-components";
+var FormContainer = styled.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;
@@ -94,11 +61,12 @@ var FormContainer = import_styled_components.default.div`
   scrollbar-width: none;
 
   box-sizing: border-box;
+  height: 100%;
 `;
-var HeaderContainer = import_styled_components.default.div`
+var HeaderContainer = styled.div`
   margin-bottom: 1rem;
 `;
-var ButtonContainer = import_styled_components.default.div`
+var ButtonContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -106,7 +74,7 @@ var ButtonContainer = import_styled_components.default.div`
   width: 100%;
   margin-top: 0.75rem;
 `;
-var Form = import_styled_components.default.form`
+var Form = styled.form`
   label {
     font-weight: 700;
   }
@@ -154,14 +122,14 @@ var Form = import_styled_components.default.form`
     margin-bottom: 10px;
   }
 `;
-var Title = import_styled_components.default.h2`
+var Title = styled.h2`
   font-size: 1.25rem;
   font-weight: 700;
   line-height: 24px;
   letter-spacing: 0em;
   color: ${(props) => props.$textColor || "var(--black)"};
 `;
-var Text = import_styled_components.default.p`
+var Text = styled.p`
   font-size: 1rem;
   font-weight: 400;
   line-height: 23px;
@@ -171,9 +139,9 @@ var Text = import_styled_components.default.p`
 `;
 
 // src/components/styles/global.ts
-var import_styled_components2 = require("styled-components");
-var import_react2 = require("react");
-var GlobalStyles = import_styled_components2.createGlobalStyle`
+import { createGlobalStyle } from "styled-components";
+import { useEffect } from "react";
+var GlobalStyles = createGlobalStyle`
   :root {
     --red: #e52e4d;
     --white: #FFF;
@@ -320,7 +288,7 @@ var GlobalStyles = import_styled_components2.createGlobalStyle`
 
 `;
 var FontLoader = () => {
-  (0, import_react2.useEffect)(() => {
+  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";
@@ -331,7 +299,11 @@ var FontLoader = () => {
 var global_default = FontLoader;
 
 // src/components/Input/index.tsx
-var import_react3 = require("react");
+import {
+  forwardRef,
+  useCallback,
+  useRef
+} from "react";
 
 // src/components/Input/masks.ts
 function cep(e) {
@@ -372,12 +344,12 @@ function date(e) {
 }
 
 // src/components/Input/index.tsx
-var import_style = require("react-phone-input-2/lib/style.css");
+import "react-phone-input-2/lib/style.css";
 
 // src/components/Input/styles.ts
-var import_styled_components3 = __toESM(require("styled-components"));
-var import_react_phone_input_2 = __toESM(require("react-phone-input-2"));
-var FormLabel = import_styled_components3.default.label`
+import styled2, { css } from "styled-components";
+import PhoneInput from "react-phone-input-2";
+var FormLabel = styled2.label`
   font-family: "Montserrat", sans-serif;
   font-style: normal;
   font-weight: 500;
@@ -387,7 +359,7 @@ var FormLabel = import_styled_components3.default.label`
   margin-bottom: 0.5rem;
   text-align: left;
 `;
-var Input = import_styled_components3.default.input`
+var Input = styled2.input`
   font-family: "Montserrat", sans-serif;
   font-style: normal;
   font-weight: 500;
@@ -429,7 +401,7 @@ var Input = import_styled_components3.default.input`
     font-weight: 500;
   }
 `;
-var FormPhoneInput = (0, import_styled_components3.default)(import_react_phone_input_2.default)`
+var FormPhoneInput = styled2(PhoneInput)`
   .form-control {
     background: white;
     color: ${(props) => props.isInvalid ? "var(--red)" : props.$textColor || "var(--black)"};
@@ -492,24 +464,24 @@ var FormPhoneInput = (0, import_styled_components3.default)(import_react_phone_i
     }
   }
 `;
-var FormErrorMessage = import_styled_components3.default.small`
+var FormErrorMessage = styled2.small`
   font-size: 0.75rem;
   line-height: 1.125rem;
   color: var(--red);
   margin-top: 0.25rem;
   display: block;
 `;
-var FormControl = import_styled_components3.default.div.withConfig({
+var FormControl = styled2.div.withConfig({
   shouldForwardProp: (prop) => !["isInvalid", "$bordercolor"].includes(prop)
 })`
   ${FormLabel} {
-    ${(props) => props.isInvalid && import_styled_components3.css`
+    ${(props) => props.isInvalid && css`
         color: var(--red);
       `};
   }
 
   ${Input} {
-    ${(props) => props.isInvalid && import_styled_components3.css`
+    ${(props) => props.isInvalid && css`
         border: 1px solid var(--red);
 
         &:not(:focus)::placeholder {
@@ -519,14 +491,14 @@ var FormControl = import_styled_components3.default.div.withConfig({
       `};
 
     &:focus {
-      ${(props) => props.isInvalid && import_styled_components3.css`
+      ${(props) => props.isInvalid && css`
           border: 1px solid var(--red);
         `};
     }
   }
 
   ${FormPhoneInput} {
-    ${(props) => props.isInvalid && import_styled_components3.css`
+    ${(props) => props.isInvalid && css`
         border: 1px solid var(--red);
 
         &:not(:focus)::placeholder {
@@ -536,7 +508,7 @@ var FormControl = import_styled_components3.default.div.withConfig({
       `};
 
     &:focus {
-      ${(props) => props.isInvalid && import_styled_components3.css`
+      ${(props) => props.isInvalid && css`
           border: 1px solid var(--red);
         `};
     }
@@ -544,11 +516,11 @@ var FormControl = import_styled_components3.default.div.withConfig({
 `;
 
 // src/components/Input/index.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+import { jsx, jsxs } from "react/jsx-runtime";
 var InputBase = ({ id, label, error, showErrorMessage = true, borderColor, textColor, mask = "", type = "text", ...rest }, ref) => {
-  const phoneInputRef = (0, import_react3.useRef)(null);
+  const phoneInputRef = useRef(null);
   const { onChange, name } = rest;
-  const handleKeyUp = (0, import_react3.useCallback)(
+  const handleKeyUp = useCallback(
     (e) => {
       if (mask === "cep") cep(e);
       if (mask === "currency") currency(e);
@@ -557,15 +529,15 @@ var InputBase = ({ id, label, error, showErrorMessage = true, borderColor, textC
     },
     [mask]
   );
-  const handlePhoneChange = (0, import_react3.useCallback)((value) => {
+  const handlePhoneChange = useCallback((value) => {
     onChange?.({ target: { value, name } });
     if (phoneInputRef.current?.input) {
       phoneInputRef.current.input.value = value;
     }
   }, [onChange, name]);
-  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)(
+  return /* @__PURE__ */ jsxs(FormControl, { isInvalid: !!error, children: [
+    !!label && /* @__PURE__ */ jsx(FormLabel, { htmlFor: id, $textColor: textColor, children: label }),
+    !mask ? /* @__PURE__ */ jsx(
       Input,
       {
         id,
@@ -576,7 +548,7 @@ var InputBase = ({ id, label, error, showErrorMessage = true, borderColor, textC
         autoComplete: rest.autoComplete || "on",
         ...rest
       }
-    ) : mask === "phone" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    ) : mask === "phone" ? /* @__PURE__ */ jsx(
       FormPhoneInput,
       {
         country: "br",
@@ -603,7 +575,7 @@ var InputBase = ({ id, label, error, showErrorMessage = true, borderColor, textC
         disableCountryCode: true,
         value: rest.value
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    ) : /* @__PURE__ */ jsx(
       Input,
       {
         id,
@@ -616,15 +588,15 @@ var InputBase = ({ id, label, error, showErrorMessage = true, borderColor, textC
         ...rest
       }
     ),
-    !!error && showErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormErrorMessage, { "data-testid": "error-message", children: typeof error === "string" ? error : error.message })
+    !!error && showErrorMessage && /* @__PURE__ */ jsx(FormErrorMessage, { "data-testid": "error-message", children: typeof error === "string" ? error : error.message })
   ] });
 };
-var Input2 = (0, import_react3.forwardRef)(InputBase);
+var Input2 = forwardRef(InputBase);
 
 // src/components/Button/styles.ts
-var import_polished = require("polished");
-var import_styled_components4 = __toESM(require("styled-components"));
-var Icon = import_styled_components4.default.span`
+import { darken } from "polished";
+import styled3, { css as css2 } from "styled-components";
+var Icon = styled3.span`
   font-size: 0;
   line-height: 0;
   transition: all 0.25s ease;
@@ -634,7 +606,7 @@ var Icon = import_styled_components4.default.span`
   opacity: 0;
   margin-right: 0.625rem;
 `;
-var Text2 = import_styled_components4.default.span`
+var Text2 = styled3.span`
   font-family: "Montserrat", sans-serif;
   font-size: 1rem;
   line-height: 1.5rem;
@@ -642,14 +614,14 @@ var Text2 = import_styled_components4.default.span`
 
   transition: all 0.25s ease;
 `;
-var TextSubmitting = import_styled_components4.default.span`
+var TextSubmitting = styled3.span`
   font-family: "Montserrat", sans-serif;
   font-weight: 400;
   font-size: 1rem;
 
   transition: all 0.25s ease;
 `;
-var LoadingIcon = import_styled_components4.default.span.withConfig({
+var LoadingIcon = styled3.span.withConfig({
   shouldForwardProp: (prop) => prop !== "hasText"
 })`
   display: block;
@@ -672,7 +644,7 @@ var LoadingIcon = import_styled_components4.default.span.withConfig({
     }
   }
 `;
-var Button = import_styled_components4.default.button.withConfig({
+var Button = styled3.button.withConfig({
   shouldForwardProp: (prop) => ![
     "hasIcon",
     "isSubmitting",
@@ -683,9 +655,9 @@ var Button = import_styled_components4.default.button.withConfig({
     "height"
   ].includes(prop)
 })`
-  background: ${(props) => (0, import_polished.darken)(0.1, props?.bgColor || "#F6C76B")};
+  background: ${(props) => darken(0.1, props?.bgColor || "#F6C76B")};
   color: ${(props) => props?.color || "#2F2F2F"};
-  border: 1px solid ${(props) => (0, import_polished.darken)(0.1, props?.bordercolor || "#F6C76B")};
+  border: 1px solid ${(props) => darken(0.1, props?.bordercolor || "#F6C76B")};
   border-radius: 2px;
 
   display: inline-flex;
@@ -714,8 +686,8 @@ var Button = import_styled_components4.default.button.withConfig({
   }
 
   &:hover {
-    background: ${(props) => (0, import_polished.darken)(0.2, props?.bgColor || "#F6C76B")};
-    border-color: ${(props) => (0, import_polished.darken)(0.2, props?.bordercolor || "#F6C76B")};
+    background: ${(props) => darken(0.2, props?.bgColor || "#F6C76B")};
+    border-color: ${(props) => darken(0.2, props?.bordercolor || "#F6C76B")};
 
     ${Icon} {
       opacity: 1;
@@ -729,14 +701,14 @@ var Button = import_styled_components4.default.button.withConfig({
   }
 
   ${Text2} {
-    ${(props) => props.isSubmitting && !props.hasSubmittingMessage && import_styled_components4.css`
+    ${(props) => props.isSubmitting && !props.hasSubmittingMessage && css2`
         transform: unset;
         opacity: 0;
       `}
   }
 
   ${LoadingIcon} {
-    ${(props) => props.isSubmitting && !props.hasSubmittingMessage && import_styled_components4.css`
+    ${(props) => props.isSubmitting && !props.hasSubmittingMessage && css2`
         display: flex;
         -webkit-box-align: center;
         align-items: center;
@@ -746,7 +718,7 @@ var Button = import_styled_components4.default.button.withConfig({
 `;
 
 // src/components/Button/index.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function Button2({
   children,
   icon,
@@ -756,7 +728,7 @@ function Button2({
   color = "#2F2F2F",
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ jsxs2(
     Button,
     {
       isSubmitting,
@@ -767,30 +739,30 @@ function Button2({
       color,
       ...rest,
       children: [
-        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 })
+        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 })
       ]
     }
   );
 }
 
 // src/components/Alert/index.tsx
-var import_react4 = require("react");
+import { useEffect as useEffect2, useState as useState2, useCallback as useCallback2 } from "react";
 
 // src/components/Alert/styles.ts
-var import_styled_components5 = __toESM(require("styled-components"));
-var fadeIn = import_styled_components5.keyframes`
+import styled4, { css as css3, keyframes } from "styled-components";
+var fadeIn = keyframes`
   from { opacity: 0; transform: translateY(-10px); }
   to { opacity: 1; transform: translateY(0); }
 `;
-var fadeOut = import_styled_components5.keyframes`
+var fadeOut = keyframes`
   from { opacity: 1; transform: translateY(0); }
   to { opacity: 0; transform: translateY(-10px); }
 `;
 var typeStyles = {
-  error: import_styled_components5.css`
+  error: css3`
     background-color: var(--red);
     border: 1px solid var(--red);
     color: var(--white);
@@ -798,7 +770,7 @@ var typeStyles = {
       color: var(--white);
     }
   `,
-  warning: import_styled_components5.css`
+  warning: css3`
     background-color: var(--yellow-500);
     border: 1px solid var(--yellow-400);
     color: var(--black);
@@ -806,7 +778,7 @@ var typeStyles = {
       color: var(--black);
     }
   `,
-  info: import_styled_components5.css`
+  info: css3`
     background-color: var(--blue);
     border: 1px solid var(--blue);
     color: var(--white);
@@ -814,7 +786,7 @@ var typeStyles = {
       color: var(--white);
     }
   `,
-  success: import_styled_components5.css`
+  success: css3`
     background-color: var(--green);
     border: 1px solid var(--green-2);
     color: var(--white);
@@ -823,7 +795,7 @@ var typeStyles = {
     }
   `
 };
-var AlertContainer = import_styled_components5.default.div`
+var AlertContainer = styled4.div`
   position: fixed;
   width: 500px;
   top: 15px;
@@ -843,7 +815,7 @@ var AlertContainer = import_styled_components5.default.div`
 
   ${({ $type }) => typeStyles[$type]}
 `;
-var DismissButton = import_styled_components5.default.button`
+var DismissButton = styled4.button`
   position: absolute;
   background: transparent;
   right: 10px;
@@ -864,8 +836,8 @@ var DismissButton = import_styled_components5.default.button`
 `;
 
 // src/components/Alert/index.tsx
-var import_hi = require("react-icons/hi");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+import { HiX } from "react-icons/hi";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var Alert = ({
   type = "info",
   children,
@@ -874,18 +846,18 @@ var Alert = ({
   onDismiss,
   autoDismiss
 }) => {
-  const [isClosing, setIsClosing] = (0, import_react4.useState)(false);
-  const handleDismiss = (0, import_react4.useCallback)(() => {
+  const [isClosing, setIsClosing] = useState2(false);
+  const handleDismiss = useCallback2(() => {
     setIsClosing(true);
     setTimeout(() => onDismiss?.(), 300);
   }, [onDismiss]);
-  (0, import_react4.useEffect)(() => {
+  useEffect2(() => {
     if (autoDismiss) {
       const timer = setTimeout(handleDismiss, autoDismiss);
       return () => clearTimeout(timer);
     }
   }, [autoDismiss, handleDismiss]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ jsxs3(
     AlertContainer,
     {
       $type: type,
@@ -895,12 +867,12 @@ var Alert = ({
       role: "alert",
       children: [
         children,
-        dismissible && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        dismissible && /* @__PURE__ */ jsx3(
           DismissButton,
           {
             onClick: handleDismiss,
             "aria-label": "Dismiss alert",
-            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_hi.HiX, {})
+            children: /* @__PURE__ */ jsx3(HiX, {})
           }
         )
       ]
@@ -909,7 +881,7 @@ var Alert = ({
 };
 
 // src/components/Form/index.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "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"),
@@ -922,7 +894,7 @@ var schema = yup.object().shape({
     }
   )
 });
-var MitreFormComponent = import_react5.default.forwardRef(({
+var MitreFormComponent = React3.forwardRef(({
   productId,
   apiUrl,
   apiToken,
@@ -932,13 +904,15 @@ var MitreFormComponent = import_react5.default.forwardRef(({
   utm_term,
   showHeader = true,
   colorPrimary = "#F6C76B",
-  textColor = "#2F2F2F"
+  textColor = "#2F2F2F",
+  backgroundColor = "#cecece",
+  innerPadding = "1rem"
 }, ref) => {
-  const [loading, setIsLoading] = (0, import_react5.useState)(false);
+  const [loading, setIsLoading] = useState3(false);
   const { error, handleError, clearError } = useError();
-  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 [successMessage, setSuccessMessage] = useState3("");
+  const { register, handleSubmit, formState: { errors }, reset, watch } = useForm({
+    resolver: yupResolver(schema)
   });
   const phoneValue = watch("phone");
   const sendMessage = async (data) => {
@@ -978,10 +952,10 @@ var MitreFormComponent = import_react5.default.forwardRef(({
       setIsLoading(false);
     }
   };
-  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)(
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsx4(global_default, {}),
+    /* @__PURE__ */ jsx4(GlobalStyles, {}),
+    error && /* @__PURE__ */ jsx4(
       Alert,
       {
         type: "error",
@@ -991,7 +965,7 @@ var MitreFormComponent = import_react5.default.forwardRef(({
         children: error.message
       }
     ),
-    successMessage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    successMessage && /* @__PURE__ */ jsx4(
       Alert,
       {
         type: "success",
@@ -1001,13 +975,13 @@ var MitreFormComponent = import_react5.default.forwardRef(({
         children: successMessage
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(FormContainer, { 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(FormContainer, { $backgroundColor: backgroundColor, innerPadding, 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)(Form, { $textColor: textColor, onSubmit: handleSubmit(sendMessage), noValidate: true, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ jsxs4(Form, { $textColor: textColor, onSubmit: handleSubmit(sendMessage), noValidate: true, children: [
+        /* @__PURE__ */ jsx4(
           Input2,
           {
             id: "name",
@@ -1021,7 +995,7 @@ var MitreFormComponent = import_react5.default.forwardRef(({
             required: true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ jsx4(
           Input2,
           {
             id: "email",
@@ -1036,7 +1010,7 @@ var MitreFormComponent = import_react5.default.forwardRef(({
             required: true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ jsx4(
           Input2,
           {
             id: "phone",
@@ -1051,12 +1025,12 @@ var MitreFormComponent = import_react5.default.forwardRef(({
             value: phoneValue
           }
         ),
-        /* @__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: [
+        /* @__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: [
           "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__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ jsx4(
             "a",
             {
               href: "https://www.mitrerealty.com.br/politica-de-privacidade",
@@ -1077,8 +1051,7 @@ var MitreFormComponent = import_react5.default.forwardRef(({
 });
 MitreFormComponent.displayName = "MitreFormComponent";
 var Form_default = MitreFormComponent;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  MitreFormComponent
-});
+export {
+  Form_default as MitreFormComponent
+};
 //# sourceMappingURL=index.js.map