mitre-form-component 0.0.11 → 0.0.13

package/dist/index.js

@@ -1,24 +1,3 @@
-// src/components/Form/index.tsx
-import { useState as useState3 } from "react";
-
-// src/components/hooks/useError.ts
-import { useState } from "react";
-function useError() {
-  const [error, setError] = useState(null);
-  const handleError = (err) => {
-    const errorObj = err instanceof Error ? err : new Error(String(err));
-    setError(errorObj);
-    console.error(errorObj);
-  };
-  const clearError = () => setError(null);
-  return { error, handleError, clearError };
-}
-
-// src/components/Form/index.tsx
-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) {
   return `
@@ -48,10 +27,6 @@ var FormContainer = styled.div`
   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;
@@ -89,7 +64,6 @@ var Form = styled.form`
     font-style: italic;
     font-weight: 200;
     font-size: 0.8rem;
-    color: ${(props) => props.$textColor || "var(--black)"};
     text-align: start;
   }
 
@@ -98,13 +72,11 @@ var Form = styled.form`
     font-style: italic;
     font-weight: 200;
     font-size: 0.8rem;
-    color: ${(props) => props.$textColor || "var(--black)"};
   }
 
   h6 {
     text-align: start;
     margin-left: 10px;
-    color: ${(props) => props.$textColor || "var(--black)"};
   }
 
   & > div {
@@ -127,7 +99,6 @@ var Title = styled.h2`
   font-weight: 700;
   line-height: 24px;
   letter-spacing: 0em;
-  color: ${(props) => props.$textColor || "var(--black)"};
 `;
 var Text = styled.p`
   font-size: 1rem;
@@ -135,917 +106,35 @@ var Text = styled.p`
   line-height: 23px;
   letter-spacing: 0em;
   margin-top: 10px;
-  color: ${(props) => props.$textColor || "var(--black)"};
 `;
 
-// src/components/styles/global.ts
-import { createGlobalStyle } from "styled-components";
-import { useEffect } from "react";
-var GlobalStyles = createGlobalStyle`
-  :root {
-    --red: #e52e4d;
-    --white: #FFF;
-    --black: #2F2F2F;
-    --black-2:#1E1E1E;
-    --alphaBlack: #000000;
-    --black-2:#1E1E1E;
-    --black-3:#353535;
-
-    --yellow-400:#FFD789;
-    --yellow-500: #F6C76B;
-    --gray-40:#F0F0F0;
-    --gray-45:#767676;
-    --gray-50: #686A69;
-    --gray-60: #8F8F8F;
-    --gray-100: #B6B6B6;
-    --gray-150: #B9B9B9;
-    --gray-200: #D2D2D2;
-    --gray-300: #EBEBEB;
-    --gray-400: #ECECEC;
-    --gray-500: #F4F4F4;
-    --gray-550:#6F6F6F;
-    --gray-600:#686868;
-    --gray-700: #535353;
-    --gray-800:#9D9D9D;
-    --shadow-500: 0px 4px 8px rgba(91, 91, 91, 0.2);
-    --green:#57C06E;
-    --green-2:#2DCE68;
-    --blue:#007BFF;
-  }
-
-  * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-  }
-
-  html {
-    scroll-behavior: smooth;
-
-    @media (max-width: 1080px) {
-      font-size: 93.75%;
-    }
-    @media (max-width: 720px) {
-      font-size: 87.5%;
-    }
-  }
-
-  body {
-    background: var(--white);
-    -webkit-font-smoothing: antialiased;
-  }
-
-  body, input, textarea, select, button {
-    font-family: "Montserrat", sans-serif;
-    font-weight: 400;
-  } 
-
-  h1, h2, h3, h4, h5, h6, strong {
-    font-weight: 600;
-  }
-
-  button {
-    cursor: pointer;
-  }
-
-  [disabled] {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  .hidden {
-    overflow: hidden;
-  }
-
-  ::-webkit-scrollbar {
-    -webkit-appearance: none;
-    background: var(--gray-500);
-    width: 6px;
-    height: 10px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-color: var(--gray-50);
-  }
-
-  .aligncenter {
-    text-align: center;
-  }
-
-  .width-190px {
-    width:190px;
-  }
-
-  .hidden-content {
-    display:none !important;
-  }
-
-  .global-margin-bottom {
-    margin-bottom:20px;
-  }
-
-  .background-light-gray {
-    background:#F4F4F4;
-  }
-
-  .full-width-and-height {
-    height:100%;
-    width:100%;
-  }
-
-  .flex-direction-column {
-    flex-direction:column;
-  }
-
-  .bold {
-    font-weight:700;
-  }
-
-  .margin-center-x {
-    margin:0 auto;
-  }
-
-  .border-none {
-    border:none;
-  }
-
-  .text-center {
-    text-align:center;
-  }
-
-  .relative {
-    position:relative;
-  }
-
-  /* accessibility */
-  body ._access-menu p._text-center{
-    font-family: "Montserrat", sans-serif;
-    font-style: italic;
-    font-size: 1.2rem!important;
-    margin-top: 6px;
-    margin-bottom: 3px;
-  } 
-
-`;
-var FontLoader = () => {
-  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";
-    document.head.appendChild(link);
-  }, []);
-  return null;
-};
-var global_default = FontLoader;
-
-// src/components/Input/index.tsx
-import {
-  forwardRef,
-  useCallback,
-  useRef
-} from "react";
-
-// src/components/Input/masks.ts
-function cep(e) {
-  e.currentTarget.maxLength = 9;
-  let value = e.currentTarget.value;
-  value = value.replace(/\D/g, "");
-  value = value.replace(/^(\d{5})(\d)/, "$1-$2");
-  e.currentTarget.value = value;
-  return e;
-}
-function currency(e) {
-  let value = e.currentTarget.value;
-  value = value.replace(/\D/g, "");
-  value = value.replace(/(\d)(\d{2})$/, "$1,$2");
-  value = value.replace(/(?=(\d{3})+(\D))\B/g, ".");
-  e.currentTarget.value = value;
-  return e;
-}
-function cpf(e) {
-  e.currentTarget.maxLength = 14;
-  let value = e.currentTarget.value;
-  if (!value.match(/^(\d{3}).(\d{3}).(\d{3})-(\d{2})$/)) {
-    value = value.replace(/\D/g, "");
-    value = value.replace(/(\d{3})(\d)/, "$1.$2");
-    value = value.replace(/(\d{3})(\d)/, "$1.$2");
-    value = value.replace(/(\d{3})(\d{2})$/, "$1-$2");
-    e.currentTarget.value = value;
-  }
-  return e;
-}
-function date(e) {
-  let value = e.currentTarget.value;
-  value = value.replace(/\D/g, "");
-  value = value.replace(/(\d{2})(\d)/, "$1/$2");
-  value = value.replace(/(\d{2})(\d)/, "$1/$2");
-  e.currentTarget.value = value;
-  return e;
-}
-
-// src/components/Input/index.tsx
-import "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`
-  font-family: "Montserrat", sans-serif;
-  font-style: normal;
-  font-weight: 500;
-  font-size: 1rem;
-  color: ${(props) => props.isInvalid ? "var(--red)" : props.$textColor || "var(--black)"};
-  display: block;
-  margin-bottom: 0.5rem;
-  text-align: left;
-`;
-var Input = styled2.input`
-  font-family: "Montserrat", sans-serif;
-  font-style: normal;
-  font-weight: 500;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  background: var(--gray-500);
-  color: var(--black);
-  padding: 0.5rem;
-  border-radius: 0.125rem;
-  border: 1px solid transparent;
-  display: block;
-  height: 3.125rem;
-  width: 100%;
-
-  &:focus {
-    border-radius: 0.125rem;
-    border: 2px solid ${(props) => props.$bordercolor || "var(--yellow-500)"};
-    outline: none;
-  }
-
-  &::placeholder {
-    font-size: 1rem;
-    line-height: 1.5rem;
-    color: #b6b6b6;
-    font-weight: 800;
-  }
-
-  /* Autofill styles */
-  &:-webkit-autofill {
-    background: var(--gray-500) !important;
-    color: var(--black) !important;
-    -webkit-text-fill-color: var(--black) !important;
-    transition: background-color 5000s ease-in-out 0s; /* Prevent flashing */
-  }
-
-  &:-webkit-autofill::first-line {
-    font-family: "Montserrat", sans-serif;
-    font-size: 1rem;
-    font-weight: 500;
-  }
-`;
-var FormPhoneInput = styled2(PhoneInput)`
-  .form-control {
-    background: white;
-    color: ${(props) => props.isInvalid ? "var(--red)" : props.$textColor || "var(--black)"};
-    padding: 0.5rem;
-    border-radius: 0.125rem;
-    border: 1px solid transparent;
-    height: 3.125rem;
-    width: 100%;
-    padding-left: 4rem;
-    font-family: "Montserrat", sans-serif;
-    font-style: normal;
-    font-weight: 500;
-    font-size: 1rem;
-    line-height: 1.5rem;
-    text &:focus,
-    &:focus-within {
-      border-radius: 0.125rem;
-      border: 2px solid
-        ${(props) => !props.isValid ? "var(--red)" : props.$bordercolor || "var(--yellow-500)"};
-    }
-
-    &::placeholder {
-      font-size: 1rem;
-      line-height: 1.5rem;
-      color: #b6b6b6;
-      font-weight: 800;
-    }
-
-    /* Autofill styles */
-    &:-webkit-autofill {
-      background: var(--gray-500) !important;
-      color: var(--black) !important;
-      -webkit-text-fill-color: var(--black) !important;
-      transition: background-color 5000s ease-in-out 0s; /* Prevent flashing */
-    }
-
-    &:-webkit-autofill::first-line {
-      font-family: "Montserrat", sans-serif;
-      font-size: 1rem;
-      font-weight: 500;
-    }
-  }
-
-  &:focus-within {
-    .form-control {
-      border: 2px solid
-        ${(props) => props.isInvalid ? "var(--red)" : props.$bordercolor || "var(--yellow-500)"};
-    }
-  }
-
-  .flag-dropdown {
-    background: white;
-    border: none;
-    padding: 0.5rem;
-    margin: 0.25rem;
-    cursor: pointer;
-
-    &:focus-within {
-      outline: none;
-    }
-  }
-`;
-var FormErrorMessage = styled2.small`
-  font-size: 0.75rem;
-  line-height: 1.125rem;
-  color: var(--red);
-  margin-top: 0.25rem;
-  display: block;
-`;
-var FormControl = styled2.div.withConfig({
-  shouldForwardProp: (prop) => !["isInvalid", "$bordercolor"].includes(prop)
-})`
-  ${FormLabel} {
-    ${(props) => props.isInvalid && css`
-        color: var(--red);
-      `};
-  }
-
-  ${Input} {
-    ${(props) => props.isInvalid && css`
-        border: 1px solid var(--red);
-
-        &:not(:focus)::placeholder {
-          color: var(--red);
-          font-weight: 600;
-        }
-      `};
-
-    &:focus {
-      ${(props) => props.isInvalid && css`
-          border: 1px solid var(--red);
-        `};
-    }
-  }
-
-  ${FormPhoneInput} {
-    ${(props) => props.isInvalid && css`
-        border: 1px solid var(--red);
-
-        &:not(:focus)::placeholder {
-          color: var(--red);
-          font-weight: 600;
-        }
-      `};
-
-    &:focus {
-      ${(props) => props.isInvalid && css`
-          border: 1px solid var(--red);
-        `};
-    }
-  }
-`;
-
-// src/components/Input/index.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var InputBase = ({ id, label, error, showErrorMessage = true, borderColor, textColor, mask = "", type = "text", ...rest }, ref) => {
-  const phoneInputRef = useRef(null);
-  const { onChange, name } = rest;
-  const handleKeyUp = useCallback(
-    (e) => {
-      if (mask === "cep") cep(e);
-      if (mask === "currency") currency(e);
-      if (mask === "cpf") cpf(e);
-      if (mask === "date") date(e);
-    },
-    [mask]
-  );
-  const handlePhoneChange = 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(
-      Input,
-      {
-        id,
-        ref,
-        type,
-        $bordercolor: borderColor,
-        "aria-invalid": !!error && showErrorMessage ? "true" : "false",
-        autoComplete: rest.autoComplete || "on",
-        ...rest
-      }
-    ) : mask === "phone" ? /* @__PURE__ */ jsx(
-      FormPhoneInput,
-      {
-        country: "br",
-        $bordercolor: borderColor,
-        placeholder: rest.placeholder,
-        "aria-invalid": !!error && showErrorMessage ? "true" : "false",
-        isInvalid: !!error,
-        onChange: handlePhoneChange,
-        masks: {
-          br: "(..) .....-...."
-        },
-        inputProps: {
-          id,
-          name: "phone",
-          required: true,
-          autoFocus: true,
-          autoComplete: "tel",
-          ref: phoneInputRef
-        },
-        dropdownStyle: {
-          color: textColor
-        },
-        disableCountryGuess: true,
-        disableCountryCode: true,
-        value: rest.value
-      }
-    ) : /* @__PURE__ */ jsx(
-      Input,
-      {
-        id,
-        ref,
-        type,
-        $bordercolor: borderColor,
-        "aria-invalid": !!error && showErrorMessage ? "true" : "false",
-        onKeyUp: handleKeyUp,
-        autoComplete: rest.autoComplete || "on",
-        ...rest
-      }
-    ),
-    !!error && showErrorMessage && /* @__PURE__ */ jsx(FormErrorMessage, { "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`
-  font-size: 0;
-  line-height: 0;
-  transition: all 0.25s ease;
-
-  transform: translate3d(-30px, 0px, 0px);
-  visibility: hidden;
-  opacity: 0;
-  margin-right: 0.625rem;
-`;
-var Text2 = styled3.span`
-  font-family: "Montserrat", sans-serif;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  margin-bottom: -2px;
-
-  transition: all 0.25s ease;
-`;
-var TextSubmitting = styled3.span`
-  font-family: "Montserrat", sans-serif;
-  font-weight: 400;
-  font-size: 1rem;
-
-  transition: all 0.25s ease;
-`;
-var LoadingIcon = styled3.span.withConfig({
-  shouldForwardProp: (prop) => prop !== "hasText"
-})`
-  display: block;
-
-  width: 1rem;
-  height: 1rem;
-  border: 0.125rem solid var(--white);
-  border-radius: 50%;
-  animation: loadingAnimation 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: var(--white) transparent transparent transparent;
-
-  margin-right: ${(props) => props.hasText ? "0.625rem" : "0"};
-
-  @keyframes loadingAnimation {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-`;
-var Button = styled3.button.withConfig({
-  shouldForwardProp: (prop) => ![
-    "hasIcon",
-    "isSubmitting",
-    "hasSubmittingMessage",
-    "bgColor",
-    "bordercolor",
-    "color",
-    "height"
-  ].includes(prop)
-})`
-  background: ${(props) => darken(0.1, props?.bgColor || "#F6C76B")};
-  color: ${(props) => props?.color || "#2F2F2F"};
-  border: 1px solid ${(props) => darken(0.1, props?.bordercolor || "#F6C76B")};
-  border-radius: 2px;
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 0.75rem;
-  height: ${(props) => props?.height || "3.125rem"};
-  position: relative;
-  font-size: 0;
-  line-height: 0;
-
-  transition: all 0.25s;
-
-  ${Icon} {
-    display: ${(props) => props?.hasIcon ? "block" : ""};
-  }
-
-  ${Text2} {
-    transform: ${(props) => props?.hasIcon ? "translate3d(-4.5px, 0px, 0px)" : "unset"};
-
-    @media print, screen and (min-width: 40em) {
-      transform: ${(props) => props?.hasIcon ? "translate3d(-14.5px, 0px, 0px)" : "unset"};
-    }
-
-    color: ${(props) => props?.color || "#2F2F2F"};
-  }
-
-  &:hover {
-    background: ${(props) => darken(0.2, props?.bgColor || "#F6C76B")};
-    border-color: ${(props) => darken(0.2, props?.bordercolor || "#F6C76B")};
-
-    ${Icon} {
-      opacity: 1;
-      visibility: visible;
-      transform: translate3d(0px, 0px, 0px);
-    }
-
-    ${Text2} {
-      transform: ${(props) => props?.hasIcon ? "translate3d(-5px, 0px, 0px)" : "unset"};
-    }
-  }
-
-  ${Text2} {
-    ${(props) => props.isSubmitting && !props.hasSubmittingMessage && css2`
-        transform: unset;
-        opacity: 0;
-      `}
-  }
-
-  ${LoadingIcon} {
-    ${(props) => props.isSubmitting && !props.hasSubmittingMessage && css2`
-        display: flex;
-        -webkit-box-align: center;
-        align-items: center;
-        position: absolute;
-      `}
-  }
-`;
-
-// src/components/Button/index.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function Button2({
-  children,
-  icon,
-  isSubmitting = false,
-  submittingMessage = "",
-  disabled = false,
-  color = "#2F2F2F",
-  ...rest
-}) {
-  return /* @__PURE__ */ jsxs2(
-    Button,
-    {
-      isSubmitting,
-      hasSubmittingMessage: submittingMessage.length > 0,
-      disabled: isSubmitting || disabled,
-      "aria-disabled": isSubmitting || disabled,
-      hasIcon: !!icon,
-      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 })
-      ]
-    }
-  );
-}
-
-// src/components/Alert/index.tsx
-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";
-var fadeIn = keyframes`
-  from { opacity: 0; transform: translateY(-10px); }
-  to { opacity: 1; transform: translateY(0); }
-`;
-var fadeOut = keyframes`
-  from { opacity: 1; transform: translateY(0); }
-  to { opacity: 0; transform: translateY(-10px); }
-`;
-var typeStyles = {
-  error: css3`
-    background-color: var(--red);
-    border: 1px solid var(--red);
-    color: var(--white);
-    svg {
-      color: var(--white);
-    }
-  `,
-  warning: css3`
-    background-color: var(--yellow-500);
-    border: 1px solid var(--yellow-400);
-    color: var(--black);
-    svg {
-      color: var(--black);
-    }
-  `,
-  info: css3`
-    background-color: var(--blue);
-    border: 1px solid var(--blue);
-    color: var(--white);
-    svg {
-      color: var(--white);
-    }
-  `,
-  success: css3`
-    background-color: var(--green);
-    border: 1px solid var(--green-2);
-    color: var(--white);
-    svg {
-      color: var(--white);
-    }
-  `
-};
-var AlertContainer = styled4.div`
-  position: fixed;
-  width: 500px;
-  top: 15px;
-  right: 15px;
-  padding: 1rem ${({ $dismissible }) => $dismissible ? "2.5rem" : "1rem"} 1rem
-    1rem;
-  margin-bottom: 1rem;
-  animation: ${({ $isClosing }) => $isClosing ? fadeOut : fadeIn} 0.3s
-    ease-out;
-  animation-fill-mode: forwards;
-  align-items: center;
-  gap: 0.5rem;
-  box-shadow: var(--shadow-500);
-  border-radius: 0.5rem;
-  font-size: 1rem;
-  font-weight: 500;
-
-  ${({ $type }) => typeStyles[$type]}
-`;
-var DismissButton = styled4.button`
-  position: absolute;
-  background: transparent;
-  right: 10px;
-  border: none;
-  cursor: pointer;
-  color: inherit;
-  opacity: 1;
-  transition: opacity 0.2s;
-
-  &:hover {
-    opacity: 0.7;
-  }
-
-  svg {
-    width: 1rem;
-    height: 1rem;
-  }
-`;
-
-// src/components/Alert/index.tsx
-import { HiX } from "react-icons/hi";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var Alert = ({
-  type = "info",
-  children,
-  className,
-  dismissible = false,
-  onDismiss,
-  autoDismiss
-}) => {
-  const [isClosing, setIsClosing] = useState2(false);
-  const handleDismiss = useCallback2(() => {
-    setIsClosing(true);
-    setTimeout(() => onDismiss?.(), 300);
-  }, [onDismiss]);
-  useEffect2(() => {
-    if (autoDismiss) {
-      const timer = setTimeout(handleDismiss, autoDismiss);
-      return () => clearTimeout(timer);
-    }
-  }, [autoDismiss, handleDismiss]);
-  return /* @__PURE__ */ jsxs3(
-    AlertContainer,
-    {
-      $type: type,
-      $dismissible: dismissible,
-      $isClosing: isClosing,
-      className,
-      role: "alert",
-      children: [
-        children,
-        dismissible && /* @__PURE__ */ jsx3(
-          DismissButton,
-          {
-            onClick: handleDismiss,
-            "aria-label": "Dismiss alert",
-            children: /* @__PURE__ */ jsx3(HiX, {})
-          }
-        )
-      ]
-    }
-  );
-};
-
 // src/components/Form/index.tsx
-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"),
-  phone: yup.string().required("Telefone \xE9 obrigat\xF3rio").test(
-    "min-digits",
-    "N\xFAmero de telefone inv\xE1lido!",
-    (value) => {
-      const digitsOnly = value?.replace(/\D/g, "") || "";
-      return digitsOnly.length >= 8;
-    }
-  )
-});
-var MitreFormComponent = ({
-  productId,
-  apiUrl,
-  apiToken,
-  utm_source,
-  utm_medium,
-  utm_campaign,
-  utm_term,
-  showHeader = true,
-  colorPrimary = "#000",
-  textColor = "#000",
-  backgroundColor = "#fff",
-  innerPadding = "20px"
-}) => {
-  const [loading, setIsLoading] = useState3(false);
-  const { error, handleError, clearError } = useError();
-  const [successMessage, setSuccessMessage] = useState3("");
-  const { register, handleSubmit, formState: { errors }, reset, watch } = useForm({
-    resolver: yupResolver(schema)
-  });
-  const phoneValue = watch("phone");
-  const sendMessage = async (data) => {
-    const { name, email, phone } = data;
-    const message = "Gostaria de mais informa\xE7\xF5es sobre o produto";
-    try {
-      setIsLoading(true);
-      if (!productId || !utm_source || !utm_medium || !utm_campaign || !utm_term || !apiToken) {
-        throw new Error("Par\xE2metros obrigat\xF3rios n\xE3o informados");
-      }
-      const response = await fetch(`${apiUrl}/leads`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Basic ${apiToken}`
-        },
-        body: JSON.stringify({
-          name,
-          email,
-          phone,
-          message,
-          productId,
-          utm_source,
-          utm_medium,
-          utm_campaign,
-          utm_term
-        })
-      });
-      if (!response.ok) {
-        throw new Error("Falha ao enviar a mensagem!");
-      }
-      setSuccessMessage("Mensagem enviada com sucesso!");
-      reset();
-    } catch (err) {
-      handleError(err);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-  return /* @__PURE__ */ jsxs4(Fragment, { children: [
-    /* @__PURE__ */ jsx4(global_default, {}),
-    /* @__PURE__ */ jsx4(GlobalStyles, {}),
-    error && /* @__PURE__ */ jsx4(
-      Alert,
-      {
-        type: "error",
-        dismissible: true,
-        onDismiss: clearError,
-        autoDismiss: 5e3,
-        children: error.message
-      }
-    ),
-    successMessage && /* @__PURE__ */ jsx4(
-      Alert,
-      {
-        type: "success",
-        dismissible: true,
-        onDismiss: () => setSuccessMessage(""),
-        autoDismiss: 5e3,
-        children: successMessage
-      }
-    ),
-    /* @__PURE__ */ jsxs4(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, 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__ */ jsxs4(Form, { $textColor: textColor, onSubmit: handleSubmit(sendMessage), noValidate: true, children: [
-        /* @__PURE__ */ jsx4(
-          Input2,
-          {
-            id: "name",
-            label: "Nome *",
-            placeholder: "Digite seu nome",
-            ...register("name"),
-            borderColor: colorPrimary,
-            textColor,
-            error: errors.name?.message,
-            autoComplete: "name",
-            required: true
-          }
-        ),
-        /* @__PURE__ */ jsx4(
-          Input2,
-          {
-            id: "email",
-            label: "Email *",
-            type: "email",
-            placeholder: "exemplo@email.com",
-            ...register("email"),
-            borderColor: colorPrimary,
-            textColor,
-            error: errors.email?.message,
-            autoComplete: "email",
-            required: true
-          }
-        ),
-        /* @__PURE__ */ jsx4(
-          Input2,
-          {
-            id: "phone",
-            label: "Telefone *",
-            placeholder: "(11) 00000-0000",
-            mask: "phone",
-            ...register("phone"),
-            borderColor: colorPrimary,
-            textColor,
-            error: errors.phone?.message,
-            required: true,
-            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: [
-          "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(
-            "a",
-            {
-              href: "https://www.mitrerealty.com.br/politica-de-privacidade",
-              target: "_blank",
-              rel: "noopener noreferrer",
-              children: "Pol\xEDtica de Privacidade"
-            }
-          ),
-          ". Ao clicar em ",
-          '"',
-          "enviar",
-          '"',
-          ", voc\xEA concorda em permitir que a Mitre Realty, armazene e processe os dados pessoais fornecidos por voc\xEA para finalidade informada"
-        ] })
-      ] })
+import { jsx, jsxs } from "react/jsx-runtime";
+var MitreFormComponent = () => {
+  return /* @__PURE__ */ jsxs(FormContainer, { children: [
+    /* @__PURE__ */ jsxs(HeaderContainer, { children: [
+      /* @__PURE__ */ jsx(Title, { children: "Atendimento por mensagem" }),
+      /* @__PURE__ */ jsx(Text, { children: "Informe seus dados e retornaremos a mensagem." })
+    ] }),
+    /* @__PURE__ */ jsx("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
+    /* @__PURE__ */ jsx(ButtonContainer, {}),
+    /* @__PURE__ */ 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__ */ jsx(
+        "a",
+        {
+          href: "https://www.mitrerealty.com.br/politica-de-privacidade",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children: "Pol\xEDtica de Privacidade"
+        }
+      ),
+      ". Ao clicar em ",
+      '"',
+      "enviar",
+      '"',
+      ", voc\xEA concorda em permitir que a Mitre Realty, armazene e processe os dados pessoais fornecidos por voc\xEA para finalidade informada"
     ] })
   ] });
 };