mitre-form-component 0.0.49 → 0.1.0

package/dist/index.cjs

@@ -166,6 +166,53 @@ var opacityEffect = `
 
 // src/components/Form/styles.ts
 var import_styled_components = __toESM(require("styled-components"), 1);
+
+// 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 = import_styled_components.default.div`
   ${flex("column")}
   align-items: stretch;
@@ -173,7 +220,7 @@ var FormContainer = import_styled_components.default.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"};
 
@@ -201,7 +248,7 @@ var ButtonContainer = import_styled_components.default.div`
 
   button {
     ${opacityEffect}
-    color: var(--black);
+    color: ${theme.colors.black};
     font-weight: 600;
     border: none;
     border-radius: 8px;
@@ -220,26 +267,26 @@ var Form = import_styled_components.default.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 {
@@ -251,88 +298,36 @@ var Title = import_styled_components.default.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 = import_styled_components.default.p`
+var Subtitle = import_styled_components.default.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
-var import_styled_components2 = require("styled-components");
-var import_react2 = require("react");
-var GlobalStyles = import_styled_components2.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
+var import_styled_components2 = __toESM(require("styled-components"), 1);
+var ComponentWrapper = import_styled_components2.default.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] {
@@ -340,90 +335,42 @@ var GlobalStyles = import_styled_components2.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
+var import_react2 = require("react");
+var useMontserratFont = () => {
   (0, import_react2.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
 var import_react3 = require("react");
@@ -469,53 +416,53 @@ function date(e) {
 // src/components/Input/styles.ts
 var import_styled_components3 = __toESM(require("styled-components"), 1);
 var FormLabel = import_styled_components3.default.label`
-  font-family: "Montserrat", sans-serif;
+  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 = import_styled_components3.default.input`
-  font-family: "Montserrat", sans-serif;
+  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;
   }
@@ -523,7 +470,7 @@ var Input = import_styled_components3.default.input`
 var FormErrorMessage = import_styled_components3.default.small`
   font-size: 0.75rem;
   line-height: 1.125rem;
-  color: var(--red);
+  color: ${theme.colors.red};
   margin-top: 0.25rem;
   display: block;
 `;
@@ -532,23 +479,23 @@ var FormControl = import_styled_components3.default.div.withConfig({
 })`
   ${FormLabel} {
     ${(props) => props.isInvalid && import_styled_components3.css`
-        color: var(--red);
+        color: ${theme.colors.red};
       `};
   }
 
   ${Input} {
     ${(props) => props.isInvalid && import_styled_components3.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 && import_styled_components3.css`
-          border: 1px solid var(--red);
+          border: 1px solid ${theme.colors.red};
         `};
     }
   }
@@ -632,8 +579,8 @@ var Icon = import_styled_components4.default.span`
   opacity: 0;
   margin-right: 0.625rem;
 `;
-var Text2 = import_styled_components4.default.span`
-  font-family: "Montserrat", sans-serif;
+var Text = import_styled_components4.default.span`
+  font-family: ${theme.fonts.primary};
   font-size: 1rem;
   line-height: 1.5rem;
   margin-bottom: -2px;
@@ -641,7 +588,7 @@ var Text2 = import_styled_components4.default.span`
   transition: all 0.25s ease;
 `;
 var TextSubmitting = import_styled_components4.default.span`
-  font-family: "Montserrat", sans-serif;
+  font-family: ${theme.fonts.primary};
   font-weight: 400;
   font-size: 1rem;
 
@@ -654,10 +601,10 @@ var LoadingIcon = import_styled_components4.default.span.withConfig({
 
   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"};
 
@@ -701,7 +648,7 @@ var Button = import_styled_components4.default.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) {
@@ -721,12 +668,12 @@ var Button = import_styled_components4.default.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 && import_styled_components4.css`
         transform: unset;
         opacity: 0;
@@ -751,7 +698,7 @@ function Button2({
   isSubmitting = false,
   submittingMessage = "",
   disabled = false,
-  color = "var(--black)",
+  color = "#2F2F2F",
   ...rest
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
@@ -767,7 +714,7 @@ function Button2({
       children: [
         icon && !isSubmitting && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { "data-testid": "button-icon", children: icon }),
         isSubmitting && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LoadingIcon, { hasText: submittingMessage.length > 0 }),
-        (!isSubmitting || submittingMessage.length === 0) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text2, { className: "text", children }),
+        (!isSubmitting || submittingMessage.length === 0) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { className: "text", children }),
         isSubmitting && submittingMessage.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TextSubmitting, { children: submittingMessage })
       ]
     }
@@ -789,35 +736,35 @@ var fadeOut = import_styled_components5.keyframes`
 `;
 var typeStyles = {
   error: import_styled_components5.css`
-    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: import_styled_components5.css`
-    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: import_styled_components5.css`
-    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: import_styled_components5.css`
-    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};
     }
   `
 };
@@ -834,7 +781,7 @@ var AlertContainer = import_styled_components5.default.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;
@@ -914,11 +861,11 @@ var import_styled_components6 = __toESM(require("styled-components"), 1);
 var import_react_international_phone = require("react-international-phone");
 var import_style = require("react-international-phone/style.css");
 var FormLabel2 = import_styled_components6.default.label`
-  font-family: "Montserrat", sans-serif;
+  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;
@@ -926,18 +873,18 @@ var FormLabel2 = import_styled_components6.default.label`
 var StyledPhoneInput = (0, import_styled_components6.default)(import_react_international_phone.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};
     }
   }
 
@@ -948,27 +895,27 @@ var StyledPhoneInput = (0, import_styled_components6.default)(import_react_inter
     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 */
@@ -977,13 +924,13 @@ var StyledPhoneInput = (0, import_styled_components6.default)(import_react_inter
     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;
@@ -991,18 +938,18 @@ var StyledPhoneInput = (0, import_styled_components6.default)(import_react_inter
     &::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;
     }
@@ -1011,7 +958,7 @@ var StyledPhoneInput = (0, import_styled_components6.default)(import_react_inter
 var FormErrorMessage2 = import_styled_components6.default.small`
   font-size: 0.75rem;
   line-height: 1.125rem;
-  color: var(--red);
+  color: ${theme.colors.red};
   margin-top: 0.25rem;
   display: block;
 `;
@@ -1020,26 +967,26 @@ var FormControl2 = import_styled_components6.default.div.withConfig({
 })`
   ${FormLabel2} {
     ${(props) => props.isInvalid && import_styled_components6.css`
-        color: var(--red);
+        color: ${theme.colors.red};
       `};
   }
 
   ${StyledPhoneInput} {
     ${(props) => props.isInvalid && import_styled_components6.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;
         }
       `};
 
     .react-international-phone-input-container {
       ${(props) => props.isInvalid && import_styled_components6.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;
           }
         `};
@@ -1047,7 +994,7 @@ var FormControl2 = import_styled_components6.default.div.withConfig({
 
     .react-international-phone-country-selector-button {
       ${(props) => props.isInvalid && import_styled_components6.css`
-          border-right: 1px solid var(--red);
+          border-right: 1px solid ${theme.colors.red};
         `};
     }
   }
@@ -1116,26 +1063,26 @@ var import_react6 = require("react");
 // src/components/ProductSelect/styles.ts
 var import_styled_components7 = __toESM(require("styled-components"), 1);
 var FormLabel3 = import_styled_components7.default.label`
-  font-family: "Montserrat", sans-serif;
+  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 = import_styled_components7.default.select`
-  font-family: "Montserrat", sans-serif;
+  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%;
@@ -1154,26 +1101,26 @@ var Select = import_styled_components7.default.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 = import_styled_components7.default.small`
   font-size: 0.75rem;
   line-height: 1.125rem;
-  color: var(--red);
+  color: ${theme.colors.red};
   margin-top: 0.25rem;
   display: block;
 `;
@@ -1182,18 +1129,18 @@ var FormControl3 = import_styled_components7.default.div.withConfig({
 })`
   ${FormLabel3} {
     ${(props) => props.isInvalid && import_styled_components7.css`
-        color: var(--red);
+        color: ${theme.colors.red};
       `};
   }
 
   ${Select} {
     ${(props) => props.isInvalid && import_styled_components7.css`
-        border: 1px solid var(--red);
+        border: 1px solid ${theme.colors.red};
       `};
 
     &:focus {
       ${(props) => props.isInvalid && import_styled_components7.css`
-          border: 1px solid var(--red);
+          border: 1px solid ${theme.colors.red};
         `};
     }
   }
@@ -1276,17 +1223,22 @@ var MitreFormComponent = import_react7.default.forwardRef(({
   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] = (0, import_react7.useState)(false);
   const { error, handleError, clearError } = useError();
   const [successMessage, setSuccessMessage] = (0, import_react7.useState)("");
@@ -1384,7 +1336,6 @@ var MitreFormComponent = import_react7.default.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: {
@@ -1394,31 +1345,29 @@ var MitreFormComponent = import_react7.default.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__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(global_default, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(GlobalStyles, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(HeaderContainer, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Title, { $textColor: textColor, children: "Erro no carregamento do formul\xE1rio!" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { $textColor: textColor, children: "N\xE3o foi poss\xEDvel carregar o formul\xE1rio. Tente novamente mais tarde." })
-      ] }) })
-    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ComponentWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(HeaderContainer, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Title, { $textColor: textColor, children: "Erro no carregamento do formul\xE1rio!" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Subtitle, { $textColor: textColor, children: "N\xE3o foi poss\xEDvel carregar o formul\xE1rio. Tente novamente mais tarde." })
+    ] }) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(global_default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(GlobalStyles, {}),
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(ComponentWrapper, { children: [
     error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       Alert,
       {
@@ -1441,8 +1390,8 @@ var MitreFormComponent = import_react7.default.forwardRef(({
     ),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: [
       showHeader && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(HeaderContainer, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Title, { $textColor: textColor, children: "Atendimento por mensagem" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { $textColor: textColor, children: "Informe seus dados e retornaremos a mensagem." })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Title, { $textColor: textColor, children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Subtitle, { $textColor: textColor, children: subtitle })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Form, { $textColor: textColor, onSubmit: handleSubmit(sendMessage), noValidate: true, children: [
         products.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(