mitre-form-component 0.0.49 → 0.1.0

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/components/Form/index.tsx
-import React3, { useState as useState3 } from "react";
+import React2, { useState as useState3 } from "react";
 
 // src/components/hooks/useError.ts
 import { useState } from "react";
@@ -130,6 +130,53 @@ var opacityEffect = `
 
 // src/components/Form/styles.ts
 import styled from "styled-components";
+
+// src/components/styles/theme.ts
+var theme = {
+  colors: {
+    // Cores principais
+    red: "#e52e4d",
+    white: "#FFF",
+    black: "#2F2F2F",
+    black2: "#1E1E1E",
+    black3: "#353535",
+    alphaBlack: "#000000",
+    // Amarelos
+    yellow400: "#FFD789",
+    yellow500: "#F6C76B",
+    // Cinzas
+    gray40: "#F0F0F0",
+    gray45: "#767676",
+    gray50: "#686A69",
+    gray60: "#8F8F8F",
+    gray100: "#B6B6B6",
+    gray150: "#B9B9B9",
+    gray180: "#CECECE",
+    gray200: "#D2D2D2",
+    gray300: "#EBEBEB",
+    gray400: "#ECECEC",
+    gray500: "#F4F4F4",
+    gray550: "#6F6F6F",
+    gray600: "#686868",
+    gray700: "#535353",
+    gray800: "#9D9D9D",
+    // Verdes
+    green: "#57C06E",
+    green2: "#2DCE68",
+    // Azul
+    blue: "#007BFF",
+    // Transparente
+    transparent: "transparent"
+  },
+  shadows: {
+    shadow500: "0px 4px 8px rgba(91, 91, 91, 0.2)"
+  },
+  fonts: {
+    primary: '"Montserrat", sans-serif'
+  }
+};
+
+// src/components/Form/styles.ts
 var FormContainer = styled.div`
   ${flex("column")}
   align-items: stretch;
@@ -137,7 +184,7 @@ var FormContainer = styled.div`
   overflow-x: hidden;
   overflow-y: auto;
 
-  background: ${(props) => props.$backgroundColor || "var(--gray-180)"};
+  background: ${(props) => props.$backgroundColor || theme.colors.gray180};
 
   padding: ${(props) => props.$innerPadding || "1rem"};
 
@@ -165,7 +212,7 @@ var ButtonContainer = styled.div`
 
   button {
     ${opacityEffect}
-    color: var(--black);
+    color: ${theme.colors.black};
     font-weight: 600;
     border: none;
     border-radius: 8px;
@@ -184,26 +231,26 @@ var Form = styled.form`
   }
 
   p {
-    font-family: "Montserrat", sans-serif;
+    font-family: ${theme.fonts.primary};
     font-style: italic;
     font-weight: 200;
     font-size: 0.8rem;
-    color: ${(props) => props.$textColor || "var(--black)"};
+    color: ${(props) => props.$textColor || theme.colors.black};
     text-align: start;
   }
 
   a {
-    font-family: "Montserrat", sans-serif;
+    font-family: ${theme.fonts.primary};
     font-style: italic;
     font-weight: 200;
     font-size: 0.8rem;
-    color: ${(props) => props.$textColor || "var(--black)"};
+    color: ${(props) => props.$textColor || theme.colors.black};
   }
 
   h6 {
     text-align: start;
     margin-left: 10px;
-    color: ${(props) => props.$textColor || "var(--black)"};
+    color: ${(props) => props.$textColor || theme.colors.black};
   }
 
   & > div {
@@ -215,88 +262,36 @@ var Title = styled.h2`
   font-weight: 700;
   line-height: 24px;
   letter-spacing: 0em;
-  color: ${(props) => props.$textColor || "var(--black)"};
+  color: ${(props) => props.$textColor || theme.colors.black};
 `;
-var Text = styled.p`
+var Subtitle = styled.p`
   font-size: 1rem;
   font-weight: 400;
   line-height: 23px;
   letter-spacing: 0em;
   margin-top: 10px;
-  color: ${(props) => props.$textColor || "var(--black)"};
+  color: ${(props) => props.$textColor || theme.colors.black};
 `;
 
-// src/components/styles/global.ts
-import { createGlobalStyle } from "styled-components";
-import { useEffect } from "react";
-var GlobalStyles = createGlobalStyle`
-  :root {
-    --red: #e52e4d;
-    --white: #FFF;
-    --black: #2F2F2F;
-    --black-2:#1E1E1E;
-    --alphaBlack: #000000;
-    --black-2:#1E1E1E;
-    --black-3:#353535;
-
-    --yellow-400:#FFD789;
-    --yellow-500: #F6C76B;
-    --gray-40:#F0F0F0;
-    --gray-45:#767676;
-    --gray-50: #686A69;
-    --gray-60: #8F8F8F;
-    --gray-100: #B6B6B6;
-    --gray-150: #B9B9B9;
-    --gray-180: #CECECE;
-    --gray-200: #D2D2D2;
-    --gray-300: #EBEBEB;
-    --gray-400: #ECECEC;
-    --gray-500: #F4F4F4;
-    --gray-550:#6F6F6F;
-    --gray-600:#686868;
-    --gray-700: #535353;
-    --gray-800:#9D9D9D;
-    --shadow-500: 0px 4px 8px rgba(91, 91, 91, 0.2);
-    --green:#57C06E;
-    --green-2:#2DCE68;
-    --blue:#007BFF;
-
-    --transparent: transparent;
-  }
-
+// src/components/styles/ComponentWrapper.tsx
+import styled2 from "styled-components";
+var ComponentWrapper = styled2.div`
+  /* Reset CSS scoped apenas ao componente */
   * {
-    margin: 0;
-    padding: 0;
     box-sizing: border-box;
   }
-
-  html {
-    scroll-behavior: smooth;
-
-    @media (max-width: 1080px) {
-      font-size: 93.75%;
-    }
-    @media (max-width: 720px) {
-      font-size: 87.5%;
-    }
-  }
-
-  body {
-    background: var(--white);
-    -webkit-font-smoothing: antialiased;
-  }
-
-  body, input, textarea, select, button {
-    font-family: "Montserrat", sans-serif;
-    font-weight: 400;
-  } 
-
-  h1, h2, h3, h4, h5, h6, strong {
-    font-weight: 600;
-  }
-
+  
+  /* Fonte aplicada apenas ao componente */
+  font-family: ${theme.fonts.primary};
+  
+  /* Estilos necessários apenas neste escopo */
   button {
     cursor: pointer;
+    font-family: ${theme.fonts.primary};
+  }
+
+  input, textarea, select {
+    font-family: ${theme.fonts.primary};
   }
 
   [disabled] {
@@ -304,90 +299,42 @@ var GlobalStyles = createGlobalStyle`
     cursor: not-allowed;
   }
 
-  .hidden {
-    overflow: hidden;
-  }
-
+  /* Scrollbar customizada apenas para este componente */
   ::-webkit-scrollbar {
     -webkit-appearance: none;
-    background: var(--gray-500);
+    background: ${theme.colors.gray500};
     width: 6px;
     height: 10px;
   }
 
   ::-webkit-scrollbar-thumb {
-    background-color: var(--gray-50);
-  }
-
-  .aligncenter {
-    text-align: center;
-  }
-
-  .width-190px {
-    width:190px;
-  }
-
-  .hidden-content {
-    display:none !important;
-  }
-
-  .global-margin-bottom {
-    margin-bottom:20px;
-  }
-
-  .background-light-gray {
-    background:#F4F4F4;
-  }
-
-  .full-width-and-height {
-    height:100%;
-    width:100%;
-  }
-
-  .flex-direction-column {
-    flex-direction:column;
-  }
-
-  .bold {
-    font-weight:700;
+    background-color: ${theme.colors.gray50};
   }
-
-  .margin-center-x {
-    margin:0 auto;
-  }
-
-  .border-none {
-    border:none;
-  }
-
-  .text-center {
-    text-align:center;
-  }
-
-  .relative {
-    position:relative;
-  }
-
-  /* accessibility */
-  body ._access-menu p._text-center{
-    font-family: "Montserrat", sans-serif;
-    font-style: italic;
-    font-size: 1.2rem!important;
-    margin-top: 6px;
-    margin-bottom: 3px;
-  } 
-
 `;
-var FontLoader = () => {
+
+// src/components/styles/FontLoader.tsx
+import { useEffect } from "react";
+var useMontserratFont = () => {
   useEffect(() => {
-    const link = document.createElement("link");
-    link.href = "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap";
-    link.rel = "stylesheet";
-    document.head.appendChild(link);
+    const existingLink = document.querySelector('link[data-mitre-form-font="montserrat"]');
+    if (!existingLink) {
+      const link = document.createElement("link");
+      link.rel = "preconnect";
+      link.href = "https://fonts.googleapis.com";
+      document.head.appendChild(link);
+      const link2 = document.createElement("link");
+      link2.rel = "preconnect";
+      link2.href = "https://fonts.gstatic.com";
+      link2.crossOrigin = "anonymous";
+      document.head.appendChild(link2);
+      const link3 = document.createElement("link");
+      link3.rel = "stylesheet";
+      link3.href = "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap";
+      link3.dataset.mitreFormFont = "montserrat";
+      document.head.appendChild(link3);
+    }
   }, []);
-  return null;
 };
-var global_default = FontLoader;
 
 // src/components/Input/index.tsx
 import {
@@ -434,88 +381,88 @@ function date(e) {
 }
 
 // src/components/Input/styles.ts
-import styled2, { css } from "styled-components";
-var FormLabel = styled2.label`
-  font-family: "Montserrat", sans-serif;
+import styled3, { css } from "styled-components";
+var FormLabel = styled3.label`
+  font-family: ${theme.fonts.primary};
   font-style: normal;
   font-weight: 500;
   font-size: 1rem;
-  color: ${(props) => props.$textColor || "var(--black)"};
+  color: ${(props) => props.$textColor || theme.colors.black};
   display: block;
   margin-bottom: 0.5rem;
   text-align: left;
 `;
-var Input = styled2.input`
-  font-family: "Montserrat", sans-serif;
+var Input = styled3.input`
+  font-family: ${theme.fonts.primary};
   font-style: normal;
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.5rem;
-  background: ${(props) => props.$backgroundColor || "var(--white)"};
-  color: ${(props) => props.$textColor || "var(--black)"};
+  background: ${(props) => props.$backgroundColor || theme.colors.white};
+  color: ${(props) => props.$textColor || theme.colors.black};
   padding: 0.5rem;
   border-radius: 0.125rem;
-  border: 1px solid ${(props) => props.$borderColor || "transparent"};
+  border: 1px solid ${(props) => props.$borderColor || theme.colors.transparent};
   display: block;
   height: 3.125rem;
   width: 100%;
 
   &:focus {
     border-radius: 0.125rem;
-    border: 2px solid ${(props) => props.$focusBorderColor || "var(--yellow-500)"};
+    border: 2px solid ${(props) => props.$focusBorderColor || theme.colors.yellow500};
     outline: none;
   }
 
   &::placeholder {
     font-size: 1rem;
     line-height: 1.5rem;
-    color: ${(props) => props.$placeholderColor || "var(--gray-100)"};
+    color: ${(props) => props.$placeholderColor || theme.colors.gray100};
     font-weight: 800;
   }
 
   /* Autofill styles */
   &:-webkit-autofill {
-    background: ${(props) => props.$backgroundColor || "var(--white)"} !important;
-    color: ${(props) => props.$textColor || "var(--black)"} !important;
-    -webkit-text-fill-color: ${(props) => props.$textColor || "var(--black)"} !important;
+    background: ${(props) => props.$backgroundColor || theme.colors.white} !important;
+    color: ${(props) => props.$textColor || theme.colors.black} !important;
+    -webkit-text-fill-color: ${(props) => props.$textColor || theme.colors.black} !important;
     transition: background-color 5000s ease-in-out 0s; /* Prevent flashing */
   }
 
   &:-webkit-autofill::first-line {
-    font-family: "Montserrat", sans-serif;
+    font-family: ${theme.fonts.primary};
     font-size: 1rem;
     font-weight: 500;
   }
 `;
-var FormErrorMessage = styled2.small`
+var FormErrorMessage = styled3.small`
   font-size: 0.75rem;
   line-height: 1.125rem;
-  color: var(--red);
+  color: ${theme.colors.red};
   margin-top: 0.25rem;
   display: block;
 `;
-var FormControl = styled2.div.withConfig({
+var FormControl = styled3.div.withConfig({
   shouldForwardProp: (prop) => !["isInvalid"].includes(prop)
 })`
   ${FormLabel} {
     ${(props) => props.isInvalid && css`
-        color: var(--red);
+        color: ${theme.colors.red};
       `};
   }
 
   ${Input} {
     ${(props) => props.isInvalid && css`
-        border: 1px solid var(--red);
+        border: 1px solid ${theme.colors.red};
 
         &:not(:focus)::placeholder {
-          color: var(--red);
+          color: ${theme.colors.red};
           font-weight: 600;
         }
       `};
 
     &:focus {
       ${(props) => props.isInvalid && css`
-          border: 1px solid var(--red);
+          border: 1px solid ${theme.colors.red};
         `};
     }
   }
@@ -588,8 +535,8 @@ var Input2 = forwardRef(InputBase);
 
 // src/components/Button/styles.ts
 import { darken } from "polished";
-import styled3, { css as css2 } from "styled-components";
-var Icon = styled3.span`
+import styled4, { css as css2 } from "styled-components";
+var Icon = styled4.span`
   font-size: 0;
   line-height: 0;
   transition: all 0.25s ease;
@@ -599,32 +546,32 @@ var Icon = styled3.span`
   opacity: 0;
   margin-right: 0.625rem;
 `;
-var Text2 = styled3.span`
-  font-family: "Montserrat", sans-serif;
+var Text = styled4.span`
+  font-family: ${theme.fonts.primary};
   font-size: 1rem;
   line-height: 1.5rem;
   margin-bottom: -2px;
 
   transition: all 0.25s ease;
 `;
-var TextSubmitting = styled3.span`
-  font-family: "Montserrat", sans-serif;
+var TextSubmitting = styled4.span`
+  font-family: ${theme.fonts.primary};
   font-weight: 400;
   font-size: 1rem;
 
   transition: all 0.25s ease;
 `;
-var LoadingIcon = styled3.span.withConfig({
+var LoadingIcon = styled4.span.withConfig({
   shouldForwardProp: (prop) => prop !== "hasText"
 })`
   display: block;
 
   width: 1rem;
   height: 1rem;
-  border: 0.125rem solid var(--white);
+  border: 0.125rem solid ${theme.colors.white};
   border-radius: 50%;
   animation: loadingAnimation 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: var(--white) transparent transparent transparent;
+  border-color: ${theme.colors.white} transparent transparent transparent;
 
   margin-right: ${(props) => props.hasText ? "0.625rem" : "0"};
 
@@ -637,7 +584,7 @@ var LoadingIcon = styled3.span.withConfig({
     }
   }
 `;
-var Button = styled3.button.withConfig({
+var Button = styled4.button.withConfig({
   shouldForwardProp: (prop) => ![
     "hasIcon",
     "isSubmitting",
@@ -668,7 +615,7 @@ var Button = styled3.button.withConfig({
     display: ${(props) => props?.hasIcon ? "block" : ""};
   }
 
-  ${Text2} {
+  ${Text} {
     transform: ${(props) => props?.hasIcon ? "translate3d(-4.5px, 0px, 0px)" : "unset"};
 
     @media print, screen and (min-width: 40em) {
@@ -688,12 +635,12 @@ var Button = styled3.button.withConfig({
       transform: translate3d(0px, 0px, 0px);
     }
 
-    ${Text2} {
+    ${Text} {
       transform: ${(props) => props?.hasIcon ? "translate3d(-5px, 0px, 0px)" : "unset"};
     }
   }
 
-  ${Text2} {
+  ${Text} {
     ${(props) => props.isSubmitting && !props.hasSubmittingMessage && css2`
         transform: unset;
         opacity: 0;
@@ -718,7 +665,7 @@ function Button2({
   isSubmitting = false,
   submittingMessage = "",
   disabled = false,
-  color = "var(--black)",
+  color = "#2F2F2F",
   ...rest
 }) {
   return /* @__PURE__ */ jsxs2(
@@ -734,7 +681,7 @@ function Button2({
       children: [
         icon && !isSubmitting && /* @__PURE__ */ jsx2(Icon, { "data-testid": "button-icon", children: icon }),
         isSubmitting && /* @__PURE__ */ jsx2(LoadingIcon, { hasText: submittingMessage.length > 0 }),
-        (!isSubmitting || submittingMessage.length === 0) && /* @__PURE__ */ jsx2(Text2, { className: "text", children }),
+        (!isSubmitting || submittingMessage.length === 0) && /* @__PURE__ */ jsx2(Text, { className: "text", children }),
         isSubmitting && submittingMessage.length > 0 && /* @__PURE__ */ jsx2(TextSubmitting, { children: submittingMessage })
       ]
     }
@@ -745,7 +692,7 @@ function Button2({
 import { useEffect as useEffect2, useState as useState2, useCallback as useCallback2 } from "react";
 
 // src/components/Alert/styles.ts
-import styled4, { css as css3, keyframes } from "styled-components";
+import styled5, { css as css3, keyframes } from "styled-components";
 var fadeIn = keyframes`
   from { opacity: 0; transform: translateY(-10px); }
   to { opacity: 1; transform: translateY(0); }
@@ -756,39 +703,39 @@ var fadeOut = keyframes`
 `;
 var typeStyles = {
   error: css3`
-    background-color: var(--red);
-    border: 1px solid var(--red);
-    color: var(--white);
+    background-color: ${theme.colors.red};
+    border: 1px solid ${theme.colors.red};
+    color: ${theme.colors.white};
     svg {
-      color: var(--white);
+      color: ${theme.colors.white};
     }
   `,
   warning: css3`
-    background-color: var(--yellow-500);
-    border: 1px solid var(--yellow-400);
-    color: var(--black);
+    background-color: ${theme.colors.yellow500};
+    border: 1px solid ${theme.colors.yellow400};
+    color: ${theme.colors.black};
     svg {
-      color: var(--black);
+      color: ${theme.colors.black};
     }
   `,
   info: css3`
-    background-color: var(--blue);
-    border: 1px solid var(--blue);
-    color: var(--white);
+    background-color: ${theme.colors.blue};
+    border: 1px solid ${theme.colors.blue};
+    color: ${theme.colors.white};
     svg {
-      color: var(--white);
+      color: ${theme.colors.white};
     }
   `,
   success: css3`
-    background-color: var(--green);
-    border: 1px solid var(--green-2);
-    color: var(--white);
+    background-color: ${theme.colors.green};
+    border: 1px solid ${theme.colors.green2};
+    color: ${theme.colors.white};
     svg {
-      color: var(--white);
+      color: ${theme.colors.white};
     }
   `
 };
-var AlertContainer = styled4.div`
+var AlertContainer = styled5.div`
   position: fixed;
   width: 500px;
   top: 15px;
@@ -801,14 +748,14 @@ var AlertContainer = styled4.div`
   animation-fill-mode: forwards;
   align-items: center;
   gap: 0.5rem;
-  box-shadow: var(--shadow-500);
+  box-shadow: ${theme.shadows.shadow500};
   border-radius: 0.5rem;
   font-size: 1rem;
   font-weight: 500;
 
   ${({ $type }) => typeStyles[$type]}
 `;
-var DismissButton = styled4.button`
+var DismissButton = styled5.button`
   position: absolute;
   background: transparent;
   right: 10px;
@@ -879,34 +826,34 @@ import {
 } from "react";
 
 // src/components/PhoneInput/styles.ts
-import styled5, { css as css4 } from "styled-components";
+import styled6, { css as css4 } from "styled-components";
 import { PhoneInput } from "react-international-phone";
 import "react-international-phone/style.css";
-var FormLabel2 = styled5.label`
-  font-family: "Montserrat", sans-serif;
+var FormLabel2 = styled6.label`
+  font-family: ${theme.fonts.primary};
   font-style: normal;
   font-weight: 500;
   font-size: 1rem;
-  color: ${(props) => props.$textColor || "var(--black)"};
+  color: ${(props) => props.$textColor || theme.colors.black};
   display: block;
   margin-bottom: 0.5rem;
   text-align: left;
 `;
-var StyledPhoneInput = styled5(PhoneInput)`
+var StyledPhoneInput = styled6(PhoneInput)`
   width: 100%;
   height: 3.125rem;
-  background: ${(props) => props.$backgroundColor || "var(--white)"};
-  font-family: "Montserrat", sans-serif;
-  border: 1px solid ${(props) => props.$borderColor || "transparent"};
+  background: ${(props) => props.$backgroundColor || theme.colors.white};
+  font-family: ${theme.fonts.primary};
+  border: 1px solid ${(props) => props.$borderColor || theme.colors.transparent};
   border-radius: 0.125rem;
 
   &:focus-within {
     border-radius: 0.125rem;
-    border: 2px solid ${(props) => props.$focusBorderColor || "var(--yellow-500)"};
+    border: 2px solid ${(props) => props.$focusBorderColor || theme.colors.yellow500};
     outline: none;
 
     .react-international-phone-country-selector-button {
-      border-right: 1px solid ${(props) => props.$focusBorderColor || "var(--yellow-500)"};
+      border-right: 1px solid ${(props) => props.$focusBorderColor || theme.colors.yellow500};
     }
   }
 
@@ -917,27 +864,27 @@ var StyledPhoneInput = styled5(PhoneInput)`
     display: flex;
     align-items: center;
     overflow: hidden;
-    font-family: "Montserrat", sans-serif;
+    font-family: ${theme.fonts.primary};
     font-size: 1rem;
     font-weight: 500;
-    color: ${(props) => props.$textColor || "var(--black)"};
-    background: ${(props) => props.$backgroundColor || "var(--white)"};
+    color: ${(props) => props.$textColor || theme.colors.black};
+    background: ${(props) => props.$backgroundColor || theme.colors.white};
   }
 
   /* Style for the country selector button */
   .react-international-phone-country-selector-button {
     height: 100%;
-    background: ${(props) => props.$backgroundColor || "var(--white)"};
+    background: ${(props) => props.$backgroundColor || theme.colors.white};
     display: flex;
     align-items: center;
     justify-content: center;
-    font-family: "Montserrat", sans-serif;
+    font-family: ${theme.fonts.primary};
     font-size: 1rem;
     font-weight: 500;
     cursor: pointer;
     outline: none;
     border: none;
-    border-right: 1px solid ${(props) => props.$borderColor || "var(--transparent)"};
+    border-right: 1px solid ${(props) => props.$borderColor || theme.colors.transparent};
   }
 
   /* Style for the input itself */
@@ -946,13 +893,13 @@ var StyledPhoneInput = styled5(PhoneInput)`
     height: 100%;
     padding: 0 0.5rem;
     margin: 0;
-    background: ${(props) => props.$backgroundColor || "var(--white)"};
-    font-family: "Montserrat", sans-serif;
+    background: ${(props) => props.$backgroundColor || theme.colors.white};
+    font-family: ${theme.fonts.primary};
     font-style: normal;
     font-weight: 500;
     font-size: 1rem;
     line-height: 1.5rem;
-    color: ${(props) => props.$textColor || "var(--black)"};
+    color: ${(props) => props.$textColor || theme.colors.black};
     outline: none;
     border: none;
     border-radius: 0.125rem;
@@ -960,55 +907,55 @@ var StyledPhoneInput = styled5(PhoneInput)`
     &::placeholder {
       font-size: 1rem;
       line-height: 1.5rem;
-      color: ${(props) => props.$placeholderColor || "var(--gray-100)"};
+      color: ${(props) => props.$placeholderColor || theme.colors.gray100};
       font-weight: 800;
     }
 
     &:-webkit-autofill {
-      background: ${(props) => props.$backgroundColor || "var(--white)"} !important;
-      -webkit-text-fill-color: ${(props) => props.$textColor || "var(--black)"} !important;
+      background: ${(props) => props.$backgroundColor || theme.colors.white} !important;
+      -webkit-text-fill-color: ${(props) => props.$textColor || theme.colors.black} !important;
       transition: background-color 5000s ease-in-out 0s;
     }
 
     &:-webkit-autofill::first-line {
-      font-family: "Montserrat", sans-serif;
+      font-family: ${theme.fonts.primary};
       font-size: 1rem;
       font-weight: 500;
     }
   }
 `;
-var FormErrorMessage2 = styled5.small`
+var FormErrorMessage2 = styled6.small`
   font-size: 0.75rem;
   line-height: 1.125rem;
-  color: var(--red);
+  color: ${theme.colors.red};
   margin-top: 0.25rem;
   display: block;
 `;
-var FormControl2 = styled5.div.withConfig({
+var FormControl2 = styled6.div.withConfig({
   shouldForwardProp: (prop) => !["isInvalid"].includes(prop)
 })`
   ${FormLabel2} {
     ${(props) => props.isInvalid && css4`
-        color: var(--red);
+        color: ${theme.colors.red};
       `};
   }
 
   ${StyledPhoneInput} {
     ${(props) => props.isInvalid && css4`
-        border: 1px solid var(--red);
+        border: 1px solid ${theme.colors.red};
 
         &:not(:focus)::placeholder {
-          color: var(--red);
+          color: ${theme.colors.red};
           font-weight: 600;
         }
       `};
 
     .react-international-phone-input-container {
       ${(props) => props.isInvalid && css4`
-          border: 1px solid var(--red);
+          border: 1px solid ${theme.colors.red};
 
           &:not(:focus)::placeholder {
-            color: var(--red);
+            color: ${theme.colors.red};
             font-weight: 600;
           }
         `};
@@ -1016,7 +963,7 @@ var FormControl2 = styled5.div.withConfig({
 
     .react-international-phone-country-selector-button {
       ${(props) => props.isInvalid && css4`
-          border-right: 1px solid var(--red);
+          border-right: 1px solid ${theme.colors.red};
         `};
     }
   }
@@ -1085,28 +1032,28 @@ import {
 } from "react";
 
 // src/components/ProductSelect/styles.ts
-import styled6, { css as css5 } from "styled-components";
-var FormLabel3 = styled6.label`
-  font-family: "Montserrat", sans-serif;
+import styled7, { css as css5 } from "styled-components";
+var FormLabel3 = styled7.label`
+  font-family: ${theme.fonts.primary};
   font-style: normal;
   font-weight: 500;
   font-size: 1rem;
-  color: ${(props) => props.$textColor || "var(--black)"};
+  color: ${(props) => props.$textColor || theme.colors.black};
   display: block;
   margin-bottom: 0.5rem;
   text-align: left;
 `;
-var Select = styled6.select`
-  font-family: "Montserrat", sans-serif;
+var Select = styled7.select`
+  font-family: ${theme.fonts.primary};
   font-style: normal;
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.5rem;
-  background: ${(props) => props.$backgroundColor || "var(--white)"};
-  color: ${(props) => props.$textColor || "var(--black)"};
+  background: ${(props) => props.$backgroundColor || theme.colors.white};
+  color: ${(props) => props.$textColor || theme.colors.black};
   padding: 0.5rem 3rem 0.5rem 0.5rem; /* Aumentado padding-right para 3rem */
   border-radius: 0.125rem;
-  border: 1px solid ${(props) => props.$borderColor || "transparent"};
+  border: 1px solid ${(props) => props.$borderColor || theme.colors.transparent};
   display: block;
   height: 3.125rem;
   width: 100%;
@@ -1125,46 +1072,46 @@ var Select = styled6.select`
 
   &:focus {
     border-radius: 0.125rem;
-    border: 2px solid ${(props) => props.$focusBorderColor || "var(--yellow-500)"};
+    border: 2px solid ${(props) => props.$focusBorderColor || theme.colors.yellow500};
     outline: none;
   }
 
   /* Estilo para option disabled (placeholder) */
   option:disabled {
-    color: var(--gray-100);
+    color: ${theme.colors.gray100};
     font-weight: 800;
   }
 
   /* Estilo para options normais */
   option:not(:disabled) {
-    color: ${(props) => props.$textColor || "var(--black)"};
+    color: ${(props) => props.$textColor || theme.colors.black};
     font-weight: 500;
   }
 `;
-var FormErrorMessage3 = styled6.small`
+var FormErrorMessage3 = styled7.small`
   font-size: 0.75rem;
   line-height: 1.125rem;
-  color: var(--red);
+  color: ${theme.colors.red};
   margin-top: 0.25rem;
   display: block;
 `;
-var FormControl3 = styled6.div.withConfig({
+var FormControl3 = styled7.div.withConfig({
   shouldForwardProp: (prop) => !["isInvalid"].includes(prop)
 })`
   ${FormLabel3} {
     ${(props) => props.isInvalid && css5`
-        color: var(--red);
+        color: ${theme.colors.red};
       `};
   }
 
   ${Select} {
     ${(props) => props.isInvalid && css5`
-        border: 1px solid var(--red);
+        border: 1px solid ${theme.colors.red};
       `};
 
     &:focus {
       ${(props) => props.isInvalid && css5`
-          border: 1px solid var(--red);
+          border: 1px solid ${theme.colors.red};
         `};
     }
   }
@@ -1211,7 +1158,7 @@ var ProductSelectBase = ({
 var ProductSelect = forwardRef3(ProductSelectBase);
 
 // src/components/Form/index.tsx
-import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var phoneUtil = PhoneNumberUtil.getInstance();
 var isPhoneValid = (phone) => {
   try {
@@ -1242,22 +1189,27 @@ var schemaWithProduct = yup.object().shape({
   productId: yup.string().required("Produto \xE9 obrigat\xF3rio")
 });
 var schema = yup.object().shape(baseSchema);
-var MitreFormComponent = React3.forwardRef(({
+var MitreFormComponent = React2.forwardRef(({
   products,
   apiUrl,
   apiToken,
   showHeader = true,
-  backgroundColor = "var(--gray-180)",
-  textColor = "var(--black)",
-  buttonBackgroundColor = "#F6C76B",
-  buttonTextColor = "var(--black)",
+  title = "Atendimento por mensagem",
+  subtitle = "Informe seus dados e retornaremos a mensagem.",
+  backgroundColor = theme.colors.gray180,
+  textColor = theme.colors.black,
+  buttonBackgroundColor = theme.colors.yellow500,
+  buttonTextColor = theme.colors.black,
   innerPadding = "1rem",
-  inputBackgroundColor = "var(--white)",
-  inputBorderColor = "var(--transparent)",
-  inputFocusBorderColor = "var(--yellow-500)",
-  inputPlaceholderColor = "var(--gray-100)",
-  inputTextColor = "var(--black)"
+  inputBackgroundColor = theme.colors.white,
+  inputBorderColor = theme.colors.transparent,
+  inputFocusBorderColor = theme.colors.yellow500,
+  inputPlaceholderColor = theme.colors.gray100,
+  inputTextColor = theme.colors.black,
+  onSuccess,
+  onError
 }, ref) => {
+  useMontserratFont();
   const [loading, setIsLoading] = useState3(false);
   const { error, handleError, clearError } = useError();
   const [successMessage, setSuccessMessage] = useState3("");
@@ -1294,7 +1246,7 @@ var MitreFormComponent = React3.forwardRef(({
     resolver: yupResolver(formSchema),
     mode: "onSubmit"
   });
-  React3.useEffect(() => {
+  React2.useEffect(() => {
     if (!isBrowser()) return;
     const { data } = resolveUtmWithPriority(/* @__PURE__ */ new Date());
     setUtm(data);
@@ -1355,7 +1307,6 @@ var MitreFormComponent = React3.forwardRef(({
         utm_medium: utm.utm_medium,
         utm_term: utm.utm_term
       };
-      console.log("requestBody = " + JSON.stringify(requestBody));
       const response = await fetch(`${apiUrl}/leads`, {
         method: "POST",
         headers: {
@@ -1365,31 +1316,29 @@ var MitreFormComponent = React3.forwardRef(({
         body: JSON.stringify(requestBody)
       });
       if (!response.ok) {
-        console.log("response = " + JSON.stringify(response));
         throw new Error("Falha ao enviar a mensagem!");
       }
+      const responseData = await response.json();
+      const leadId = responseData.leadId || responseData.id || "";
       setSuccessMessage("Mensagem enviada com sucesso!");
       resetForm();
+      onSuccess?.(requestBody, leadId);
     } catch (err) {
+      const error2 = err instanceof Error ? err : new Error("Erro desconhecido");
       handleError(err);
+      onError?.(error2);
     } finally {
       setIsLoading(false);
     }
   };
   if (productsValidationError) {
     console.error("Erro na valida\xE7\xE3o dos produtos:", productsValidationError);
-    return /* @__PURE__ */ jsxs6(Fragment, { children: [
-      /* @__PURE__ */ jsx6(global_default, {}),
-      /* @__PURE__ */ jsx6(GlobalStyles, {}),
-      /* @__PURE__ */ jsx6(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: /* @__PURE__ */ jsxs6(HeaderContainer, { children: [
-        /* @__PURE__ */ jsx6(Title, { $textColor: textColor, children: "Erro no carregamento do formul\xE1rio!" }),
-        /* @__PURE__ */ jsx6(Text, { $textColor: textColor, children: "N\xE3o foi poss\xEDvel carregar o formul\xE1rio. Tente novamente mais tarde." })
-      ] }) })
-    ] });
+    return /* @__PURE__ */ jsx6(ComponentWrapper, { children: /* @__PURE__ */ jsx6(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: /* @__PURE__ */ jsxs6(HeaderContainer, { children: [
+      /* @__PURE__ */ jsx6(Title, { $textColor: textColor, children: "Erro no carregamento do formul\xE1rio!" }),
+      /* @__PURE__ */ jsx6(Subtitle, { $textColor: textColor, children: "N\xE3o foi poss\xEDvel carregar o formul\xE1rio. Tente novamente mais tarde." })
+    ] }) }) });
   }
-  return /* @__PURE__ */ jsxs6(Fragment, { children: [
-    /* @__PURE__ */ jsx6(global_default, {}),
-    /* @__PURE__ */ jsx6(GlobalStyles, {}),
+  return /* @__PURE__ */ jsxs6(ComponentWrapper, { children: [
     error && /* @__PURE__ */ jsx6(
       Alert,
       {
@@ -1412,8 +1361,8 @@ var MitreFormComponent = React3.forwardRef(({
     ),
     /* @__PURE__ */ jsxs6(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: [
       showHeader && /* @__PURE__ */ jsxs6(HeaderContainer, { children: [
-        /* @__PURE__ */ jsx6(Title, { $textColor: textColor, children: "Atendimento por mensagem" }),
-        /* @__PURE__ */ jsx6(Text, { $textColor: textColor, children: "Informe seus dados e retornaremos a mensagem." })
+        /* @__PURE__ */ jsx6(Title, { $textColor: textColor, children: title }),
+        /* @__PURE__ */ jsx6(Subtitle, { $textColor: textColor, children: subtitle })
       ] }),
       /* @__PURE__ */ jsxs6(Form, { $textColor: textColor, onSubmit: handleSubmit(sendMessage), noValidate: true, children: [
         products.length > 1 && /* @__PURE__ */ jsx6(