mitre-form-component 0.0.38 → 0.0.39

package/dist/index.d.cts

@@ -9,10 +9,16 @@ interface MitreFormComponentProps {
     utm_campaign?: string;
     utm_term?: string;
     showHeader?: boolean;
-    colorPrimary?: string;
-    textColor?: string;
     backgroundColor?: string;
+    buttonBackgroundColor?: string;
+    buttonTextColor?: string;
+    textColor?: string;
     innerPadding?: string;
+    inputBackgroundColor?: string;
+    inputFocusBorderColor?: string;
+    inputBorderColor?: string;
+    inputTextColor?: string;
+    inputPlaceholderColor?: string;
 }
 declare const MitreFormComponent: React.ForwardRefExoticComponent<MitreFormComponentProps & React.RefAttributes<HTMLDivElement>>;
 

package/dist/index.d.ts

@@ -9,10 +9,16 @@ interface MitreFormComponentProps {
     utm_campaign?: string;
     utm_term?: string;
     showHeader?: boolean;
-    colorPrimary?: string;
-    textColor?: string;
     backgroundColor?: string;
+    buttonBackgroundColor?: string;
+    buttonTextColor?: string;
+    textColor?: string;
     innerPadding?: string;
+    inputBackgroundColor?: string;
+    inputFocusBorderColor?: string;
+    inputBorderColor?: string;
+    inputTextColor?: string;
+    inputPlaceholderColor?: string;
 }
 declare const MitreFormComponent: React.ForwardRefExoticComponent<MitreFormComponentProps & React.RefAttributes<HTMLDivElement>>;
 

package/dist/index.js

@@ -49,7 +49,7 @@ var FormContainer = styled.div`
   overflow-x: hidden;
   overflow-y: auto;
 
-  background: ${(props) => props.$backgroundColor || " #cecece"};
+  background: ${(props) => props.$backgroundColor || "var(--gray-180)"};
 
   padding: ${(props) => props.$innerPadding || "1rem"};
 
@@ -92,7 +92,6 @@ var Form = styled.form`
   }
 
   input {
-    background: white;
     margin-bottom: 0.75rem;
   }
 
@@ -160,6 +159,7 @@ var GlobalStyles = createGlobalStyle`
     --gray-60: #8F8F8F;
     --gray-100: #B6B6B6;
     --gray-150: #B9B9B9;
+    --gray-180: #CECECE;
     --gray-200: #D2D2D2;
     --gray-300: #EBEBEB;
     --gray-400: #ECECEC;
@@ -172,6 +172,8 @@ var GlobalStyles = createGlobalStyle`
     --green:#57C06E;
     --green-2:#2DCE68;
     --blue:#007BFF;
+
+    --transparent: transparent;
   }
 
   * {
@@ -361,33 +363,33 @@ var Input = styled2.input`
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.5rem;
-  background: var(--gray-500);
-  color: var(--black);
+  background: ${(props) => props.$backgroundColor || "var(--white)"};
+  color: ${(props) => props.$textColor || "var(--black)"};
   padding: 0.5rem;
   border-radius: 0.125rem;
-  border: 1px solid transparent;
+  border: 1px solid ${(props) => props.$borderColor || "transparent"};
   display: block;
   height: 3.125rem;
   width: 100%;
 
   &:focus {
     border-radius: 0.125rem;
-    border: 2px solid ${(props) => props.$bordercolor || "var(--yellow-500)"};
+    border: 2px solid ${(props) => props.$focusBorderColor || "var(--yellow-500)"};
     outline: none;
   }
 
   &::placeholder {
     font-size: 1rem;
     line-height: 1.5rem;
-    color: #b6b6b6;
+    color: ${(props) => props.$placeholderColor || "var(--gray-100)"};
     font-weight: 800;
   }
 
   /* Autofill styles */
   &:-webkit-autofill {
-    background: var(--gray-500) !important;
-    color: var(--black) !important;
-    -webkit-text-fill-color: var(--black) !important;
+    background: ${(props) => props.$backgroundColor || "var(--white)"} !important;
+    color: ${(props) => props.$textColor || "var(--black)"} !important;
+    -webkit-text-fill-color: ${(props) => props.$textColor || "var(--black)"} !important;
     transition: background-color 5000s ease-in-out 0s; /* Prevent flashing */
   }
 
@@ -433,7 +435,21 @@ var FormControl = styled2.div.withConfig({
 
 // 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) => {
+var InputBase = ({
+  id,
+  label,
+  error,
+  showErrorMessage = true,
+  labelTextColor,
+  backgroundColor,
+  borderColor,
+  focusBorderColor,
+  inputPlaceholderColor,
+  inputTextColor,
+  mask = "",
+  type = "text",
+  ...rest
+}, ref) => {
   const handleKeyUp = useCallback(
     (e) => {
       if (mask === "cep") cep(e);
@@ -444,16 +460,20 @@ var InputBase = ({ id, label, error, showErrorMessage = true, borderColor, textC
     [mask]
   );
   return /* @__PURE__ */ jsxs(FormControl, { isInvalid: !!error, children: [
-    !!label && /* @__PURE__ */ jsx(FormLabel, { htmlFor: id, $textColor: textColor, children: label }),
+    !!label && /* @__PURE__ */ jsx(FormLabel, { htmlFor: id, $textColor: labelTextColor, children: label }),
     !mask ? /* @__PURE__ */ jsx(
       Input,
       {
         id,
         ref,
         type,
-        $bordercolor: borderColor,
         "aria-invalid": !!error && showErrorMessage ? "true" : "false",
         autoComplete: rest.autoComplete || "on",
+        $backgroundColor: backgroundColor,
+        $borderColor: borderColor,
+        $focusBorderColor: focusBorderColor,
+        $placeholderColor: inputPlaceholderColor,
+        $textColor: inputTextColor,
         ...rest
       }
     ) : /* @__PURE__ */ jsx(
@@ -462,10 +482,14 @@ var InputBase = ({ id, label, error, showErrorMessage = true, borderColor, textC
         id,
         ref,
         type,
-        $bordercolor: borderColor,
         "aria-invalid": !!error && showErrorMessage ? "true" : "false",
-        onKeyUp: handleKeyUp,
         autoComplete: rest.autoComplete || "on",
+        onKeyUp: handleKeyUp,
+        $backgroundColor: backgroundColor,
+        $borderColor: borderColor,
+        $focusBorderColor: focusBorderColor,
+        $placeholderColor: inputPlaceholderColor,
+        $textColor: inputTextColor,
         ...rest
       }
     ),
@@ -606,7 +630,7 @@ function Button2({
   isSubmitting = false,
   submittingMessage = "",
   disabled = false,
-  color = "#2F2F2F",
+  color = "var(--black)",
   ...rest
 }) {
   return /* @__PURE__ */ jsxs2(
@@ -783,13 +807,19 @@ var FormLabel2 = styled5.label`
 var StyledPhoneInput = styled5(PhoneInput)`
   width: 100%;
   height: 3.125rem;
-  background: var(--gray-500);
+  background: ${(props) => props.$backgroundColor || "var(--white)"};
   font-family: "Montserrat", sans-serif;
+  border: 1px solid ${(props) => props.$borderColor || "transparent"};
+  border-radius: 0.125rem;
 
   &:focus-within {
     border-radius: 0.125rem;
-    border: 2px solid ${(props) => props.$bordercolor || "var(--yellow-500)"};
+    border: 2px solid ${(props) => props.$focusBorderColor || "var(--yellow-500)"};
     outline: none;
+
+    .react-international-phone-country-selector-button {
+      border-right: 1px solid ${(props) => props.$focusBorderColor || "var(--yellow-500)"};
+    }
   }
 
   /* Style for the inner phone input container */
@@ -802,14 +832,14 @@ var StyledPhoneInput = styled5(PhoneInput)`
     font-family: "Montserrat", sans-serif;
     font-size: 1rem;
     font-weight: 500;
-    color: var(--black);
-    background: var(--white);
+    color: ${(props) => props.$textColor || "var(--black)"};
+    background: ${(props) => props.$backgroundColor || "var(--white)"};
   }
 
   /* Style for the country selector button */
   .react-international-phone-country-selector-button {
     height: 100%;
-    background: var(--white);
+    background: ${(props) => props.$backgroundColor || "var(--white)"};
     display: flex;
     align-items: center;
     justify-content: center;
@@ -819,7 +849,7 @@ var StyledPhoneInput = styled5(PhoneInput)`
     cursor: pointer;
     outline: none;
     border: none;
-    border-right: 2px solid var(--gray-300);
+    border-right: 1px solid ${(props) => props.$borderColor || "var(--transparent)"};
   }
 
   /* Style for the input itself */
@@ -828,13 +858,13 @@ var StyledPhoneInput = styled5(PhoneInput)`
     height: 100%;
     padding: 0 0.5rem;
     margin: 0;
-    background: var(--white);
+    background: ${(props) => props.$backgroundColor || "var(--white)"};
     font-family: "Montserrat", sans-serif;
     font-style: normal;
     font-weight: 500;
     font-size: 1rem;
     line-height: 1.5rem;
-    color: var(--black);
+    color: ${(props) => props.$textColor || "var(--black)"};
     outline: none;
     border: none;
     border-radius: 0.125rem;
@@ -842,13 +872,13 @@ var StyledPhoneInput = styled5(PhoneInput)`
     &::placeholder {
       font-size: 1rem;
       line-height: 1.5rem;
-      color: #b6b6b6;
+      color: ${(props) => props.$placeholderColor || "var(--gray-100)"};
       font-weight: 800;
     }
 
     &:-webkit-autofill {
-      background: var(--gray-500) !important;
-      -webkit-text-fill-color: var(--black) !important;
+      background: ${(props) => props.$backgroundColor || "var(--white)"} !important;
+      -webkit-text-fill-color: ${(props) => props.$textColor || "var(--black)"} !important;
       transition: background-color 5000s ease-in-out 0s;
     }
 
@@ -895,14 +925,33 @@ var FormControl2 = styled5.div.withConfig({
           }
         `};
     }
+
+    .react-international-phone-country-selector-button {
+      ${(props) => props.isInvalid && css4`
+          border-right: 1px solid var(--red);
+        `};
+    }
   }
 `;
 
 // src/components/PhoneInput/index.tsx
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var PhoneInputBase = ({ id, label, error, showErrorMessage = true, borderColor, textColor, value, ...rest }, ref) => {
+var PhoneInputBase = ({
+  id,
+  label,
+  error,
+  showErrorMessage = true,
+  labelTextColor,
+  backgroundColor,
+  borderColor,
+  focusBorderColor,
+  inputPlaceholderColor,
+  inputTextColor,
+  value,
+  ...rest
+}, ref) => {
   return /* @__PURE__ */ jsxs4(FormControl2, { isInvalid: !!error, children: [
-    !!label && /* @__PURE__ */ jsx4(FormLabel2, { htmlFor: id, $textColor: textColor, children: label }),
+    !!label && /* @__PURE__ */ jsx4(FormLabel2, { htmlFor: id, $textColor: labelTextColor, children: label }),
     /* @__PURE__ */ jsx4(
       StyledPhoneInput,
       {
@@ -911,7 +960,6 @@ var PhoneInputBase = ({ id, label, error, showErrorMessage = true, borderColor,
         disableCountryGuess: true,
         disableDialCodeAndPrefix: true,
         showDisabledDialCodeAndPrefix: false,
-        $bordercolor: borderColor,
         placeholder: rest.placeholder,
         "aria-invalid": !!error && showErrorMessage ? "true" : "false",
         value: String(value),
@@ -930,7 +978,12 @@ var PhoneInputBase = ({ id, label, error, showErrorMessage = true, borderColor,
           required: rest.required,
           autoFocus: rest.autoFocus,
           autoComplete: rest.autoComplete || "tel"
-        }
+        },
+        $backgroundColor: backgroundColor,
+        $borderColor: borderColor,
+        $focusBorderColor: focusBorderColor,
+        $placeholderColor: inputPlaceholderColor,
+        $textColor: inputTextColor
       }
     ),
     !!error && showErrorMessage && /* @__PURE__ */ jsx4(FormErrorMessage2, { "data-testid": "error-message", children: typeof error === "string" ? error : error?.message })
@@ -974,10 +1027,16 @@ var MitreFormComponent = React3.forwardRef(({
   utm_campaign,
   utm_term,
   showHeader = true,
-  colorPrimary = "#F6C76B",
-  textColor = "#2F2F2F",
-  backgroundColor = "#CECECE",
-  innerPadding = "1rem"
+  backgroundColor = "var(--gray-180)",
+  textColor = "var(--black)",
+  buttonBackgroundColor = "#F6C76B",
+  buttonTextColor = "var(--black)",
+  innerPadding = "1rem",
+  inputBackgroundColor = "var(--white)",
+  inputBorderColor = "var(--transparent)",
+  inputFocusBorderColor = "var(--yellow-500)",
+  inputPlaceholderColor = "var(--gray-100)",
+  inputTextColor = "var(--black)"
 }, ref) => {
   const [loading, setIsLoading] = useState3(false);
   const { error, handleError, clearError } = useError();
@@ -1081,11 +1140,15 @@ var MitreFormComponent = React3.forwardRef(({
             label: "Nome *",
             placeholder: "Digite seu nome",
             ...register("name"),
-            borderColor: colorPrimary,
-            textColor,
             error: errors.name?.message,
             autoComplete: "name",
-            required: true
+            required: true,
+            labelTextColor: textColor,
+            backgroundColor: inputBackgroundColor,
+            borderColor: inputBorderColor,
+            focusBorderColor: inputFocusBorderColor,
+            inputPlaceholderColor,
+            inputTextColor
           }
         ),
         /* @__PURE__ */ jsx5(
@@ -1096,11 +1159,15 @@ var MitreFormComponent = React3.forwardRef(({
             type: "email",
             placeholder: "exemplo@email.com",
             ...register("email"),
-            borderColor: colorPrimary,
-            textColor,
             error: errors.email?.message,
             autoComplete: "email",
-            required: true
+            required: true,
+            labelTextColor: textColor,
+            backgroundColor: inputBackgroundColor,
+            borderColor: inputBorderColor,
+            focusBorderColor: inputFocusBorderColor,
+            inputPlaceholderColor,
+            inputTextColor
           }
         ),
         /* @__PURE__ */ jsx5(
@@ -1118,13 +1185,17 @@ var MitreFormComponent = React3.forwardRef(({
                   id: "phone",
                   label: "Telefone *",
                   placeholder: "(11) 00000-0000",
-                  borderColor: colorPrimary,
-                  textColor,
                   error: errorMsg,
                   required: true,
                   value: field.value.phone,
                   onChange: field.onChange,
-                  name: field.name
+                  name: field.name,
+                  labelTextColor: textColor,
+                  backgroundColor: inputBackgroundColor,
+                  borderColor: inputBorderColor,
+                  focusBorderColor: inputFocusBorderColor,
+                  inputPlaceholderColor,
+                  inputTextColor
                 }
               );
             }
@@ -1132,7 +1203,7 @@ var MitreFormComponent = React3.forwardRef(({
           formKey
         ),
         /* @__PURE__ */ jsx5("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
-        /* @__PURE__ */ jsx5(ButtonContainer, { children: /* @__PURE__ */ jsx5(Button2, { bgColor: colorPrimary, color: textColor, type: "submit", isSubmitting: loading, children: "Enviar mensagem" }) }),
+        /* @__PURE__ */ jsx5(ButtonContainer, { children: /* @__PURE__ */ jsx5(Button2, { bgColor: buttonBackgroundColor, color: buttonTextColor, type: "submit", isSubmitting: loading, children: "Enviar mensagem" }) }),
         /* @__PURE__ */ jsxs5("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",
           " ",