mitre-form-component 0.0.1 → 0.0.3

package/dist/index.mjs

@@ -0,0 +1,1052 @@
+"use client";
+
+// src/components/Form/index.tsx
+import React3, { 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 `
+    align-items:${alignItems || null};
+    display:flex;
+    flex-direction:${direction};
+    justify-content:${justifyContent || null};
+  `;
+}
+var opacityEffect = `
+  &:hover {
+    cursor:pointer;
+    opacity:.9;
+  }
+
+  &:active {
+    opacity:.7;
+  }
+`;
+
+// src/components/Form/styles.ts
+import styled from "styled-components";
+var FormContainer = styled.div`
+  ${flex("column")}
+  align-items: stretch;
+  justify-content: flex-start;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  /* Hide scrollbars for WebKit browsers */
+  ::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbars for Firefox */
+  scrollbar-width: none;
+
+  box-sizing: border-box;
+`;
+var HeaderContainer = styled.div`
+  margin-bottom: 1rem;
+`;
+var ButtonContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin-top: 0.75rem;
+`;
+var Form = styled.form`
+  label {
+    font-weight: 700;
+  }
+
+  input {
+    background: white;
+    margin-bottom: 0.75rem;
+  }
+
+  p {
+    font-family: "Montserrat", sans-serif;
+    font-style: italic;
+    font-weight: 200;
+    font-size: 0.8rem;
+    color: ${(props) => props.$textColor || "var(--black)"};
+    text-align: start;
+  }
+
+  a {
+    font-family: "Montserrat", sans-serif;
+    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 {
+    margin-bottom: 10px;,
+  }
+
+  button {
+    ${opacityEffect}
+    color: var(--black);
+    font-weight: 600;
+    border: none;
+    border-radius: 8px;
+    width: 60%;
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+`;
+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 = styled.p`
+  font-size: 1rem;
+  font-weight: 400;
+  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 = React3.forwardRef(({
+  productId,
+  apiUrl,
+  apiToken,
+  utm_source,
+  utm_medium,
+  utm_campaign,
+  utm_term,
+  showHeader = true,
+  colorPrimary = "#F6C76B",
+  textColor = "#2F2F2F"
+}, ref) => {
+  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, { 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__ */ 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"
+        ] })
+      ] })
+    ] })
+  ] });
+});
+MitreFormComponent.displayName = "MitreFormComponent";
+var Form_default = MitreFormComponent;
+export {
+  Form_default as MitreFormComponent
+};
+//# sourceMappingURL=index.mjs.map