mitre-form-component 0.0.16 → 0.0.17

package/dist/index.cjs

@@ -35,7 +35,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/Form/index.tsx
-var import_react3 = __toESM(require("react"), 1);
+var import_react4 = __toESM(require("react"), 1);
 
 // src/components/hooks/useError.ts
 var import_react = require("react");
@@ -325,8 +325,140 @@ var FontLoader = () => {
 };
 var global_default = FontLoader;
 
-// src/components/Form/index.tsx
+// src/components/Alert/index.tsx
+var import_react3 = require("react");
+
+// src/components/Alert/styles.ts
+var import_styled_components3 = __toESM(require("styled-components"), 1);
+var fadeIn = import_styled_components3.keyframes`
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+`;
+var fadeOut = import_styled_components3.keyframes`
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(-10px); }
+`;
+var typeStyles = {
+  error: import_styled_components3.css`
+    background-color: var(--red);
+    border: 1px solid var(--red);
+    color: var(--white);
+    svg {
+      color: var(--white);
+    }
+  `,
+  warning: import_styled_components3.css`
+    background-color: var(--yellow-500);
+    border: 1px solid var(--yellow-400);
+    color: var(--black);
+    svg {
+      color: var(--black);
+    }
+  `,
+  info: import_styled_components3.css`
+    background-color: var(--blue);
+    border: 1px solid var(--blue);
+    color: var(--white);
+    svg {
+      color: var(--white);
+    }
+  `,
+  success: import_styled_components3.css`
+    background-color: var(--green);
+    border: 1px solid var(--green-2);
+    color: var(--white);
+    svg {
+      color: var(--white);
+    }
+  `
+};
+var AlertContainer = import_styled_components3.default.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 = import_styled_components3.default.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
+var import_hi = require("react-icons/hi");
 var import_jsx_runtime = require("react/jsx-runtime");
+var Alert = ({
+  type = "info",
+  children,
+  className,
+  dismissible = false,
+  onDismiss,
+  autoDismiss
+}) => {
+  const [isClosing, setIsClosing] = (0, import_react3.useState)(false);
+  const handleDismiss = (0, import_react3.useCallback)(() => {
+    setIsClosing(true);
+    setTimeout(() => onDismiss?.(), 300);
+  }, [onDismiss]);
+  (0, import_react3.useEffect)(() => {
+    if (autoDismiss) {
+      const timer = setTimeout(handleDismiss, autoDismiss);
+      return () => clearTimeout(timer);
+    }
+  }, [autoDismiss, handleDismiss]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    AlertContainer,
+    {
+      $type: type,
+      $dismissible: dismissible,
+      $isClosing: isClosing,
+      className,
+      role: "alert",
+      children: [
+        children,
+        dismissible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          DismissButton,
+          {
+            onClick: handleDismiss,
+            "aria-label": "Dismiss alert",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_hi.HiX, {})
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/Form/index.tsx
+var import_jsx_runtime2 = 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"),
@@ -339,7 +471,7 @@ var schema = yup.object().shape({
     }
   )
 });
-var MitreFormComponent = import_react3.default.forwardRef(({
+var MitreFormComponent = import_react4.default.forwardRef(({
   productId,
   apiUrl,
   apiToken,
@@ -353,9 +485,9 @@ var MitreFormComponent = import_react3.default.forwardRef(({
   backgroundColor = "#cecece",
   innerPadding = "1rem"
 }, ref) => {
-  const [loading, setIsLoading] = (0, import_react3.useState)(false);
+  const [loading, setIsLoading] = (0, import_react4.useState)(false);
   const { error, handleError, clearError } = useError();
-  const [successMessage, setSuccessMessage] = (0, import_react3.useState)("");
+  const [successMessage, setSuccessMessage] = (0, import_react4.useState)("");
   const { register, handleSubmit, formState: { errors }, reset, watch } = (0, import_react_hook_form.useForm)({
     resolver: (0, import_yup.yupResolver)(schema)
   });
@@ -397,20 +529,40 @@ var MitreFormComponent = import_react3.default.forwardRef(({
       setIsLoading(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(global_default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStyles, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FormContainer, { ref, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(HeaderContainer, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Title, { children: "Atendimento por mensagem" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: "Informe seus dados e retornaremos a mensagem." })
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(global_default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GlobalStyles, {}),
+    error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Alert,
+      {
+        type: "error",
+        dismissible: true,
+        onDismiss: clearError,
+        autoDismiss: 5e3,
+        children: error.message
+      }
+    ),
+    successMessage && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Alert,
+      {
+        type: "success",
+        dismissible: true,
+        onDismiss: () => setSuccessMessage(""),
+        autoDismiss: 5e3,
+        children: successMessage
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(FormContainer, { ref, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(HeaderContainer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Title, { children: "Atendimento por mensagem" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { children: "Informe seus dados e retornaremos a mensagem." })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonContainer, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonContainer, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "a",
           {
             href: "https://www.mitrerealty.com.br/politica-de-privacidade",

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/components/Form/index.tsx","../src/components/hooks/useError.ts","../src/components/styles/utils.ts","../src/components/Form/styles.ts","../src/components/styles/global.ts"],"sourcesContent":["import MitreFormComponent from \"./components/Form\";\n\nexport default MitreFormComponent;\n//export type { MitreFormComponentProps } from \"./components/Form\";\n","import React, { useState } from \"react\";\nimport { useError } from \"../hooks/useError\";\nimport { useForm, SubmitHandler } from \"react-hook-form\";\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport * as yup from \"yup\";\n\nimport { \n    FormContainer, \n    HeaderContainer, \n    ButtonContainer, \n    Form, \n    Title, \n    Text \n} from \"./styles\";\nimport FontLoader, { GlobalStyles } from \"../styles/global\";\n\nexport interface MitreFormComponentProps {\n  productId: string;\n  apiUrl: string;\n  apiToken: string;\n  utm_source: string;\n  utm_medium: string;\n  utm_campaign: string;\n  utm_term: string;\n  showHeader?: boolean;\n  colorPrimary?: string;\n  textColor?: string;\n  backgroundColor?: string;\n  innerPadding?: string;\n}\n\nconst schema = yup.object().shape({\n  name: yup.string().required(\"Nome é obrigatório\"),\n  email: yup.string().required(\"Email é obrigatório\").email(\"Email inválido\"),\n  phone: yup.string().required(\"Telefone é obrigatório\")\n  .test(\n    'min-digits',\n    'Número de telefone inválido!',\n    (value) => {\n      const digitsOnly = value?.replace(/\\D/g, '') || '';\n      //TODO melhorar essa lógica com algum regex\n      return digitsOnly.length >= 8\n    })\n});\n\nconst MitreFormComponent = React.forwardRef<HTMLDivElement, MitreFormComponentProps>(({\n  productId,\n  apiUrl,\n  apiToken,\n  utm_source,\n  utm_medium,\n  utm_campaign,\n  utm_term,\n  showHeader =  true,\n  colorPrimary = \"#F6C76B\",\n  textColor = \"#2F2F2F\",\n  backgroundColor = \"#cecece\",\n  innerPadding = \"1rem\",\n}, ref) => {\n  const [loading, setIsLoading] = useState(false);\n  const { error, handleError, clearError } = useError();\n  const [successMessage, setSuccessMessage] = useState('');\n\n  const { register, handleSubmit, formState: { errors }, reset, watch } = useForm({\n    resolver: yupResolver(schema),\n  });\n\n  const phoneValue = watch(\"phone\");\n\n  const sendMessage: SubmitHandler<{ name: string; email: string; phone: string; }> = async (data) => {\n    const { name, email, phone } = data;\n    const message = \"Gostaria de mais informações sobre o produto\";\n\n    try {\n      setIsLoading(true);\n\n      if (!productId || !utm_source || !utm_medium || !utm_campaign || !utm_term || !apiToken) {\n        throw new Error(\"Parâmetros obrigatórios não informados\");\n      }\n\n      const response = await fetch(`${apiUrl}/leads`, {\n        method: \"POST\",\n        headers: {\n          \"Content-Type\": \"application/json\",\n          Authorization: `Basic ${apiToken}`,\n        },\n        body: JSON.stringify({\n          name,\n          email,\n          phone,\n          message,\n          productId,\n          utm_source,\n          utm_medium,\n          utm_campaign,\n          utm_term,\n        }),\n      });\n\n      if (!response.ok) {\n        throw new Error(\"Falha ao enviar a mensagem!\");\n      }\n\n      setSuccessMessage(\"Mensagem enviada com sucesso!\");\n      reset();\n    } catch (err) {\n      handleError(err);\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  return (\n    <>\n      <FontLoader />\n      <GlobalStyles />\n      <FormContainer ref={ref} >\n        <HeaderContainer>\n          <Title >Atendimento por mensagem</Title>\n\n          <Text >Informe seus dados e retornaremos a mensagem.</Text>\n        </HeaderContainer>\n\n        \n\n          <h6>* Campos de preenchimento obrigatório.</h6>\n\n          <ButtonContainer>\n          </ButtonContainer>\n\n          <p>A Mitre Realty respeita a sua privacidade e utiliza os seus dados pessoais para contatá-lo por e-mail ou telefone aqui registrados. Para saber mais, acesse a nossa{ ' '}\n          <a\n            href=\"https://www.mitrerealty.com.br/politica-de-privacidade\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            Política de Privacidade\n          </a>. Ao clicar em {'\"'}enviar{'\"'}, você concorda em permitir que a Mitre Realty, armazene e processe os dados pessoais fornecidos por você para finalidade informada</p>\n\n      </FormContainer>\n    </>\n  );\n});\n\nMitreFormComponent.displayName = \"MitreFormComponent\";\nexport default MitreFormComponent;\n","import { useState } from \"react\";\n\nexport function useError() {\n  const [error, setError] = useState<Error | null>(null);\n\n  const handleError = (err: unknown) => {\n    const errorObj = err instanceof Error ? err : new Error(String(err));\n    setError(errorObj);\n    console.error(errorObj);\n  };\n\n  const clearError = () => setError(null);\n\n  return { error, handleError, clearError };\n}\n","type directionType = \"column\" | \"row\";\ntype alignItemsType = \"center\" | \"flex-start\";\n\ntype jutifyContentType = \"center\" | \"space-between\";\n\nexport function flex(\n  direction: directionType = \"row\",\n  alignItems?: alignItemsType,\n  justifyContent?: jutifyContentType\n) {\n  return `\n    align-items:${alignItems || null};\n    display:flex;\n    flex-direction:${direction};\n    justify-content:${justifyContent || null};\n  `;\n}\n\nexport const alignX = `\n  left:50%;\n  transform:translateX(-50%);\n`;\n\nexport const alignXAndY = `\n  left:50%;\n  top:50%;\n  transform:translate(-50%, -50%);\n`;\n\nexport const darkEffect = `\n  &:hover {\n    cursor:pointer;\n    filter:brightness(98%);\n  }\n\n  &:active {\n    filter:brightness(95%);\n  }\n`;\n\nexport const opacityEffect = `\n  &:hover {\n    cursor:pointer;\n    opacity:.9;\n  }\n\n  &:active {\n    opacity:.7;\n  }\n`;\n\nexport const modalZIndex = 9999;\n\nexport const breakpoints = {\n  tablet: \"1024px\",\n};\n","import { flex, opacityEffect } from \"../styles/utils\";\nimport styled from \"styled-components\";\n\nexport const FormContainer = styled.div`\n  ${flex(\"column\")}\n  align-items: stretch;\n  justify-content: flex-start;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  /* Hide scrollbars for WebKit browsers */\n  ::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* Hide scrollbars for Firefox */\n  scrollbar-width: none;\n\n  box-sizing: border-box;\n  height: 100%;\n`;\n\nexport const HeaderContainer = styled.div`\n  margin-bottom: 1rem;\n`;\n\nexport const ButtonContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  margin-top: 0.75rem;\n`;\n\nexport const Form = styled.form`\n  label {\n    font-weight: 700;\n  }\n\n  input {\n    background: white;\n    margin-bottom: 0.75rem;\n  }\n\n  p {\n    font-family: \"Montserrat\", sans-serif;\n    font-style: italic;\n    font-weight: 200;\n    font-size: 0.8rem;\n    text-align: start;\n  }\n\n  a {\n    font-family: \"Montserrat\", sans-serif;\n    font-style: italic;\n    font-weight: 200;\n    font-size: 0.8rem;\n  }\n\n  h6 {\n    text-align: start;\n    margin-left: 10px;\n  }\n\n  & > div {\n    margin-bottom: 10px;,\n  }\n\n  button {\n    ${opacityEffect}\n    color: var(--black);\n    font-weight: 600;\n    border: none;\n    border-radius: 8px;\n    width: 60%;\n    margin-top: 10px;\n    margin-bottom: 10px;\n  }\n`;\n\nexport const Title = styled.h2`\n  font-size: 1.25rem;\n  font-weight: 700;\n  line-height: 24px;\n  letter-spacing: 0em;\n`;\n\nexport const Text = styled.p`\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 23px;\n  letter-spacing: 0em;\n  margin-top: 10px;\n`;\n","import { createGlobalStyle } from \"styled-components\";\nimport React, { useEffect } from \"react\";\n\nexport const GlobalStyles = createGlobalStyle`\n  :root {\n    --red: #e52e4d;\n    --white: #FFF;\n    --black: #2F2F2F;\n    --black-2:#1E1E1E;\n    --alphaBlack: #000000;\n    --black-2:#1E1E1E;\n    --black-3:#353535;\n\n    --yellow-400:#FFD789;\n    --yellow-500: #F6C76B;\n    --gray-40:#F0F0F0;\n    --gray-45:#767676;\n    --gray-50: #686A69;\n    --gray-60: #8F8F8F;\n    --gray-100: #B6B6B6;\n    --gray-150: #B9B9B9;\n    --gray-200: #D2D2D2;\n    --gray-300: #EBEBEB;\n    --gray-400: #ECECEC;\n    --gray-500: #F4F4F4;\n    --gray-550:#6F6F6F;\n    --gray-600:#686868;\n    --gray-700: #535353;\n    --gray-800:#9D9D9D;\n    --shadow-500: 0px 4px 8px rgba(91, 91, 91, 0.2);\n    --green:#57C06E;\n    --green-2:#2DCE68;\n    --blue:#007BFF;\n  }\n\n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n\n  html {\n    scroll-behavior: smooth;\n\n    @media (max-width: 1080px) {\n      font-size: 93.75%;\n    }\n    @media (max-width: 720px) {\n      font-size: 87.5%;\n    }\n  }\n\n  body {\n    background: var(--white);\n    -webkit-font-smoothing: antialiased;\n  }\n\n  body, input, textarea, select, button {\n    font-family: \"Montserrat\", sans-serif;\n    font-weight: 400;\n  } \n\n  h1, h2, h3, h4, h5, h6, strong {\n    font-weight: 600;\n  }\n\n  button {\n    cursor: pointer;\n  }\n\n  [disabled] {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n\n  .hidden {\n    overflow: hidden;\n  }\n\n  ::-webkit-scrollbar {\n    -webkit-appearance: none;\n    background: var(--gray-500);\n    width: 6px;\n    height: 10px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: var(--gray-50);\n  }\n\n  .aligncenter {\n    text-align: center;\n  }\n\n  .width-190px {\n    width:190px;\n  }\n\n  .hidden-content {\n    display:none !important;\n  }\n\n  .global-margin-bottom {\n    margin-bottom:20px;\n  }\n\n  .background-light-gray {\n    background:#F4F4F4;\n  }\n\n  .full-width-and-height {\n    height:100%;\n    width:100%;\n  }\n\n  .flex-direction-column {\n    flex-direction:column;\n  }\n\n  .bold {\n    font-weight:700;\n  }\n\n  .margin-center-x {\n    margin:0 auto;\n  }\n\n  .border-none {\n    border:none;\n  }\n\n  .text-center {\n    text-align:center;\n  }\n\n  .relative {\n    position:relative;\n  }\n\n  /* accessibility */\n  body ._access-menu p._text-center{\n    font-family: \"Montserrat\", sans-serif;\n    font-style: italic;\n    font-size: 1.2rem!important;\n    margin-top: 6px;\n    margin-bottom: 3px;\n  } \n\n`;\n\nconst FontLoader: React.FC = () => {\n  useEffect(() => {\n    const link = document.createElement(\"link\");\n    link.href =\n      \"https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap\";\n    link.rel = \"stylesheet\";\n    document.head.appendChild(link);\n  }, []);\n\n  return null;\n};\n\nexport default FontLoader;\n"],"mappings":"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","names":["import_react","styled","import_styled_components","import_react","React"]}
+{"version":3,"sources":["../src/index.ts","../src/components/Form/index.tsx","../src/components/hooks/useError.ts","../src/components/styles/utils.ts","../src/components/Form/styles.ts","../src/components/styles/global.ts","../src/components/Alert/index.tsx","../src/components/Alert/styles.ts"],"sourcesContent":["import MitreFormComponent from \"./components/Form\";\n\nexport default MitreFormComponent;\n//export type { MitreFormComponentProps } from \"./components/Form\";\n","import React, { useState } from \"react\";\nimport { useError } from \"../hooks/useError\";\nimport { useForm, SubmitHandler } from \"react-hook-form\";\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport * as yup from \"yup\";\n\nimport { \n    FormContainer, \n    HeaderContainer, \n    ButtonContainer, \n    Form, \n    Title, \n    Text \n} from \"./styles\";\nimport FontLoader, { GlobalStyles } from \"../styles/global\";\n\nimport { Alert } from \"../Alert\";\n\nexport interface MitreFormComponentProps {\n  productId: string;\n  apiUrl: string;\n  apiToken: string;\n  utm_source: string;\n  utm_medium: string;\n  utm_campaign: string;\n  utm_term: string;\n  showHeader?: boolean;\n  colorPrimary?: string;\n  textColor?: string;\n  backgroundColor?: string;\n  innerPadding?: string;\n}\n\nconst schema = yup.object().shape({\n  name: yup.string().required(\"Nome é obrigatório\"),\n  email: yup.string().required(\"Email é obrigatório\").email(\"Email inválido\"),\n  phone: yup.string().required(\"Telefone é obrigatório\")\n  .test(\n    'min-digits',\n    'Número de telefone inválido!',\n    (value) => {\n      const digitsOnly = value?.replace(/\\D/g, '') || '';\n      //TODO melhorar essa lógica com algum regex\n      return digitsOnly.length >= 8\n    })\n});\n\nconst MitreFormComponent = React.forwardRef<HTMLDivElement, MitreFormComponentProps>(({\n  productId,\n  apiUrl,\n  apiToken,\n  utm_source,\n  utm_medium,\n  utm_campaign,\n  utm_term,\n  showHeader =  true,\n  colorPrimary = \"#F6C76B\",\n  textColor = \"#2F2F2F\",\n  backgroundColor = \"#cecece\",\n  innerPadding = \"1rem\",\n}, ref) => {\n  const [loading, setIsLoading] = useState(false);\n  const { error, handleError, clearError } = useError();\n  const [successMessage, setSuccessMessage] = useState('');\n\n  const { register, handleSubmit, formState: { errors }, reset, watch } = useForm({\n    resolver: yupResolver(schema),\n  });\n\n  const phoneValue = watch(\"phone\");\n\n  const sendMessage: SubmitHandler<{ name: string; email: string; phone: string; }> = async (data) => {\n    const { name, email, phone } = data;\n    const message = \"Gostaria de mais informações sobre o produto\";\n\n    try {\n      setIsLoading(true);\n\n      if (!productId || !utm_source || !utm_medium || !utm_campaign || !utm_term || !apiToken) {\n        throw new Error(\"Parâmetros obrigatórios não informados\");\n      }\n\n      const response = await fetch(`${apiUrl}/leads`, {\n        method: \"POST\",\n        headers: {\n          \"Content-Type\": \"application/json\",\n          Authorization: `Basic ${apiToken}`,\n        },\n        body: JSON.stringify({\n          name,\n          email,\n          phone,\n          message,\n          productId,\n          utm_source,\n          utm_medium,\n          utm_campaign,\n          utm_term,\n        }),\n      });\n\n      if (!response.ok) {\n        throw new Error(\"Falha ao enviar a mensagem!\");\n      }\n\n      setSuccessMessage(\"Mensagem enviada com sucesso!\");\n      reset();\n    } catch (err) {\n      handleError(err);\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  return (\n      <>\n        <FontLoader />\n        <GlobalStyles />\n\n        {error && (\n          <Alert \n            type=\"error\" \n            dismissible\n            onDismiss={clearError}\n            autoDismiss={5000}\n          >\n            {error!.message}\n          </Alert>\n        )}\n\n        {successMessage && (\n          <Alert \n            type=\"success\"\n            dismissible\n            onDismiss={() => setSuccessMessage('')}\n            autoDismiss={5000}\n          >\n            {successMessage}\n          </Alert>\n        )}\n\n        <FormContainer ref={ref} >\n          <HeaderContainer>\n            <Title >Atendimento por mensagem</Title>\n\n            <Text >Informe seus dados e retornaremos a mensagem.</Text>\n          </HeaderContainer>\n\n          \n\n            <h6>* Campos de preenchimento obrigatório.</h6>\n\n            <ButtonContainer>\n            </ButtonContainer>\n\n            <p>A Mitre Realty respeita a sua privacidade e utiliza os seus dados pessoais para contatá-lo por e-mail ou telefone aqui registrados. Para saber mais, acesse a nossa{ ' '}\n            <a\n              href=\"https://www.mitrerealty.com.br/politica-de-privacidade\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              Política de Privacidade\n            </a>. Ao clicar em {'\"'}enviar{'\"'}, você concorda em permitir que a Mitre Realty, armazene e processe os dados pessoais fornecidos por você para finalidade informada</p>\n\n        </FormContainer>\n    </>\n  );\n});\n\nMitreFormComponent.displayName = \"MitreFormComponent\";\nexport default MitreFormComponent;\n","import { useState } from \"react\";\n\nexport function useError() {\n  const [error, setError] = useState<Error | null>(null);\n\n  const handleError = (err: unknown) => {\n    const errorObj = err instanceof Error ? err : new Error(String(err));\n    setError(errorObj);\n    console.error(errorObj);\n  };\n\n  const clearError = () => setError(null);\n\n  return { error, handleError, clearError };\n}\n","type directionType = \"column\" | \"row\";\ntype alignItemsType = \"center\" | \"flex-start\";\n\ntype jutifyContentType = \"center\" | \"space-between\";\n\nexport function flex(\n  direction: directionType = \"row\",\n  alignItems?: alignItemsType,\n  justifyContent?: jutifyContentType\n) {\n  return `\n    align-items:${alignItems || null};\n    display:flex;\n    flex-direction:${direction};\n    justify-content:${justifyContent || null};\n  `;\n}\n\nexport const alignX = `\n  left:50%;\n  transform:translateX(-50%);\n`;\n\nexport const alignXAndY = `\n  left:50%;\n  top:50%;\n  transform:translate(-50%, -50%);\n`;\n\nexport const darkEffect = `\n  &:hover {\n    cursor:pointer;\n    filter:brightness(98%);\n  }\n\n  &:active {\n    filter:brightness(95%);\n  }\n`;\n\nexport const opacityEffect = `\n  &:hover {\n    cursor:pointer;\n    opacity:.9;\n  }\n\n  &:active {\n    opacity:.7;\n  }\n`;\n\nexport const modalZIndex = 9999;\n\nexport const breakpoints = {\n  tablet: \"1024px\",\n};\n","import { flex, opacityEffect } from \"../styles/utils\";\nimport styled from \"styled-components\";\n\nexport const FormContainer = styled.div`\n  ${flex(\"column\")}\n  align-items: stretch;\n  justify-content: flex-start;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  /* Hide scrollbars for WebKit browsers */\n  ::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* Hide scrollbars for Firefox */\n  scrollbar-width: none;\n\n  box-sizing: border-box;\n  height: 100%;\n`;\n\nexport const HeaderContainer = styled.div`\n  margin-bottom: 1rem;\n`;\n\nexport const ButtonContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  margin-top: 0.75rem;\n`;\n\nexport const Form = styled.form`\n  label {\n    font-weight: 700;\n  }\n\n  input {\n    background: white;\n    margin-bottom: 0.75rem;\n  }\n\n  p {\n    font-family: \"Montserrat\", sans-serif;\n    font-style: italic;\n    font-weight: 200;\n    font-size: 0.8rem;\n    text-align: start;\n  }\n\n  a {\n    font-family: \"Montserrat\", sans-serif;\n    font-style: italic;\n    font-weight: 200;\n    font-size: 0.8rem;\n  }\n\n  h6 {\n    text-align: start;\n    margin-left: 10px;\n  }\n\n  & > div {\n    margin-bottom: 10px;,\n  }\n\n  button {\n    ${opacityEffect}\n    color: var(--black);\n    font-weight: 600;\n    border: none;\n    border-radius: 8px;\n    width: 60%;\n    margin-top: 10px;\n    margin-bottom: 10px;\n  }\n`;\n\nexport const Title = styled.h2`\n  font-size: 1.25rem;\n  font-weight: 700;\n  line-height: 24px;\n  letter-spacing: 0em;\n`;\n\nexport const Text = styled.p`\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 23px;\n  letter-spacing: 0em;\n  margin-top: 10px;\n`;\n","import { createGlobalStyle } from \"styled-components\";\nimport React, { useEffect } from \"react\";\n\nexport const GlobalStyles = createGlobalStyle`\n  :root {\n    --red: #e52e4d;\n    --white: #FFF;\n    --black: #2F2F2F;\n    --black-2:#1E1E1E;\n    --alphaBlack: #000000;\n    --black-2:#1E1E1E;\n    --black-3:#353535;\n\n    --yellow-400:#FFD789;\n    --yellow-500: #F6C76B;\n    --gray-40:#F0F0F0;\n    --gray-45:#767676;\n    --gray-50: #686A69;\n    --gray-60: #8F8F8F;\n    --gray-100: #B6B6B6;\n    --gray-150: #B9B9B9;\n    --gray-200: #D2D2D2;\n    --gray-300: #EBEBEB;\n    --gray-400: #ECECEC;\n    --gray-500: #F4F4F4;\n    --gray-550:#6F6F6F;\n    --gray-600:#686868;\n    --gray-700: #535353;\n    --gray-800:#9D9D9D;\n    --shadow-500: 0px 4px 8px rgba(91, 91, 91, 0.2);\n    --green:#57C06E;\n    --green-2:#2DCE68;\n    --blue:#007BFF;\n  }\n\n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n\n  html {\n    scroll-behavior: smooth;\n\n    @media (max-width: 1080px) {\n      font-size: 93.75%;\n    }\n    @media (max-width: 720px) {\n      font-size: 87.5%;\n    }\n  }\n\n  body {\n    background: var(--white);\n    -webkit-font-smoothing: antialiased;\n  }\n\n  body, input, textarea, select, button {\n    font-family: \"Montserrat\", sans-serif;\n    font-weight: 400;\n  } \n\n  h1, h2, h3, h4, h5, h6, strong {\n    font-weight: 600;\n  }\n\n  button {\n    cursor: pointer;\n  }\n\n  [disabled] {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n\n  .hidden {\n    overflow: hidden;\n  }\n\n  ::-webkit-scrollbar {\n    -webkit-appearance: none;\n    background: var(--gray-500);\n    width: 6px;\n    height: 10px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: var(--gray-50);\n  }\n\n  .aligncenter {\n    text-align: center;\n  }\n\n  .width-190px {\n    width:190px;\n  }\n\n  .hidden-content {\n    display:none !important;\n  }\n\n  .global-margin-bottom {\n    margin-bottom:20px;\n  }\n\n  .background-light-gray {\n    background:#F4F4F4;\n  }\n\n  .full-width-and-height {\n    height:100%;\n    width:100%;\n  }\n\n  .flex-direction-column {\n    flex-direction:column;\n  }\n\n  .bold {\n    font-weight:700;\n  }\n\n  .margin-center-x {\n    margin:0 auto;\n  }\n\n  .border-none {\n    border:none;\n  }\n\n  .text-center {\n    text-align:center;\n  }\n\n  .relative {\n    position:relative;\n  }\n\n  /* accessibility */\n  body ._access-menu p._text-center{\n    font-family: \"Montserrat\", sans-serif;\n    font-style: italic;\n    font-size: 1.2rem!important;\n    margin-top: 6px;\n    margin-bottom: 3px;\n  } \n\n`;\n\nconst FontLoader: React.FC = () => {\n  useEffect(() => {\n    const link = document.createElement(\"link\");\n    link.href =\n      \"https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap\";\n    link.rel = \"stylesheet\";\n    document.head.appendChild(link);\n  }, []);\n\n  return null;\n};\n\nexport default FontLoader;\n","import React, { useEffect, useState, useCallback } from 'react';\nimport { AlertContainer, DismissButton } from './styles';\nimport { AlertType } from './styles';\n\nimport { HiX } from 'react-icons/hi';\n\ninterface AlertProps {\n  type?: AlertType;\n  children: React.ReactNode;\n  className?: string;\n  dismissible?: boolean;\n  onDismiss?: () => void;\n  autoDismiss?: number;\n}\n\nexport const Alert = ({\n  type = 'info',\n  children,\n  className,\n  dismissible = false,\n  onDismiss,\n  autoDismiss\n}: AlertProps) => {\n  const [isClosing, setIsClosing] = useState(false);\n\n  const handleDismiss = useCallback(() => {\n    setIsClosing(true);\n    setTimeout(() => onDismiss?.(), 300);\n  }, [onDismiss]);\n\n  useEffect(() => {\n    if (autoDismiss) {\n      const timer = setTimeout(handleDismiss, autoDismiss);\n      return () => clearTimeout(timer);\n    }\n  }, [autoDismiss, handleDismiss]);\n\n  return (\n    <AlertContainer\n      $type={type}\n      $dismissible={dismissible}\n      $isClosing={isClosing}\n      className={className}\n      role=\"alert\"\n    >\n      {children}\n      {dismissible && (\n        <DismissButton \n          onClick={handleDismiss} \n          aria-label=\"Dismiss alert\"\n        >\n          <HiX /> \n        </DismissButton>\n      )}\n    </AlertContainer>\n  );\n};","import styled, { css, keyframes } from \"styled-components\";\n\nexport type AlertType = \"error\" | \"warning\" | \"info\" | \"success\";\n\nconst fadeIn = keyframes`\n  from { opacity: 0; transform: translateY(-10px); }\n  to { opacity: 1; transform: translateY(0); }\n`;\n\nconst fadeOut = keyframes`\n  from { opacity: 1; transform: translateY(0); }\n  to { opacity: 0; transform: translateY(-10px); }\n`;\n\ninterface AlertContainerProps {\n  $type: AlertType;\n  $dismissible?: boolean;\n  $isClosing: boolean;\n}\n\nconst typeStyles = {\n  error: css`\n    background-color: var(--red);\n    border: 1px solid var(--red);\n    color: var(--white);\n    svg {\n      color: var(--white);\n    }\n  `,\n  warning: css`\n    background-color: var(--yellow-500);\n    border: 1px solid var(--yellow-400);\n    color: var(--black);\n    svg {\n      color: var(--black);\n    }\n  `,\n  info: css`\n    background-color: var(--blue);\n    border: 1px solid var(--blue);\n    color: var(--white);\n    svg {\n      color: var(--white);\n    }\n  `,\n  success: css`\n    background-color: var(--green);\n    border: 1px solid var(--green-2);\n    color: var(--white);\n    svg {\n      color: var(--white);\n    }\n  `,\n};\n\nexport const AlertContainer = styled.div<AlertContainerProps>`\n  position: fixed;\n  width: 500px;\n  top: 15px;\n  right: 15px;\n  padding: 1rem ${({ $dismissible }) => ($dismissible ? \"2.5rem\" : \"1rem\")} 1rem\n    1rem;\n  margin-bottom: 1rem;\n  animation: ${({ $isClosing }) => ($isClosing ? fadeOut : fadeIn)} 0.3s\n    ease-out;\n  animation-fill-mode: forwards;\n  align-items: center;\n  gap: 0.5rem;\n  box-shadow: var(--shadow-500);\n  border-radius: 0.5rem;\n  font-size: 1rem;\n  font-weight: 500;\n\n  ${({ $type }) => typeStyles[$type]}\n`;\n\nexport const DismissButton = styled.button`\n  position: absolute;\n  background: transparent;\n  right: 10px;\n  border: none;\n  cursor: pointer;\n  color: inherit;\n  opacity: 1;\n  transition: opacity 0.2s;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  svg {\n    width: 1rem;\n    height: 1rem;\n  }\n`;\n"],"mappings":"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","names":["import_react","styled","import_styled_components","import_react","import_react","import_styled_components","styled","import_jsx_runtime","React"]}

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/components/Form/index.tsx
-import React2, { useState as useState2 } from "react";
+import React3, { useState as useState3 } from "react";
 
 // src/components/hooks/useError.ts
 import { useState } from "react";
@@ -289,8 +289,140 @@ var FontLoader = () => {
 };
 var global_default = FontLoader;
 
+// src/components/Alert/index.tsx
+import { useEffect as useEffect2, useState as useState2, useCallback } from "react";
+
+// src/components/Alert/styles.ts
+import styled2, { css, 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: css`
+    background-color: var(--red);
+    border: 1px solid var(--red);
+    color: var(--white);
+    svg {
+      color: var(--white);
+    }
+  `,
+  warning: css`
+    background-color: var(--yellow-500);
+    border: 1px solid var(--yellow-400);
+    color: var(--black);
+    svg {
+      color: var(--black);
+    }
+  `,
+  info: css`
+    background-color: var(--blue);
+    border: 1px solid var(--blue);
+    color: var(--white);
+    svg {
+      color: var(--white);
+    }
+  `,
+  success: css`
+    background-color: var(--green);
+    border: 1px solid var(--green-2);
+    color: var(--white);
+    svg {
+      color: var(--white);
+    }
+  `
+};
+var AlertContainer = styled2.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 = styled2.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, jsxs } from "react/jsx-runtime";
+var Alert = ({
+  type = "info",
+  children,
+  className,
+  dismissible = false,
+  onDismiss,
+  autoDismiss
+}) => {
+  const [isClosing, setIsClosing] = useState2(false);
+  const handleDismiss = useCallback(() => {
+    setIsClosing(true);
+    setTimeout(() => onDismiss?.(), 300);
+  }, [onDismiss]);
+  useEffect2(() => {
+    if (autoDismiss) {
+      const timer = setTimeout(handleDismiss, autoDismiss);
+      return () => clearTimeout(timer);
+    }
+  }, [autoDismiss, handleDismiss]);
+  return /* @__PURE__ */ jsxs(
+    AlertContainer,
+    {
+      $type: type,
+      $dismissible: dismissible,
+      $isClosing: isClosing,
+      className,
+      role: "alert",
+      children: [
+        children,
+        dismissible && /* @__PURE__ */ jsx(
+          DismissButton,
+          {
+            onClick: handleDismiss,
+            "aria-label": "Dismiss alert",
+            children: /* @__PURE__ */ jsx(HiX, {})
+          }
+        )
+      ]
+    }
+  );
+};
+
 // src/components/Form/index.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } 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"),
@@ -303,7 +435,7 @@ var schema = yup.object().shape({
     }
   )
 });
-var MitreFormComponent = React2.forwardRef(({
+var MitreFormComponent = React3.forwardRef(({
   productId,
   apiUrl,
   apiToken,
@@ -317,9 +449,9 @@ var MitreFormComponent = React2.forwardRef(({
   backgroundColor = "#cecece",
   innerPadding = "1rem"
 }, ref) => {
-  const [loading, setIsLoading] = useState2(false);
+  const [loading, setIsLoading] = useState3(false);
   const { error, handleError, clearError } = useError();
-  const [successMessage, setSuccessMessage] = useState2("");
+  const [successMessage, setSuccessMessage] = useState3("");
   const { register, handleSubmit, formState: { errors }, reset, watch } = useForm({
     resolver: yupResolver(schema)
   });
@@ -361,20 +493,40 @@ var MitreFormComponent = React2.forwardRef(({
       setIsLoading(false);
     }
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(global_default, {}),
-    /* @__PURE__ */ jsx(GlobalStyles, {}),
-    /* @__PURE__ */ jsxs(FormContainer, { ref, children: [
-      /* @__PURE__ */ jsxs(HeaderContainer, { children: [
-        /* @__PURE__ */ jsx(Title, { children: "Atendimento por mensagem" }),
-        /* @__PURE__ */ jsx(Text, { children: "Informe seus dados e retornaremos a mensagem." })
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2(global_default, {}),
+    /* @__PURE__ */ jsx2(GlobalStyles, {}),
+    error && /* @__PURE__ */ jsx2(
+      Alert,
+      {
+        type: "error",
+        dismissible: true,
+        onDismiss: clearError,
+        autoDismiss: 5e3,
+        children: error.message
+      }
+    ),
+    successMessage && /* @__PURE__ */ jsx2(
+      Alert,
+      {
+        type: "success",
+        dismissible: true,
+        onDismiss: () => setSuccessMessage(""),
+        autoDismiss: 5e3,
+        children: successMessage
+      }
+    ),
+    /* @__PURE__ */ jsxs2(FormContainer, { ref, children: [
+      /* @__PURE__ */ jsxs2(HeaderContainer, { children: [
+        /* @__PURE__ */ jsx2(Title, { children: "Atendimento por mensagem" }),
+        /* @__PURE__ */ jsx2(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: [
+      /* @__PURE__ */ jsx2("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
+      /* @__PURE__ */ jsx2(ButtonContainer, {}),
+      /* @__PURE__ */ jsxs2("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(
+        /* @__PURE__ */ jsx2(
           "a",
           {
             href: "https://www.mitrerealty.com.br/politica-de-privacidade",

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Form/index.tsx","../src/components/hooks/useError.ts","../src/components/styles/utils.ts","../src/components/Form/styles.ts","../src/components/styles/global.ts","../src/index.ts"],"sourcesContent":["import React, { useState } from \"react\";\nimport { useError } from \"../hooks/useError\";\nimport { useForm, SubmitHandler } from \"react-hook-form\";\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport * as yup from \"yup\";\n\nimport { \n    FormContainer, \n    HeaderContainer, \n    ButtonContainer, \n    Form, \n    Title, \n    Text \n} from \"./styles\";\nimport FontLoader, { GlobalStyles } from \"../styles/global\";\n\nexport interface MitreFormComponentProps {\n  productId: string;\n  apiUrl: string;\n  apiToken: string;\n  utm_source: string;\n  utm_medium: string;\n  utm_campaign: string;\n  utm_term: string;\n  showHeader?: boolean;\n  colorPrimary?: string;\n  textColor?: string;\n  backgroundColor?: string;\n  innerPadding?: string;\n}\n\nconst schema = yup.object().shape({\n  name: yup.string().required(\"Nome é obrigatório\"),\n  email: yup.string().required(\"Email é obrigatório\").email(\"Email inválido\"),\n  phone: yup.string().required(\"Telefone é obrigatório\")\n  .test(\n    'min-digits',\n    'Número de telefone inválido!',\n    (value) => {\n      const digitsOnly = value?.replace(/\\D/g, '') || '';\n      //TODO melhorar essa lógica com algum regex\n      return digitsOnly.length >= 8\n    })\n});\n\nconst MitreFormComponent = React.forwardRef<HTMLDivElement, MitreFormComponentProps>(({\n  productId,\n  apiUrl,\n  apiToken,\n  utm_source,\n  utm_medium,\n  utm_campaign,\n  utm_term,\n  showHeader =  true,\n  colorPrimary = \"#F6C76B\",\n  textColor = \"#2F2F2F\",\n  backgroundColor = \"#cecece\",\n  innerPadding = \"1rem\",\n}, ref) => {\n  const [loading, setIsLoading] = useState(false);\n  const { error, handleError, clearError } = useError();\n  const [successMessage, setSuccessMessage] = useState('');\n\n  const { register, handleSubmit, formState: { errors }, reset, watch } = useForm({\n    resolver: yupResolver(schema),\n  });\n\n  const phoneValue = watch(\"phone\");\n\n  const sendMessage: SubmitHandler<{ name: string; email: string; phone: string; }> = async (data) => {\n    const { name, email, phone } = data;\n    const message = \"Gostaria de mais informações sobre o produto\";\n\n    try {\n      setIsLoading(true);\n\n      if (!productId || !utm_source || !utm_medium || !utm_campaign || !utm_term || !apiToken) {\n        throw new Error(\"Parâmetros obrigatórios não informados\");\n      }\n\n      const response = await fetch(`${apiUrl}/leads`, {\n        method: \"POST\",\n        headers: {\n          \"Content-Type\": \"application/json\",\n          Authorization: `Basic ${apiToken}`,\n        },\n        body: JSON.stringify({\n          name,\n          email,\n          phone,\n          message,\n          productId,\n          utm_source,\n          utm_medium,\n          utm_campaign,\n          utm_term,\n        }),\n      });\n\n      if (!response.ok) {\n        throw new Error(\"Falha ao enviar a mensagem!\");\n      }\n\n      setSuccessMessage(\"Mensagem enviada com sucesso!\");\n      reset();\n    } catch (err) {\n      handleError(err);\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  return (\n    <>\n      <FontLoader />\n      <GlobalStyles />\n      <FormContainer ref={ref} >\n        <HeaderContainer>\n          <Title >Atendimento por mensagem</Title>\n\n          <Text >Informe seus dados e retornaremos a mensagem.</Text>\n        </HeaderContainer>\n\n        \n\n          <h6>* Campos de preenchimento obrigatório.</h6>\n\n          <ButtonContainer>\n          </ButtonContainer>\n\n          <p>A Mitre Realty respeita a sua privacidade e utiliza os seus dados pessoais para contatá-lo por e-mail ou telefone aqui registrados. Para saber mais, acesse a nossa{ ' '}\n          <a\n            href=\"https://www.mitrerealty.com.br/politica-de-privacidade\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            Política de Privacidade\n          </a>. Ao clicar em {'\"'}enviar{'\"'}, você concorda em permitir que a Mitre Realty, armazene e processe os dados pessoais fornecidos por você para finalidade informada</p>\n\n      </FormContainer>\n    </>\n  );\n});\n\nMitreFormComponent.displayName = \"MitreFormComponent\";\nexport default MitreFormComponent;\n","import { useState } from \"react\";\n\nexport function useError() {\n  const [error, setError] = useState<Error | null>(null);\n\n  const handleError = (err: unknown) => {\n    const errorObj = err instanceof Error ? err : new Error(String(err));\n    setError(errorObj);\n    console.error(errorObj);\n  };\n\n  const clearError = () => setError(null);\n\n  return { error, handleError, clearError };\n}\n","type directionType = \"column\" | \"row\";\ntype alignItemsType = \"center\" | \"flex-start\";\n\ntype jutifyContentType = \"center\" | \"space-between\";\n\nexport function flex(\n  direction: directionType = \"row\",\n  alignItems?: alignItemsType,\n  justifyContent?: jutifyContentType\n) {\n  return `\n    align-items:${alignItems || null};\n    display:flex;\n    flex-direction:${direction};\n    justify-content:${justifyContent || null};\n  `;\n}\n\nexport const alignX = `\n  left:50%;\n  transform:translateX(-50%);\n`;\n\nexport const alignXAndY = `\n  left:50%;\n  top:50%;\n  transform:translate(-50%, -50%);\n`;\n\nexport const darkEffect = `\n  &:hover {\n    cursor:pointer;\n    filter:brightness(98%);\n  }\n\n  &:active {\n    filter:brightness(95%);\n  }\n`;\n\nexport const opacityEffect = `\n  &:hover {\n    cursor:pointer;\n    opacity:.9;\n  }\n\n  &:active {\n    opacity:.7;\n  }\n`;\n\nexport const modalZIndex = 9999;\n\nexport const breakpoints = {\n  tablet: \"1024px\",\n};\n","import { flex, opacityEffect } from \"../styles/utils\";\nimport styled from \"styled-components\";\n\nexport const FormContainer = styled.div`\n  ${flex(\"column\")}\n  align-items: stretch;\n  justify-content: flex-start;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  /* Hide scrollbars for WebKit browsers */\n  ::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* Hide scrollbars for Firefox */\n  scrollbar-width: none;\n\n  box-sizing: border-box;\n  height: 100%;\n`;\n\nexport const HeaderContainer = styled.div`\n  margin-bottom: 1rem;\n`;\n\nexport const ButtonContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  margin-top: 0.75rem;\n`;\n\nexport const Form = styled.form`\n  label {\n    font-weight: 700;\n  }\n\n  input {\n    background: white;\n    margin-bottom: 0.75rem;\n  }\n\n  p {\n    font-family: \"Montserrat\", sans-serif;\n    font-style: italic;\n    font-weight: 200;\n    font-size: 0.8rem;\n    text-align: start;\n  }\n\n  a {\n    font-family: \"Montserrat\", sans-serif;\n    font-style: italic;\n    font-weight: 200;\n    font-size: 0.8rem;\n  }\n\n  h6 {\n    text-align: start;\n    margin-left: 10px;\n  }\n\n  & > div {\n    margin-bottom: 10px;,\n  }\n\n  button {\n    ${opacityEffect}\n    color: var(--black);\n    font-weight: 600;\n    border: none;\n    border-radius: 8px;\n    width: 60%;\n    margin-top: 10px;\n    margin-bottom: 10px;\n  }\n`;\n\nexport const Title = styled.h2`\n  font-size: 1.25rem;\n  font-weight: 700;\n  line-height: 24px;\n  letter-spacing: 0em;\n`;\n\nexport const Text = styled.p`\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 23px;\n  letter-spacing: 0em;\n  margin-top: 10px;\n`;\n","import { createGlobalStyle } from \"styled-components\";\nimport React, { useEffect } from \"react\";\n\nexport const GlobalStyles = createGlobalStyle`\n  :root {\n    --red: #e52e4d;\n    --white: #FFF;\n    --black: #2F2F2F;\n    --black-2:#1E1E1E;\n    --alphaBlack: #000000;\n    --black-2:#1E1E1E;\n    --black-3:#353535;\n\n    --yellow-400:#FFD789;\n    --yellow-500: #F6C76B;\n    --gray-40:#F0F0F0;\n    --gray-45:#767676;\n    --gray-50: #686A69;\n    --gray-60: #8F8F8F;\n    --gray-100: #B6B6B6;\n    --gray-150: #B9B9B9;\n    --gray-200: #D2D2D2;\n    --gray-300: #EBEBEB;\n    --gray-400: #ECECEC;\n    --gray-500: #F4F4F4;\n    --gray-550:#6F6F6F;\n    --gray-600:#686868;\n    --gray-700: #535353;\n    --gray-800:#9D9D9D;\n    --shadow-500: 0px 4px 8px rgba(91, 91, 91, 0.2);\n    --green:#57C06E;\n    --green-2:#2DCE68;\n    --blue:#007BFF;\n  }\n\n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n\n  html {\n    scroll-behavior: smooth;\n\n    @media (max-width: 1080px) {\n      font-size: 93.75%;\n    }\n    @media (max-width: 720px) {\n      font-size: 87.5%;\n    }\n  }\n\n  body {\n    background: var(--white);\n    -webkit-font-smoothing: antialiased;\n  }\n\n  body, input, textarea, select, button {\n    font-family: \"Montserrat\", sans-serif;\n    font-weight: 400;\n  } \n\n  h1, h2, h3, h4, h5, h6, strong {\n    font-weight: 600;\n  }\n\n  button {\n    cursor: pointer;\n  }\n\n  [disabled] {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n\n  .hidden {\n    overflow: hidden;\n  }\n\n  ::-webkit-scrollbar {\n    -webkit-appearance: none;\n    background: var(--gray-500);\n    width: 6px;\n    height: 10px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: var(--gray-50);\n  }\n\n  .aligncenter {\n    text-align: center;\n  }\n\n  .width-190px {\n    width:190px;\n  }\n\n  .hidden-content {\n    display:none !important;\n  }\n\n  .global-margin-bottom {\n    margin-bottom:20px;\n  }\n\n  .background-light-gray {\n    background:#F4F4F4;\n  }\n\n  .full-width-and-height {\n    height:100%;\n    width:100%;\n  }\n\n  .flex-direction-column {\n    flex-direction:column;\n  }\n\n  .bold {\n    font-weight:700;\n  }\n\n  .margin-center-x {\n    margin:0 auto;\n  }\n\n  .border-none {\n    border:none;\n  }\n\n  .text-center {\n    text-align:center;\n  }\n\n  .relative {\n    position:relative;\n  }\n\n  /* accessibility */\n  body ._access-menu p._text-center{\n    font-family: \"Montserrat\", sans-serif;\n    font-style: italic;\n    font-size: 1.2rem!important;\n    margin-top: 6px;\n    margin-bottom: 3px;\n  } \n\n`;\n\nconst FontLoader: React.FC = () => {\n  useEffect(() => {\n    const link = document.createElement(\"link\");\n    link.href =\n      \"https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap\";\n    link.rel = \"stylesheet\";\n    document.head.appendChild(link);\n  }, []);\n\n  return null;\n};\n\nexport default FontLoader;\n","import MitreFormComponent from \"./components/Form\";\n\nexport default MitreFormComponent;\n//export type { MitreFormComponentProps } from \"./components/Form\";\n"],"mappings":"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","names":["React","useState","React","useState"]}
+{"version":3,"sources":["../src/components/Form/index.tsx","../src/components/hooks/useError.ts","../src/components/styles/utils.ts","../src/components/Form/styles.ts","../src/components/styles/global.ts","../src/components/Alert/index.tsx","../src/components/Alert/styles.ts","../src/index.ts"],"sourcesContent":["import React, { useState } from \"react\";\nimport { useError } from \"../hooks/useError\";\nimport { useForm, SubmitHandler } from \"react-hook-form\";\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport * as yup from \"yup\";\n\nimport { \n    FormContainer, \n    HeaderContainer, \n    ButtonContainer, \n    Form, \n    Title, \n    Text \n} from \"./styles\";\nimport FontLoader, { GlobalStyles } from \"../styles/global\";\n\nimport { Alert } from \"../Alert\";\n\nexport interface MitreFormComponentProps {\n  productId: string;\n  apiUrl: string;\n  apiToken: string;\n  utm_source: string;\n  utm_medium: string;\n  utm_campaign: string;\n  utm_term: string;\n  showHeader?: boolean;\n  colorPrimary?: string;\n  textColor?: string;\n  backgroundColor?: string;\n  innerPadding?: string;\n}\n\nconst schema = yup.object().shape({\n  name: yup.string().required(\"Nome é obrigatório\"),\n  email: yup.string().required(\"Email é obrigatório\").email(\"Email inválido\"),\n  phone: yup.string().required(\"Telefone é obrigatório\")\n  .test(\n    'min-digits',\n    'Número de telefone inválido!',\n    (value) => {\n      const digitsOnly = value?.replace(/\\D/g, '') || '';\n      //TODO melhorar essa lógica com algum regex\n      return digitsOnly.length >= 8\n    })\n});\n\nconst MitreFormComponent = React.forwardRef<HTMLDivElement, MitreFormComponentProps>(({\n  productId,\n  apiUrl,\n  apiToken,\n  utm_source,\n  utm_medium,\n  utm_campaign,\n  utm_term,\n  showHeader =  true,\n  colorPrimary = \"#F6C76B\",\n  textColor = \"#2F2F2F\",\n  backgroundColor = \"#cecece\",\n  innerPadding = \"1rem\",\n}, ref) => {\n  const [loading, setIsLoading] = useState(false);\n  const { error, handleError, clearError } = useError();\n  const [successMessage, setSuccessMessage] = useState('');\n\n  const { register, handleSubmit, formState: { errors }, reset, watch } = useForm({\n    resolver: yupResolver(schema),\n  });\n\n  const phoneValue = watch(\"phone\");\n\n  const sendMessage: SubmitHandler<{ name: string; email: string; phone: string; }> = async (data) => {\n    const { name, email, phone } = data;\n    const message = \"Gostaria de mais informações sobre o produto\";\n\n    try {\n      setIsLoading(true);\n\n      if (!productId || !utm_source || !utm_medium || !utm_campaign || !utm_term || !apiToken) {\n        throw new Error(\"Parâmetros obrigatórios não informados\");\n      }\n\n      const response = await fetch(`${apiUrl}/leads`, {\n        method: \"POST\",\n        headers: {\n          \"Content-Type\": \"application/json\",\n          Authorization: `Basic ${apiToken}`,\n        },\n        body: JSON.stringify({\n          name,\n          email,\n          phone,\n          message,\n          productId,\n          utm_source,\n          utm_medium,\n          utm_campaign,\n          utm_term,\n        }),\n      });\n\n      if (!response.ok) {\n        throw new Error(\"Falha ao enviar a mensagem!\");\n      }\n\n      setSuccessMessage(\"Mensagem enviada com sucesso!\");\n      reset();\n    } catch (err) {\n      handleError(err);\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  return (\n      <>\n        <FontLoader />\n        <GlobalStyles />\n\n        {error && (\n          <Alert \n            type=\"error\" \n            dismissible\n            onDismiss={clearError}\n            autoDismiss={5000}\n          >\n            {error!.message}\n          </Alert>\n        )}\n\n        {successMessage && (\n          <Alert \n            type=\"success\"\n            dismissible\n            onDismiss={() => setSuccessMessage('')}\n            autoDismiss={5000}\n          >\n            {successMessage}\n          </Alert>\n        )}\n\n        <FormContainer ref={ref} >\n          <HeaderContainer>\n            <Title >Atendimento por mensagem</Title>\n\n            <Text >Informe seus dados e retornaremos a mensagem.</Text>\n          </HeaderContainer>\n\n          \n\n            <h6>* Campos de preenchimento obrigatório.</h6>\n\n            <ButtonContainer>\n            </ButtonContainer>\n\n            <p>A Mitre Realty respeita a sua privacidade e utiliza os seus dados pessoais para contatá-lo por e-mail ou telefone aqui registrados. Para saber mais, acesse a nossa{ ' '}\n            <a\n              href=\"https://www.mitrerealty.com.br/politica-de-privacidade\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              Política de Privacidade\n            </a>. Ao clicar em {'\"'}enviar{'\"'}, você concorda em permitir que a Mitre Realty, armazene e processe os dados pessoais fornecidos por você para finalidade informada</p>\n\n        </FormContainer>\n    </>\n  );\n});\n\nMitreFormComponent.displayName = \"MitreFormComponent\";\nexport default MitreFormComponent;\n","import { useState } from \"react\";\n\nexport function useError() {\n  const [error, setError] = useState<Error | null>(null);\n\n  const handleError = (err: unknown) => {\n    const errorObj = err instanceof Error ? err : new Error(String(err));\n    setError(errorObj);\n    console.error(errorObj);\n  };\n\n  const clearError = () => setError(null);\n\n  return { error, handleError, clearError };\n}\n","type directionType = \"column\" | \"row\";\ntype alignItemsType = \"center\" | \"flex-start\";\n\ntype jutifyContentType = \"center\" | \"space-between\";\n\nexport function flex(\n  direction: directionType = \"row\",\n  alignItems?: alignItemsType,\n  justifyContent?: jutifyContentType\n) {\n  return `\n    align-items:${alignItems || null};\n    display:flex;\n    flex-direction:${direction};\n    justify-content:${justifyContent || null};\n  `;\n}\n\nexport const alignX = `\n  left:50%;\n  transform:translateX(-50%);\n`;\n\nexport const alignXAndY = `\n  left:50%;\n  top:50%;\n  transform:translate(-50%, -50%);\n`;\n\nexport const darkEffect = `\n  &:hover {\n    cursor:pointer;\n    filter:brightness(98%);\n  }\n\n  &:active {\n    filter:brightness(95%);\n  }\n`;\n\nexport const opacityEffect = `\n  &:hover {\n    cursor:pointer;\n    opacity:.9;\n  }\n\n  &:active {\n    opacity:.7;\n  }\n`;\n\nexport const modalZIndex = 9999;\n\nexport const breakpoints = {\n  tablet: \"1024px\",\n};\n","import { flex, opacityEffect } from \"../styles/utils\";\nimport styled from \"styled-components\";\n\nexport const FormContainer = styled.div`\n  ${flex(\"column\")}\n  align-items: stretch;\n  justify-content: flex-start;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  /* Hide scrollbars for WebKit browsers */\n  ::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* Hide scrollbars for Firefox */\n  scrollbar-width: none;\n\n  box-sizing: border-box;\n  height: 100%;\n`;\n\nexport const HeaderContainer = styled.div`\n  margin-bottom: 1rem;\n`;\n\nexport const ButtonContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  margin-top: 0.75rem;\n`;\n\nexport const Form = styled.form`\n  label {\n    font-weight: 700;\n  }\n\n  input {\n    background: white;\n    margin-bottom: 0.75rem;\n  }\n\n  p {\n    font-family: \"Montserrat\", sans-serif;\n    font-style: italic;\n    font-weight: 200;\n    font-size: 0.8rem;\n    text-align: start;\n  }\n\n  a {\n    font-family: \"Montserrat\", sans-serif;\n    font-style: italic;\n    font-weight: 200;\n    font-size: 0.8rem;\n  }\n\n  h6 {\n    text-align: start;\n    margin-left: 10px;\n  }\n\n  & > div {\n    margin-bottom: 10px;,\n  }\n\n  button {\n    ${opacityEffect}\n    color: var(--black);\n    font-weight: 600;\n    border: none;\n    border-radius: 8px;\n    width: 60%;\n    margin-top: 10px;\n    margin-bottom: 10px;\n  }\n`;\n\nexport const Title = styled.h2`\n  font-size: 1.25rem;\n  font-weight: 700;\n  line-height: 24px;\n  letter-spacing: 0em;\n`;\n\nexport const Text = styled.p`\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 23px;\n  letter-spacing: 0em;\n  margin-top: 10px;\n`;\n","import { createGlobalStyle } from \"styled-components\";\nimport React, { useEffect } from \"react\";\n\nexport const GlobalStyles = createGlobalStyle`\n  :root {\n    --red: #e52e4d;\n    --white: #FFF;\n    --black: #2F2F2F;\n    --black-2:#1E1E1E;\n    --alphaBlack: #000000;\n    --black-2:#1E1E1E;\n    --black-3:#353535;\n\n    --yellow-400:#FFD789;\n    --yellow-500: #F6C76B;\n    --gray-40:#F0F0F0;\n    --gray-45:#767676;\n    --gray-50: #686A69;\n    --gray-60: #8F8F8F;\n    --gray-100: #B6B6B6;\n    --gray-150: #B9B9B9;\n    --gray-200: #D2D2D2;\n    --gray-300: #EBEBEB;\n    --gray-400: #ECECEC;\n    --gray-500: #F4F4F4;\n    --gray-550:#6F6F6F;\n    --gray-600:#686868;\n    --gray-700: #535353;\n    --gray-800:#9D9D9D;\n    --shadow-500: 0px 4px 8px rgba(91, 91, 91, 0.2);\n    --green:#57C06E;\n    --green-2:#2DCE68;\n    --blue:#007BFF;\n  }\n\n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n\n  html {\n    scroll-behavior: smooth;\n\n    @media (max-width: 1080px) {\n      font-size: 93.75%;\n    }\n    @media (max-width: 720px) {\n      font-size: 87.5%;\n    }\n  }\n\n  body {\n    background: var(--white);\n    -webkit-font-smoothing: antialiased;\n  }\n\n  body, input, textarea, select, button {\n    font-family: \"Montserrat\", sans-serif;\n    font-weight: 400;\n  } \n\n  h1, h2, h3, h4, h5, h6, strong {\n    font-weight: 600;\n  }\n\n  button {\n    cursor: pointer;\n  }\n\n  [disabled] {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n\n  .hidden {\n    overflow: hidden;\n  }\n\n  ::-webkit-scrollbar {\n    -webkit-appearance: none;\n    background: var(--gray-500);\n    width: 6px;\n    height: 10px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: var(--gray-50);\n  }\n\n  .aligncenter {\n    text-align: center;\n  }\n\n  .width-190px {\n    width:190px;\n  }\n\n  .hidden-content {\n    display:none !important;\n  }\n\n  .global-margin-bottom {\n    margin-bottom:20px;\n  }\n\n  .background-light-gray {\n    background:#F4F4F4;\n  }\n\n  .full-width-and-height {\n    height:100%;\n    width:100%;\n  }\n\n  .flex-direction-column {\n    flex-direction:column;\n  }\n\n  .bold {\n    font-weight:700;\n  }\n\n  .margin-center-x {\n    margin:0 auto;\n  }\n\n  .border-none {\n    border:none;\n  }\n\n  .text-center {\n    text-align:center;\n  }\n\n  .relative {\n    position:relative;\n  }\n\n  /* accessibility */\n  body ._access-menu p._text-center{\n    font-family: \"Montserrat\", sans-serif;\n    font-style: italic;\n    font-size: 1.2rem!important;\n    margin-top: 6px;\n    margin-bottom: 3px;\n  } \n\n`;\n\nconst FontLoader: React.FC = () => {\n  useEffect(() => {\n    const link = document.createElement(\"link\");\n    link.href =\n      \"https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap\";\n    link.rel = \"stylesheet\";\n    document.head.appendChild(link);\n  }, []);\n\n  return null;\n};\n\nexport default FontLoader;\n","import React, { useEffect, useState, useCallback } from 'react';\nimport { AlertContainer, DismissButton } from './styles';\nimport { AlertType } from './styles';\n\nimport { HiX } from 'react-icons/hi';\n\ninterface AlertProps {\n  type?: AlertType;\n  children: React.ReactNode;\n  className?: string;\n  dismissible?: boolean;\n  onDismiss?: () => void;\n  autoDismiss?: number;\n}\n\nexport const Alert = ({\n  type = 'info',\n  children,\n  className,\n  dismissible = false,\n  onDismiss,\n  autoDismiss\n}: AlertProps) => {\n  const [isClosing, setIsClosing] = useState(false);\n\n  const handleDismiss = useCallback(() => {\n    setIsClosing(true);\n    setTimeout(() => onDismiss?.(), 300);\n  }, [onDismiss]);\n\n  useEffect(() => {\n    if (autoDismiss) {\n      const timer = setTimeout(handleDismiss, autoDismiss);\n      return () => clearTimeout(timer);\n    }\n  }, [autoDismiss, handleDismiss]);\n\n  return (\n    <AlertContainer\n      $type={type}\n      $dismissible={dismissible}\n      $isClosing={isClosing}\n      className={className}\n      role=\"alert\"\n    >\n      {children}\n      {dismissible && (\n        <DismissButton \n          onClick={handleDismiss} \n          aria-label=\"Dismiss alert\"\n        >\n          <HiX /> \n        </DismissButton>\n      )}\n    </AlertContainer>\n  );\n};","import styled, { css, keyframes } from \"styled-components\";\n\nexport type AlertType = \"error\" | \"warning\" | \"info\" | \"success\";\n\nconst fadeIn = keyframes`\n  from { opacity: 0; transform: translateY(-10px); }\n  to { opacity: 1; transform: translateY(0); }\n`;\n\nconst fadeOut = keyframes`\n  from { opacity: 1; transform: translateY(0); }\n  to { opacity: 0; transform: translateY(-10px); }\n`;\n\ninterface AlertContainerProps {\n  $type: AlertType;\n  $dismissible?: boolean;\n  $isClosing: boolean;\n}\n\nconst typeStyles = {\n  error: css`\n    background-color: var(--red);\n    border: 1px solid var(--red);\n    color: var(--white);\n    svg {\n      color: var(--white);\n    }\n  `,\n  warning: css`\n    background-color: var(--yellow-500);\n    border: 1px solid var(--yellow-400);\n    color: var(--black);\n    svg {\n      color: var(--black);\n    }\n  `,\n  info: css`\n    background-color: var(--blue);\n    border: 1px solid var(--blue);\n    color: var(--white);\n    svg {\n      color: var(--white);\n    }\n  `,\n  success: css`\n    background-color: var(--green);\n    border: 1px solid var(--green-2);\n    color: var(--white);\n    svg {\n      color: var(--white);\n    }\n  `,\n};\n\nexport const AlertContainer = styled.div<AlertContainerProps>`\n  position: fixed;\n  width: 500px;\n  top: 15px;\n  right: 15px;\n  padding: 1rem ${({ $dismissible }) => ($dismissible ? \"2.5rem\" : \"1rem\")} 1rem\n    1rem;\n  margin-bottom: 1rem;\n  animation: ${({ $isClosing }) => ($isClosing ? fadeOut : fadeIn)} 0.3s\n    ease-out;\n  animation-fill-mode: forwards;\n  align-items: center;\n  gap: 0.5rem;\n  box-shadow: var(--shadow-500);\n  border-radius: 0.5rem;\n  font-size: 1rem;\n  font-weight: 500;\n\n  ${({ $type }) => typeStyles[$type]}\n`;\n\nexport const DismissButton = styled.button`\n  position: absolute;\n  background: transparent;\n  right: 10px;\n  border: none;\n  cursor: pointer;\n  color: inherit;\n  opacity: 1;\n  transition: opacity 0.2s;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  svg {\n    width: 1rem;\n    height: 1rem;\n  }\n`;\n","import MitreFormComponent from \"./components/Form\";\n\nexport default MitreFormComponent;\n//export type { MitreFormComponentProps } from \"./components/Form\";\n"],"mappings":";AAAA,OAAOA,UAAS,YAAAC,iBAAgB;;;ACAhC,SAAS,gBAAgB;AAElB,SAAS,WAAW;AACzB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAuB,IAAI;AAErD,QAAM,cAAc,CAAC,QAAiB;AACpC,UAAM,WAAW,eAAe,QAAQ,MAAM,IAAI,MAAM,OAAO,GAAG,CAAC;AACnE,aAAS,QAAQ;AACjB,YAAQ,MAAM,QAAQ;AAAA,EACxB;AAEA,QAAM,aAAa,MAAM,SAAS,IAAI;AAEtC,SAAO,EAAE,OAAO,aAAa,WAAW;AAC1C;;;ADZA,SAAS,eAA8B;AACvC,SAAS,mBAAmB;AAC5B,YAAY,SAAS;;;AECd,SAAS,KACd,YAA2B,OAC3B,YACA,gBACA;AACA,SAAO;AAAA,kBACS,cAAc,IAAI;AAAA;AAAA,qBAEf,SAAS;AAAA,sBACR,kBAAkB,IAAI;AAAA;AAE5C;AAwBO,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACvC7B,OAAO,YAAY;AAEZ,IAAM,gBAAgB,OAAO;AAAA,IAChC,KAAK,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBX,IAAM,kBAAkB,OAAO;AAAA;AAAA;AAI/B,IAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS/B,IAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAmCrB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWZ,IAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrB,IAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACxF3B,SAAS,yBAAyB;AAClC,SAAgB,iBAAiB;AAE1B,IAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmJ5B,IAAM,aAAuB,MAAM;AACjC,YAAU,MAAM;AACd,UAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,SAAK,OACH;AACF,SAAK,MAAM;AACX,aAAS,KAAK,YAAY,IAAI;AAAA,EAChC,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;AAEA,IAAO,iBAAQ;;;AClKf,SAAgB,aAAAC,YAAW,YAAAC,WAAU,mBAAmB;;;ACAxD,OAAOC,WAAU,KAAK,iBAAiB;AAIvC,IAAM,SAAS;AAAA;AAAA;AAAA;AAKf,IAAM,UAAU;AAAA;AAAA;AAAA;AAWhB,IAAM,aAAa;AAAA,EACjB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQP,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQT,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQN,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQX;AAEO,IAAM,iBAAiBA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKnB,CAAC,EAAE,aAAa,MAAO,eAAe,WAAW,MAAO;AAAA;AAAA;AAAA,eAG3D,CAAC,EAAE,WAAW,MAAO,aAAa,UAAU,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAU9D,CAAC,EAAE,MAAM,MAAM,WAAW,KAAK,CAAC;AAAA;AAG7B,IAAM,gBAAgBA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ADxEpC,SAAS,WAAW;AAkChB,SAaM,KAbN;AAvBG,IAAM,QAAQ,CAAC;AAAA,EACpB,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AACF,MAAkB;AAChB,QAAM,CAAC,WAAW,YAAY,IAAIC,UAAS,KAAK;AAEhD,QAAM,gBAAgB,YAAY,MAAM;AACtC,iBAAa,IAAI;AACjB,eAAW,MAAM,YAAY,GAAG,GAAG;AAAA,EACrC,GAAG,CAAC,SAAS,CAAC;AAEd,EAAAC,WAAU,MAAM;AACd,QAAI,aAAa;AACf,YAAM,QAAQ,WAAW,eAAe,WAAW;AACnD,aAAO,MAAM,aAAa,KAAK;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,aAAa,aAAa,CAAC;AAE/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,cAAc;AAAA,MACd,YAAY;AAAA,MACZ;AAAA,MACA,MAAK;AAAA,MAEJ;AAAA;AAAA,QACA,eACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,cAAW;AAAA,YAEX,8BAAC,OAAI;AAAA;AAAA,QACP;AAAA;AAAA;AAAA,EAEJ;AAEJ;;;AL2DM,mBACE,OAAAC,MA0BE,QAAAC,aA3BJ;AAlFN,IAAM,SAAa,WAAO,EAAE,MAAM;AAAA,EAChC,MAAU,WAAO,EAAE,SAAS,0BAAoB;AAAA,EAChD,OAAW,WAAO,EAAE,SAAS,2BAAqB,EAAE,MAAM,mBAAgB;AAAA,EAC1E,OAAW,WAAO,EAAE,SAAS,8BAAwB,EACpD;AAAA,IACC;AAAA,IACA;AAAA,IACA,CAAC,UAAU;AACT,YAAM,aAAa,OAAO,QAAQ,OAAO,EAAE,KAAK;AAEhD,aAAO,WAAW,UAAU;AAAA,IAC9B;AAAA,EAAC;AACL,CAAC;AAED,IAAM,qBAAqBC,OAAM,WAAoD,CAAC;AAAA,EACpF;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAc;AAAA,EACd,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,eAAe;AACjB,GAAG,QAAQ;AACT,QAAM,CAAC,SAAS,YAAY,IAAIC,UAAS,KAAK;AAC9C,QAAM,EAAE,OAAO,aAAa,WAAW,IAAI,SAAS;AACpD,QAAM,CAAC,gBAAgB,iBAAiB,IAAIA,UAAS,EAAE;AAEvD,QAAM,EAAE,UAAU,cAAc,WAAW,EAAE,OAAO,GAAG,OAAO,MAAM,IAAI,QAAQ;AAAA,IAC9E,UAAU,YAAY,MAAM;AAAA,EAC9B,CAAC;AAED,QAAM,aAAa,MAAM,OAAO;AAEhC,QAAM,cAA8E,OAAO,SAAS;AAClG,UAAM,EAAE,MAAM,OAAO,MAAM,IAAI;AAC/B,UAAM,UAAU;AAEhB,QAAI;AACF,mBAAa,IAAI;AAEjB,UAAI,CAAC,aAAa,CAAC,cAAc,CAAC,cAAc,CAAC,gBAAgB,CAAC,YAAY,CAAC,UAAU;AACvF,cAAM,IAAI,MAAM,iDAAwC;AAAA,MAC1D;AAEA,YAAM,WAAW,MAAM,MAAM,GAAG,MAAM,UAAU;AAAA,QAC9C,QAAQ;AAAA,QACR,SAAS;AAAA,UACP,gBAAgB;AAAA,UAChB,eAAe,SAAS,QAAQ;AAAA,QAClC;AAAA,QACA,MAAM,KAAK,UAAU;AAAA,UACnB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH,CAAC;AAED,UAAI,CAAC,SAAS,IAAI;AAChB,cAAM,IAAI,MAAM,6BAA6B;AAAA,MAC/C;AAEA,wBAAkB,+BAA+B;AACjD,YAAM;AAAA,IACR,SAAS,KAAK;AACZ,kBAAY,GAAG;AAAA,IACjB,UAAE;AACA,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF;AAEA,SACI,gBAAAF,MAAA,YACE;AAAA,oBAAAD,KAAC,kBAAW;AAAA,IACZ,gBAAAA,KAAC,gBAAa;AAAA,IAEb,SACC,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,aAAW;AAAA,QACX,WAAW;AAAA,QACX,aAAa;AAAA,QAEZ,gBAAO;AAAA;AAAA,IACV;AAAA,IAGD,kBACC,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,aAAW;AAAA,QACX,WAAW,MAAM,kBAAkB,EAAE;AAAA,QACrC,aAAa;AAAA,QAEZ;AAAA;AAAA,IACH;AAAA,IAGF,gBAAAC,MAAC,iBAAc,KACb;AAAA,sBAAAA,MAAC,mBACC;AAAA,wBAAAD,KAAC,SAAO,sCAAwB;AAAA,QAEhC,gBAAAA,KAAC,QAAM,2DAA6C;AAAA,SACtD;AAAA,MAIE,gBAAAA,KAAC,QAAG,uDAAsC;AAAA,MAE1C,gBAAAA,KAAC,mBACD;AAAA,MAEA,gBAAAC,MAAC,OAAE;AAAA;AAAA,QAAqK;AAAA,QACxK,gBAAAD;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,QAAO;AAAA,YACP,KAAI;AAAA,YACL;AAAA;AAAA,QAED;AAAA,QAAI;AAAA,QAAgB;AAAA,QAAI;AAAA,QAAO;AAAA,QAAI;AAAA,SAAmI;AAAA,OAE1K;AAAA,KACJ;AAEJ,CAAC;AAED,mBAAmB,cAAc;AACjC,IAAO,eAAQ;;;AOxKf,IAAO,gBAAQ;","names":["React","useState","useEffect","useState","styled","useState","useEffect","jsx","jsxs","React","useState"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mitre-form-component",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "private": false,
   "description": "Componente de formulário de captação de leads para ser usado em projetos da Mitre Realty.",
   "type": "module",