npm - mitre-form-component - Versions diffs - 0.0.16 → 0.0.18 - Mend

mitre-form-component 0.0.16 → 0.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.cjs CHANGED Viewed

@@ -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_react5 = __toESM(require("react"), 1);
 // src/components/hooks/useError.ts
 var import_react = require("react");
@@ -325,8 +325,431 @@ var FontLoader = () => {
 };
 var global_default = FontLoader;
-// src/components/Form/index.tsx
+// src/components/Input/index.tsx
+var import_react3 = require("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
+var import_style = require("react-phone-input-2/lib/style.css");
+// src/components/Input/styles.ts
+var import_styled_components3 = __toESM(require("styled-components"), 1);
+var import_react_phone_input_2 = __toESM(require("react-phone-input-2"), 1);
+var FormLabel = import_styled_components3.default.label`
+  font-family: "Montserrat", sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1rem;
+  color: ${(props) => props.isInvalid ? "var(--red)" : props.$textColor || "var(--black)"};
+  display: block;
+  margin-bottom: 0.5rem;
+  text-align: left;
+`;
+var Input = import_styled_components3.default.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 = (0, import_styled_components3.default)(import_react_phone_input_2.default)`
+  .form-control {
+    background: white;
+    color: ${(props) => props.isInvalid ? "var(--red)" : props.$textColor || "var(--black)"};
+    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 = import_styled_components3.default.small`
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  color: var(--red);
+  margin-top: 0.25rem;
+  display: block;
+`;
+var FormControl = import_styled_components3.default.div.withConfig({
+  shouldForwardProp: (prop) => !["isInvalid", "$bordercolor"].includes(prop)
+})`
+  ${FormLabel} {
+    ${(props) => props.isInvalid && import_styled_components3.css`
+        color: var(--red);
+      `};
+  }
+  ${Input} {
+    ${(props) => props.isInvalid && import_styled_components3.css`
+        border: 1px solid var(--red);
+        &:not(:focus)::placeholder {
+          color: var(--red);
+          font-weight: 600;
+        }
+      `};
+    &:focus {
+      ${(props) => props.isInvalid && import_styled_components3.css`
+          border: 1px solid var(--red);
+        `};
+    }
+  }
+  ${FormPhoneInput} {
+    ${(props) => props.isInvalid && import_styled_components3.css`
+        border: 1px solid var(--red);
+        &:not(:focus)::placeholder {
+          color: var(--red);
+          font-weight: 600;
+        }
+      `};
+    &:focus {
+      ${(props) => props.isInvalid && import_styled_components3.css`
+          border: 1px solid var(--red);
+        `};
+    }
+  }
+`;
+// src/components/Input/index.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var InputBase = ({ id, label, error, showErrorMessage = true, borderColor, textColor, mask = "", type = "text", ...rest }, ref) => {
+  const phoneInputRef = (0, import_react3.useRef)(null);
+  const { onChange, name } = rest;
+  const handleKeyUp = (0, import_react3.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 = (0, import_react3.useCallback)((value) => {
+    onChange?.({ target: { value, name } });
+    if (phoneInputRef.current?.input) {
+      phoneInputRef.current.input.value = value;
+    }
+  }, [onChange, name]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FormControl, { isInvalid: !!error, children: [
+    !!label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormLabel, { htmlFor: id, $textColor: textColor, children: label }),
+    !mask ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Input,
+      {
+        id,
+        ref,
+        type,
+        $bordercolor: borderColor,
+        "aria-invalid": !!error && showErrorMessage ? "true" : "false",
+        autoComplete: rest.autoComplete || "on",
+        ...rest
+      }
+    ) : mask === "phone" ? /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
+      Input,
+      {
+        id,
+        ref,
+        type,
+        $bordercolor: borderColor,
+        "aria-invalid": !!error && showErrorMessage ? "true" : "false",
+        onKeyUp: handleKeyUp,
+        autoComplete: rest.autoComplete || "on",
+        ...rest
+      }
+    ),
+    !!error && showErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormErrorMessage, { "data-testid": "error-message", children: typeof error === "string" ? error : error.message })
+  ] });
+};
+var Input2 = (0, import_react3.forwardRef)(InputBase);
+// src/components/Alert/index.tsx
+var import_react4 = require("react");
+// src/components/Alert/styles.ts
+var import_styled_components4 = __toESM(require("styled-components"), 1);
+var fadeIn = import_styled_components4.keyframes`
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+`;
+var fadeOut = import_styled_components4.keyframes`
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(-10px); }
+`;
+var typeStyles = {
+  error: import_styled_components4.css`
+    background-color: var(--red);
+    border: 1px solid var(--red);
+    color: var(--white);
+    svg {
+      color: var(--white);
+    }
+  `,
+  warning: import_styled_components4.css`
+    background-color: var(--yellow-500);
+    border: 1px solid var(--yellow-400);
+    color: var(--black);
+    svg {
+      color: var(--black);
+    }
+  `,
+  info: import_styled_components4.css`
+    background-color: var(--blue);
+    border: 1px solid var(--blue);
+    color: var(--white);
+    svg {
+      color: var(--white);
+    }
+  `,
+  success: import_styled_components4.css`
+    background-color: var(--green);
+    border: 1px solid var(--green-2);
+    color: var(--white);
+    svg {
+      color: var(--white);
+    }
+  `
+};
+var AlertContainer = import_styled_components4.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_components4.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_runtime2 = require("react/jsx-runtime");
+var Alert = ({
+  type = "info",
+  children,
+  className,
+  dismissible = false,
+  onDismiss,
+  autoDismiss
+}) => {
+  const [isClosing, setIsClosing] = (0, import_react4.useState)(false);
+  const handleDismiss = (0, import_react4.useCallback)(() => {
+    setIsClosing(true);
+    setTimeout(() => onDismiss?.(), 300);
+  }, [onDismiss]);
+  (0, import_react4.useEffect)(() => {
+    if (autoDismiss) {
+      const timer = setTimeout(handleDismiss, autoDismiss);
+      return () => clearTimeout(timer);
+    }
+  }, [autoDismiss, handleDismiss]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    AlertContainer,
+    {
+      $type: type,
+      $dismissible: dismissible,
+      $isClosing: isClosing,
+      className,
+      role: "alert",
+      children: [
+        children,
+        dismissible && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          DismissButton,
+          {
+            onClick: handleDismiss,
+            "aria-label": "Dismiss alert",
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_hi.HiX, {})
+          }
+        )
+      ]
+    }
+  );
+};
+// src/components/Form/index.tsx
+var import_jsx_runtime3 = 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 +762,7 @@ var schema = yup.object().shape({
     }
   )
 });
-var MitreFormComponent = import_react3.default.forwardRef(({
+var MitreFormComponent = import_react5.default.forwardRef(({
   productId,
   apiUrl,
   apiToken,
@@ -353,9 +776,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_react5.useState)(false);
   const { error, handleError, clearError } = useError();
-  const [successMessage, setSuccessMessage] = (0, import_react3.useState)("");
+  const [successMessage, setSuccessMessage] = (0, import_react5.useState)("");
   const { register, handleSubmit, formState: { errors }, reset, watch } = (0, import_react_hook_form.useForm)({
     resolver: (0, import_yup.yupResolver)(schema)
   });
@@ -397,20 +820,55 @@ 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_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(global_default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GlobalStyles, {}),
+    error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      Alert,
+      {
+        type: "error",
+        dismissible: true,
+        onDismiss: clearError,
+        autoDismiss: 5e3,
+        children: error.message
+      }
+    ),
+    successMessage && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      Alert,
+      {
+        type: "success",
+        dismissible: true,
+        onDismiss: () => setSuccessMessage(""),
+        autoDismiss: 5e3,
+        children: successMessage
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(FormContainer, { ref, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(HeaderContainer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Title, { children: "Atendimento por mensagem" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)(
+        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__ */ (0, import_jsx_runtime3.jsx)("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonContainer, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)(
           "a",
           {
             href: "https://www.mitrerealty.com.br/politica-de-privacidade",

package/dist/index.cjs.map CHANGED Viewed

	@@ -1 +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"]}
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","../src/components/Input/index.tsx","../src/components/Input/masks.ts","../src/components/Input/styles.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 { Input } from \"../Input\";\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 <Input\n id=\"email\"\n label=\"Email \"\n type=\"email\"\n placeholder=\"exemplo@email.com\"\n {...register(\"email\")}\n borderColor={colorPrimary}\n textColor={textColor}\n error={errors.email?.message}\n autoComplete=\"email\"\n required\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 {\n FormEvent,\n forwardRef,\n ForwardRefRenderFunction,\n InputHTMLAttributes,\n useCallback,\n useRef,\n} from \"react\";\nimport { FieldError } from \"react-hook-form\";\nimport { cep, cpf, currency, date } from \"./masks\";\n\nimport 'react-phone-input-2/lib/style.css'\n\nimport {\n FormControl,\n FormErrorMessage,\n FormLabel,\n Input as FormInput,\n FormPhoneInput\n} from \"./styles\";\n\ntype InputType =\n \| \"text\"\n \| \"email\"\n \| \"password\"\n \| \"number\"\n \| \"tel\"\n \| \"url\"\n \| \"date\"\n \| \"time\"\n \| \"datetime-local\";\n\ninterface InputProps extends InputHTMLAttributes<HTMLInputElement> {\n id: string;\n label?: string;\n error?: string \| FieldError;\n showErrorMessage?: boolean;\n borderColor: string;\n textColor?: string;\n\n mask?: \"cep\" \| \"currency\" \| \"cpf\" \| \"phone\" \| \"date\";\n type?: InputType;\n}\n\nconst InputBase: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (\n { id, label, error, showErrorMessage = true, borderColor, textColor, mask = \"\", type = \"text\", ...rest },\n ref\n) => {\n const phoneInputRef = useRef<{ input: HTMLInputElement }>(null);\n const { onChange, name } = rest;\n\n const handleKeyUp = useCallback(\n (e: FormEvent<HTMLInputElement>) => {\n if (mask === \"cep\") cep(e);\n if (mask === \"currency\") currency(e);\n if (mask === \"cpf\") cpf(e);\n if (mask === \"date\") date(e);\n },\n [mask]\n );\n\n const handlePhoneChange = useCallback((value: string) => {\n onChange?.({ target: { value, name } } as React.ChangeEvent<HTMLInputElement>);\n\n if (phoneInputRef.current?.input) {\n phoneInputRef.current.input.value = value;\n }\n }, [onChange, name]);\n\n return (\n <FormControl isInvalid={!!error}>\n {!!label && <FormLabel htmlFor={id} $textColor={textColor}>{label}</FormLabel>}\n\n {!mask ? (\n <FormInput\n id={id}\n ref={ref}\n type={type} \n $bordercolor={borderColor}\n aria-invalid={!!error && showErrorMessage ? \"true\" : \"false\"}\n autoComplete={rest.autoComplete \|\| \"on\"}\n {...rest}\n />\n ) : mask === 'phone' ? (\n <FormPhoneInput\n country={\"br\"}\n $bordercolor={borderColor}\n placeholder={rest.placeholder}\n aria-invalid={!!error && showErrorMessage ? \"true\" : \"false\"}\n isInvalid={!!error}\n onChange={handlePhoneChange}\n masks={{\n br: \"(..) .....-....\",}}\n inputProps={{\n id,\n name: 'phone',\n required: true,\n autoFocus: true,\n autoComplete: \"tel\",\n ref: phoneInputRef,\n }}\n //TODO no futuro enviar com o ddi, só retirar o disableCountryCode e disableCountryGuess\n dropdownStyle={{\n color: textColor,\n }}\n disableCountryGuess={true}\n disableCountryCode={true}\n value={rest.value as string} \n />\n ) : (\n <FormInput\n id={id}\n ref={ref}\n type={type} \n $bordercolor={borderColor}\n aria-invalid={!!error && showErrorMessage ? \"true\" : \"false\"}\n onKeyUp={handleKeyUp}\n autoComplete={rest.autoComplete \|\| \"on\"}\n {...rest}\n />\n )}\n\n {!!error && showErrorMessage && (\n <FormErrorMessage data-testid=\"error-message\">\n {typeof error === 'string' ? error : error.message}\n </FormErrorMessage>\n )}\n </FormControl>\n );\n};\n\nexport const Input = forwardRef(InputBase);\n","import { FormEvent } from \"react\";\n\nexport function cep(e: FormEvent<HTMLInputElement>) {\n e.currentTarget.maxLength = 9;\n let value = e.currentTarget.value;\n value = value.replace(/\\D/g, \"\");\n value = value.replace(/^(\\d{5})(\\d)/, \"$1-$2\");\n e.currentTarget.value = value;\n return e;\n}\n\nexport function currency(e: FormEvent<HTMLInputElement>) {\n let value = e.currentTarget.value;\n value = value.replace(/\\D/g, \"\");\n value = value.replace(/(\\d)(\\d{2})$/, \"$1,$2\");\n value = value.replace(/(?=(\\d{3})+(\\D))\\B/g, \".\");\n\n e.currentTarget.value = value;\n return e;\n}\n\nexport function cpf(e: FormEvent<HTMLInputElement>) {\n e.currentTarget.maxLength = 14;\n let value = e.currentTarget.value;\n if (!value.match(/^(\\d{3}).(\\d{3}).(\\d{3})-(\\d{2})$/)) {\n value = value.replace(/\\D/g, \"\");\n value = value.replace(/(\\d{3})(\\d)/, \"$1.$2\");\n value = value.replace(/(\\d{3})(\\d)/, \"$1.$2\");\n value = value.replace(/(\\d{3})(\\d{2})$/, \"$1-$2\");\n\n e.currentTarget.value = value;\n }\n return e;\n}\n\nexport function date(e: FormEvent<HTMLInputElement>) {\n let value = e.currentTarget.value;\n value = value.replace(/\\D/g, \"\");\n value = value.replace(/(\\d{2})(\\d)/, \"$1/$2\");\n value = value.replace(/(\\d{2})(\\d)/, \"$1/$2\");\n e.currentTarget.value = value;\n return e;\n}\n\nexport function phone(e: FormEvent<HTMLInputElement>) {\n let value = e.currentTarget.value;\n value = value.replace(/\\D/g, \"\");\n value = value.replace(/(\\d{2})(\\d)/, \"$1/$2\");\n value = value.replace(/(\\d{2})(\\d)/, \"$1/$2\");\n e.currentTarget.value = value;\n return e;\n}\n","import styled, { css } from \"styled-components\";\nimport { InputHTMLAttributes } from \"react\";\n\nimport PhoneInput from \"react-phone-input-2\";\n\ntype InputProps = {\n isInvalid?: boolean;\n bordercolor?: string;\n};\n\nexport const FormLabel = styled.label<InputProps & { $textColor?: string }>`\n font-family: \"Montserrat\", sans-serif;\n font-style: normal;\n font-weight: 500;\n font-size: 1rem;\n color: ${(props) =>\n props.isInvalid ? \"var(--red)\" : props.$textColor \|\| \"var(--black)\"};\n display: block;\n margin-bottom: 0.5rem;\n text-align: left;\n`;\n\nexport const Input = styled.input<\n InputHTMLAttributes<HTMLInputElement> & { $bordercolor?: string }\n>`\n font-family: \"Montserrat\", sans-serif;\n font-style: normal;\n font-weight: 500;\n font-size: 1rem;\n line-height: 1.5rem;\n background: var(--gray-500);\n color: var(--black);\n padding: 0.5rem;\n border-radius: 0.125rem;\n border: 1px solid transparent;\n display: block;\n height: 3.125rem;\n width: 100%;\n\n &:focus {\n border-radius: 0.125rem;\n border: 2px solid ${(props) => props.$bordercolor \|\| \"var(--yellow-500)\"};\n outline: none;\n }\n\n &::placeholder {\n font-size: 1rem;\n line-height: 1.5rem;\n color: #b6b6b6;\n font-weight: 800;\n }\n\n / Autofill styles /\n &:-webkit-autofill {\n background: var(--gray-500) !important;\n color: var(--black) !important;\n -webkit-text-fill-color: var(--black) !important;\n transition: background-color 5000s ease-in-out 0s; / Prevent flashing /\n }\n\n &:-webkit-autofill::first-line {\n font-family: \"Montserrat\", sans-serif;\n font-size: 1rem;\n font-weight: 500;\n }\n`;\n\nexport const FormPhoneInput = styled(PhoneInput)<\n InputProps & { $bordercolor?: string; $textColor?: string }\n>`\n .form-control {\n background: white;\n color: ${(props) =>\n props.isInvalid ? \"var(--red)\" : props.$textColor \|\| \"var(--black)\"};\n padding: 0.5rem;\n border-radius: 0.125rem;\n border: 1px solid transparent;\n height: 3.125rem;\n width: 100%;\n padding-left: 4rem;\n font-family: \"Montserrat\", sans-serif;\n font-style: normal;\n font-weight: 500;\n font-size: 1rem;\n line-height: 1.5rem;\n text &:focus,\n &:focus-within {\n border-radius: 0.125rem;\n border: 2px solid\n ${(props) =>\n !props.isValid\n ? \"var(--red)\"\n : props.$bordercolor \|\| \"var(--yellow-500)\"};\n }\n\n &::placeholder {\n font-size: 1rem;\n line-height: 1.5rem;\n color: #b6b6b6;\n font-weight: 800;\n }\n\n / Autofill styles /\n &:-webkit-autofill {\n background: var(--gray-500) !important;\n color: var(--black) !important;\n -webkit-text-fill-color: var(--black) !important;\n transition: background-color 5000s ease-in-out 0s; / Prevent flashing */\n }\n\n &:-webkit-autofill::first-line {\n font-family: \"Montserrat\", sans-serif;\n font-size: 1rem;\n font-weight: 500;\n }\n }\n\n &:focus-within {\n .form-control {\n border: 2px solid\n ${(props) =>\n props.isInvalid\n ? \"var(--red)\"\n : props.$bordercolor \|\| \"var(--yellow-500)\"};\n }\n }\n\n .flag-dropdown {\n background: white;\n border: none;\n padding: 0.5rem;\n margin: 0.25rem;\n cursor: pointer;\n\n &:focus-within {\n outline: none;\n }\n }\n`;\n\nexport const FormErrorMessage = styled.small`\n font-size: 0.75rem;\n line-height: 1.125rem;\n color: var(--red);\n margin-top: 0.25rem;\n display: block;\n`;\n\nexport const FormControl = styled.div.withConfig({\n shouldForwardProp: (prop) => ![\"isInvalid\", \"$bordercolor\"].includes(prop),\n})<{ isInvalid?: boolean; $bordercolor?: string }>`\n ${FormLabel} {\n ${(props) =>\n props.isInvalid &&\n css`\n color: var(--red);\n `};\n }\n\n ${Input} {\n ${(props) =>\n props.isInvalid &&\n css`\n border: 1px solid var(--red);\n\n &:not(:focus)::placeholder {\n color: var(--red);\n font-weight: 600;\n }\n `};\n\n &:focus {\n ${(props) =>\n props.isInvalid &&\n css`\n border: 1px solid var(--red);\n `};\n }\n }\n\n ${FormPhoneInput} {\n ${(props) =>\n props.isInvalid &&\n css`\n border: 1px solid var(--red);\n\n &:not(:focus)::placeholder {\n color: var(--red);\n font-weight: 600;\n }\n `};\n\n &:focus {\n ${(props) =>\n props.isInvalid &&\n css`\n border: 1px solid var(--red);\n `};\n }\n }\n`;\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","PhoneInput","Input","import_react","import_styled_components","styled","import_jsx_runtime","import_jsx_runtime","React","Input"]}

package/dist/index.js CHANGED Viewed

@@ -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,435 @@ var FontLoader = () => {
 };
 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/Alert/index.tsx
+import { useEffect as useEffect2, useState as useState2, useCallback as useCallback2 } from "react";
+// src/components/Alert/styles.ts
+import styled3, { css as css2, 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: css2`
+    background-color: var(--red);
+    border: 1px solid var(--red);
+    color: var(--white);
+    svg {
+      color: var(--white);
+    }
+  `,
+  warning: css2`
+    background-color: var(--yellow-500);
+    border: 1px solid var(--yellow-400);
+    color: var(--black);
+    svg {
+      color: var(--black);
+    }
+  `,
+  info: css2`
+    background-color: var(--blue);
+    border: 1px solid var(--blue);
+    color: var(--white);
+    svg {
+      color: var(--white);
+    }
+  `,
+  success: css2`
+    background-color: var(--green);
+    border: 1px solid var(--green-2);
+    color: var(--white);
+    svg {
+      color: var(--white);
+    }
+  `
+};
+var AlertContainer = styled3.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 = styled3.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 jsx2, jsxs as jsxs2 } 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__ */ jsxs2(
+    AlertContainer,
+    {
+      $type: type,
+      $dismissible: dismissible,
+      $isClosing: isClosing,
+      className,
+      role: "alert",
+      children: [
+        children,
+        dismissible && /* @__PURE__ */ jsx2(
+          DismissButton,
+          {
+            onClick: handleDismiss,
+            "aria-label": "Dismiss alert",
+            children: /* @__PURE__ */ jsx2(HiX, {})
+          }
+        )
+      ]
+    }
+  );
+};
 // src/components/Form/index.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } 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 +730,7 @@ var schema = yup.object().shape({
     }
   )
 });
-var MitreFormComponent = React2.forwardRef(({
+var MitreFormComponent = React3.forwardRef(({
   productId,
   apiUrl,
   apiToken,
@@ -317,9 +744,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 +788,55 @@ 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__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3(global_default, {}),
+    /* @__PURE__ */ jsx3(GlobalStyles, {}),
+    error && /* @__PURE__ */ jsx3(
+      Alert,
+      {
+        type: "error",
+        dismissible: true,
+        onDismiss: clearError,
+        autoDismiss: 5e3,
+        children: error.message
+      }
+    ),
+    successMessage && /* @__PURE__ */ jsx3(
+      Alert,
+      {
+        type: "success",
+        dismissible: true,
+        onDismiss: () => setSuccessMessage(""),
+        autoDismiss: 5e3,
+        children: successMessage
+      }
+    ),
+    /* @__PURE__ */ jsxs3(FormContainer, { ref, children: [
+      /* @__PURE__ */ jsxs3(HeaderContainer, { children: [
+        /* @__PURE__ */ jsx3(Title, { children: "Atendimento por mensagem" }),
+        /* @__PURE__ */ jsx3(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__ */ jsx3(
+        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__ */ jsx3("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
+      /* @__PURE__ */ jsx3(ButtonContainer, {}),
+      /* @__PURE__ */ jsxs3("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__ */ jsx3(
           "a",
           {
             href: "https://www.mitrerealty.com.br/politica-de-privacidade",

package/dist/index.js.map CHANGED Viewed

	@@ -1 +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":";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;;;AJjDX,mBACE,KAGE,YAJJ;AAlFJ,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,SACE,iCACE;AAAA,wBAAC,kBAAW;AAAA,IACZ,oBAAC,gBAAa;AAAA,IACd,qBAAC,iBAAc,KACb;AAAA,2BAAC,mBACC;AAAA,4BAAC,SAAO,sCAAwB;AAAA,QAEhC,oBAAC,QAAM,2DAA6C;AAAA,SACtD;AAAA,MAIE,oBAAC,QAAG,uDAAsC;AAAA,MAE1C,oBAAC,mBACD;AAAA,MAEA,qBAAC,OAAE;AAAA;AAAA,QAAqK;AAAA,QACxK;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,KACF;AAEJ,CAAC;AAED,mBAAmB,cAAc;AACjC,IAAO,eAAQ;;;AK/If,IAAO,gBAAQ;","names":["React","useState","React","useState"]}
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/components/Input/index.tsx","../src/components/Input/masks.ts","../src/components/Input/styles.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 { Input } from \"../Input\";\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 <Input\n id=\"email\"\n label=\"Email \"\n type=\"email\"\n placeholder=\"exemplo@email.com\"\n {...register(\"email\")}\n borderColor={colorPrimary}\n textColor={textColor}\n error={errors.email?.message}\n autoComplete=\"email\"\n required\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 {\n FormEvent,\n forwardRef,\n ForwardRefRenderFunction,\n InputHTMLAttributes,\n useCallback,\n useRef,\n} from \"react\";\nimport { FieldError } from \"react-hook-form\";\nimport { cep, cpf, currency, date } from \"./masks\";\n\nimport 'react-phone-input-2/lib/style.css'\n\nimport {\n FormControl,\n FormErrorMessage,\n FormLabel,\n Input as FormInput,\n FormPhoneInput\n} from \"./styles\";\n\ntype InputType =\n \| \"text\"\n \| \"email\"\n \| \"password\"\n \| \"number\"\n \| \"tel\"\n \| \"url\"\n \| \"date\"\n \| \"time\"\n \| \"datetime-local\";\n\ninterface InputProps extends InputHTMLAttributes<HTMLInputElement> {\n id: string;\n label?: string;\n error?: string \| FieldError;\n showErrorMessage?: boolean;\n borderColor: string;\n textColor?: string;\n\n mask?: \"cep\" \| \"currency\" \| \"cpf\" \| \"phone\" \| \"date\";\n type?: InputType;\n}\n\nconst InputBase: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (\n { id, label, error, showErrorMessage = true, borderColor, textColor, mask = \"\", type = \"text\", ...rest },\n ref\n) => {\n const phoneInputRef = useRef<{ input: HTMLInputElement }>(null);\n const { onChange, name } = rest;\n\n const handleKeyUp = useCallback(\n (e: FormEvent<HTMLInputElement>) => {\n if (mask === \"cep\") cep(e);\n if (mask === \"currency\") currency(e);\n if (mask === \"cpf\") cpf(e);\n if (mask === \"date\") date(e);\n },\n [mask]\n );\n\n const handlePhoneChange = useCallback((value: string) => {\n onChange?.({ target: { value, name } } as React.ChangeEvent<HTMLInputElement>);\n\n if (phoneInputRef.current?.input) {\n phoneInputRef.current.input.value = value;\n }\n }, [onChange, name]);\n\n return (\n <FormControl isInvalid={!!error}>\n {!!label && <FormLabel htmlFor={id} $textColor={textColor}>{label}</FormLabel>}\n\n {!mask ? (\n <FormInput\n id={id}\n ref={ref}\n type={type} \n $bordercolor={borderColor}\n aria-invalid={!!error && showErrorMessage ? \"true\" : \"false\"}\n autoComplete={rest.autoComplete \|\| \"on\"}\n {...rest}\n />\n ) : mask === 'phone' ? (\n <FormPhoneInput\n country={\"br\"}\n $bordercolor={borderColor}\n placeholder={rest.placeholder}\n aria-invalid={!!error && showErrorMessage ? \"true\" : \"false\"}\n isInvalid={!!error}\n onChange={handlePhoneChange}\n masks={{\n br: \"(..) .....-....\",}}\n inputProps={{\n id,\n name: 'phone',\n required: true,\n autoFocus: true,\n autoComplete: \"tel\",\n ref: phoneInputRef,\n }}\n //TODO no futuro enviar com o ddi, só retirar o disableCountryCode e disableCountryGuess\n dropdownStyle={{\n color: textColor,\n }}\n disableCountryGuess={true}\n disableCountryCode={true}\n value={rest.value as string} \n />\n ) : (\n <FormInput\n id={id}\n ref={ref}\n type={type} \n $bordercolor={borderColor}\n aria-invalid={!!error && showErrorMessage ? \"true\" : \"false\"}\n onKeyUp={handleKeyUp}\n autoComplete={rest.autoComplete \|\| \"on\"}\n {...rest}\n />\n )}\n\n {!!error && showErrorMessage && (\n <FormErrorMessage data-testid=\"error-message\">\n {typeof error === 'string' ? error : error.message}\n </FormErrorMessage>\n )}\n </FormControl>\n );\n};\n\nexport const Input = forwardRef(InputBase);\n","import { FormEvent } from \"react\";\n\nexport function cep(e: FormEvent<HTMLInputElement>) {\n e.currentTarget.maxLength = 9;\n let value = e.currentTarget.value;\n value = value.replace(/\\D/g, \"\");\n value = value.replace(/^(\\d{5})(\\d)/, \"$1-$2\");\n e.currentTarget.value = value;\n return e;\n}\n\nexport function currency(e: FormEvent<HTMLInputElement>) {\n let value = e.currentTarget.value;\n value = value.replace(/\\D/g, \"\");\n value = value.replace(/(\\d)(\\d{2})$/, \"$1,$2\");\n value = value.replace(/(?=(\\d{3})+(\\D))\\B/g, \".\");\n\n e.currentTarget.value = value;\n return e;\n}\n\nexport function cpf(e: FormEvent<HTMLInputElement>) {\n e.currentTarget.maxLength = 14;\n let value = e.currentTarget.value;\n if (!value.match(/^(\\d{3}).(\\d{3}).(\\d{3})-(\\d{2})$/)) {\n value = value.replace(/\\D/g, \"\");\n value = value.replace(/(\\d{3})(\\d)/, \"$1.$2\");\n value = value.replace(/(\\d{3})(\\d)/, \"$1.$2\");\n value = value.replace(/(\\d{3})(\\d{2})$/, \"$1-$2\");\n\n e.currentTarget.value = value;\n }\n return e;\n}\n\nexport function date(e: FormEvent<HTMLInputElement>) {\n let value = e.currentTarget.value;\n value = value.replace(/\\D/g, \"\");\n value = value.replace(/(\\d{2})(\\d)/, \"$1/$2\");\n value = value.replace(/(\\d{2})(\\d)/, \"$1/$2\");\n e.currentTarget.value = value;\n return e;\n}\n\nexport function phone(e: FormEvent<HTMLInputElement>) {\n let value = e.currentTarget.value;\n value = value.replace(/\\D/g, \"\");\n value = value.replace(/(\\d{2})(\\d)/, \"$1/$2\");\n value = value.replace(/(\\d{2})(\\d)/, \"$1/$2\");\n e.currentTarget.value = value;\n return e;\n}\n","import styled, { css } from \"styled-components\";\nimport { InputHTMLAttributes } from \"react\";\n\nimport PhoneInput from \"react-phone-input-2\";\n\ntype InputProps = {\n isInvalid?: boolean;\n bordercolor?: string;\n};\n\nexport const FormLabel = styled.label<InputProps & { $textColor?: string }>`\n font-family: \"Montserrat\", sans-serif;\n font-style: normal;\n font-weight: 500;\n font-size: 1rem;\n color: ${(props) =>\n props.isInvalid ? \"var(--red)\" : props.$textColor \|\| \"var(--black)\"};\n display: block;\n margin-bottom: 0.5rem;\n text-align: left;\n`;\n\nexport const Input = styled.input<\n InputHTMLAttributes<HTMLInputElement> & { $bordercolor?: string }\n>`\n font-family: \"Montserrat\", sans-serif;\n font-style: normal;\n font-weight: 500;\n font-size: 1rem;\n line-height: 1.5rem;\n background: var(--gray-500);\n color: var(--black);\n padding: 0.5rem;\n border-radius: 0.125rem;\n border: 1px solid transparent;\n display: block;\n height: 3.125rem;\n width: 100%;\n\n &:focus {\n border-radius: 0.125rem;\n border: 2px solid ${(props) => props.$bordercolor \|\| \"var(--yellow-500)\"};\n outline: none;\n }\n\n &::placeholder {\n font-size: 1rem;\n line-height: 1.5rem;\n color: #b6b6b6;\n font-weight: 800;\n }\n\n / Autofill styles /\n &:-webkit-autofill {\n background: var(--gray-500) !important;\n color: var(--black) !important;\n -webkit-text-fill-color: var(--black) !important;\n transition: background-color 5000s ease-in-out 0s; / Prevent flashing /\n }\n\n &:-webkit-autofill::first-line {\n font-family: \"Montserrat\", sans-serif;\n font-size: 1rem;\n font-weight: 500;\n }\n`;\n\nexport const FormPhoneInput = styled(PhoneInput)<\n InputProps & { $bordercolor?: string; $textColor?: string }\n>`\n .form-control {\n background: white;\n color: ${(props) =>\n props.isInvalid ? \"var(--red)\" : props.$textColor \|\| \"var(--black)\"};\n padding: 0.5rem;\n border-radius: 0.125rem;\n border: 1px solid transparent;\n height: 3.125rem;\n width: 100%;\n padding-left: 4rem;\n font-family: \"Montserrat\", sans-serif;\n font-style: normal;\n font-weight: 500;\n font-size: 1rem;\n line-height: 1.5rem;\n text &:focus,\n &:focus-within {\n border-radius: 0.125rem;\n border: 2px solid\n ${(props) =>\n !props.isValid\n ? \"var(--red)\"\n : props.$bordercolor \|\| \"var(--yellow-500)\"};\n }\n\n &::placeholder {\n font-size: 1rem;\n line-height: 1.5rem;\n color: #b6b6b6;\n font-weight: 800;\n }\n\n / Autofill styles /\n &:-webkit-autofill {\n background: var(--gray-500) !important;\n color: var(--black) !important;\n -webkit-text-fill-color: var(--black) !important;\n transition: background-color 5000s ease-in-out 0s; / Prevent flashing */\n }\n\n &:-webkit-autofill::first-line {\n font-family: \"Montserrat\", sans-serif;\n font-size: 1rem;\n font-weight: 500;\n }\n }\n\n &:focus-within {\n .form-control {\n border: 2px solid\n ${(props) =>\n props.isInvalid\n ? \"var(--red)\"\n : props.$bordercolor \|\| \"var(--yellow-500)\"};\n }\n }\n\n .flag-dropdown {\n background: white;\n border: none;\n padding: 0.5rem;\n margin: 0.25rem;\n cursor: pointer;\n\n &:focus-within {\n outline: none;\n }\n }\n`;\n\nexport const FormErrorMessage = styled.small`\n font-size: 0.75rem;\n line-height: 1.125rem;\n color: var(--red);\n margin-top: 0.25rem;\n display: block;\n`;\n\nexport const FormControl = styled.div.withConfig({\n shouldForwardProp: (prop) => ![\"isInvalid\", \"$bordercolor\"].includes(prop),\n})<{ isInvalid?: boolean; $bordercolor?: string }>`\n ${FormLabel} {\n ${(props) =>\n props.isInvalid &&\n css`\n color: var(--red);\n `};\n }\n\n ${Input} {\n ${(props) =>\n props.isInvalid &&\n css`\n border: 1px solid var(--red);\n\n &:not(:focus)::placeholder {\n color: var(--red);\n font-weight: 600;\n }\n `};\n\n &:focus {\n ${(props) =>\n props.isInvalid &&\n css`\n border: 1px solid var(--red);\n `};\n }\n }\n\n ${FormPhoneInput} {\n ${(props) =>\n props.isInvalid &&\n css`\n border: 1px solid var(--red);\n\n &:not(:focus)::placeholder {\n color: var(--red);\n font-weight: 600;\n }\n `};\n\n &:focus {\n ${(props) =>\n props.isInvalid &&\n css`\n border: 1px solid var(--red);\n `};\n }\n }\n`;\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":"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","names":["React","useState","styled","Input","useEffect","useState","useCallback","styled","css","jsx","jsxs","useState","useCallback","useEffect","jsx","jsxs","React","useState","Input"]}

package/package.json CHANGED Viewed

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