@lets-events/react 11.6.5 → 11.7.1

package/dist/index.js

@@ -1066,6 +1066,7 @@ __export(index_exports, {
   Drawer: () => Drawer,
   DropdownMenu: () => DropdownMenu2,
   DropdownMenuItem: () => DropdownMenuItem,
+  EmailFormField: () => EmailFormField,
   ErrorFormMessage: () => ErrorFormMessage,
   Filter: () => Filter,
   FilterItem: () => FilterItem,
@@ -2761,7 +2762,10 @@ var TextFieldStyled = styled(import_themes7.TextField.Root, {
         }
       }
     }
-  ]
+  ],
+  defaultVariants: {
+    typography: "labelSmall"
+  }
 });
 var TextFieldSlotStyled = styled(import_themes7.TextField.Slot, {
   display: "flex",
@@ -2796,7 +2800,17 @@ var InputAddon = styled(TextStyle, {
   display: "flex",
   flexWrap: "nowrap",
   alignItems: "center",
-  lineHeight: 1
+  lineHeight: 1,
+  variants: {
+    color: {
+      default: {
+        borderColor: "$dark300"
+      },
+      error: {
+        borderColor: "$error400"
+      }
+    }
+  }
 });
 var maskFormat = import_mask.format;
 var maskUnformat = import_mask.unformat;
@@ -2825,7 +2839,7 @@ var TextField = import_react2.default.forwardRef(
     ]);
     const maskRef = mask ? (0, import_mask.useMask)(mask) : void 0;
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Flex2, { gap: "0", css: { width: "100%" }, children: [
-      !!addon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(InputAddon, { typography: "labelSmall", children: addon }),
+      !!addon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(InputAddon, { color, typography: "labelSmall", children: addon }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
         TextFieldStyled,
         __spreadProps(__spreadValues({
@@ -2888,27 +2902,17 @@ function TextFieldSlot(_a) {
   }, props), {
     color: void 0
   });
-  return onClick ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     TextFieldSlotStyled,
     __spreadProps(__spreadValues({}, sharedStyles), {
       style: {
         float: position === "flex-start" ? "left" : "right",
         order: position === "flex-start" ? 0 : 2,
         textAlign,
-        zIndex: 2,
-        cursor: "pointer"
-      },
-      onClick: () => onClick(),
-      children
-    })
-  ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    TextFieldSlotStyled,
-    __spreadProps(__spreadValues({}, sharedStyles), {
-      style: {
-        float: position === "flex-start" ? "left" : "right",
-        order: position === "flex-start" ? 0 : 2,
-        textAlign
+        zIndex: onClick ? 2 : void 0,
+        cursor: onClick ? "pointer" : void 0
       },
+      onClick,
       children
     })
   );
@@ -3916,8 +3920,8 @@ var import_react_day_picker = require("react-day-picker");
 function buildFormatLongFn(args) {
   return (options = {}) => {
     const width = options.width ? String(options.width) : args.defaultWidth;
-    const format3 = args.formats[width] || args.formats[args.defaultWidth];
-    return format3;
+    const format4 = args.formats[width] || args.formats[args.defaultWidth];
+    return format4;
   };
 }
 
@@ -4612,11 +4616,11 @@ var formatRelativeLocale2 = {
   other: "P"
 };
 var formatRelative2 = (token, date, _baseDate, _options) => {
-  const format3 = formatRelativeLocale2[token];
-  if (typeof format3 === "function") {
-    return format3(date);
+  const format4 = formatRelativeLocale2[token];
+  if (typeof format4 === "function") {
+    return format4(date);
   }
-  return format3;
+  return format4;
 };
 
 // ../../node_modules/date-fns/locale/pt-BR/_lib/localize.js
@@ -5884,14 +5888,14 @@ function isProtectedDayOfYearToken(token) {
 function isProtectedWeekYearToken(token) {
   return weekYearTokenRE.test(token);
 }
-function warnOrThrowProtectedError(token, format3, input) {
-  const _message = message(token, format3, input);
+function warnOrThrowProtectedError(token, format4, input) {
+  const _message = message(token, format4, input);
   console.warn(_message);
   if (throwTokens.includes(token)) throw new RangeError(_message);
 }
-function message(token, format3, input) {
+function message(token, format4, input) {
   const subject = token[0] === "Y" ? "years" : "days of the month";
-  return `Use \`${token.toLowerCase()}\` instead of \`${token}\` (in \`${format3}\`) for formatting ${subject} to the input \`${input}\`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md`;
+  return `Use \`${token.toLowerCase()}\` instead of \`${token}\` (in \`${format4}\`) for formatting ${subject} to the input \`${input}\`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md`;
 }
 
 // ../../node_modules/date-fns/format.js
@@ -9731,7 +9735,7 @@ function Section(_a) {
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SectionStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
 
-// src/components/FormFields/ErrorFormMessage.tsx
+// src/components/FormFields/subComponents/ErrorFormMessage.tsx
 var import_free_solid_svg_icons4 = require("@fortawesome/free-solid-svg-icons");
 var import_react_fontawesome4 = require("@fortawesome/react-fontawesome");
 var import_jsx_runtime30 = require("react/jsx-runtime");
@@ -9746,7 +9750,7 @@ var ErrorFormMessage = ({ message: message2 }) => {
   ] });
 };
 
-// src/components/FormFields/FormLabel.tsx
+// src/components/FormFields/subComponents/FormLabel.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var FormLabel = ({
   name,
@@ -9816,37 +9820,62 @@ var TextAreaFormField = (_a) => {
 
 // src/components/FormFields/TextFormField.tsx
 var import_react_hook_form2 = require("react-hook-form");
-
-// src/utils/getNestedValue.ts
-function getNestedValue(obj, path) {
-  return path.split(".").reduce((acc, key) => acc == null ? void 0 : acc[key], obj);
-}
-
-// src/components/FormFields/TextFormField.tsx
+var import_react17 = require("react");
+var import_mask2 = require("@react-input/mask");
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var TextFormField = ({
-  name,
-  label,
-  required,
-  placeholder,
-  mask,
-  validation,
-  validationErrorMessage = "Este campo \xE9 obrigat\xF3rio.",
-  disabled = false,
-  value,
-  onChange
-}) => {
-  const {
-    register,
-    formState: { errors }
-  } = (0, import_react_hook_form2.useFormContext)();
-  const validationRules = __spreadValues({
-    required: required ? validationErrorMessage : false
-  }, validation);
-  const _a = register(name, validationRules), { ref } = _a, restFieldProps = __objRest(_a, ["ref"]);
-  const fieldError = getNestedValue(errors, name);
+var TextFormField = (_a) => {
+  var _b = _a, {
+    name,
+    label,
+    required,
+    mask,
+    validate,
+    validationErrorMessage = "Este campo \xE9 obrigat\xF3rio.",
+    onChange,
+    valueFormatter
+  } = _b, inputProps = __objRest(_b, [
+    "name",
+    "label",
+    "required",
+    "mask",
+    "validate",
+    "validationErrorMessage",
+    "onChange",
+    "valueFormatter"
+  ]);
+  const handleValidate = (0, import_react17.useCallback)(
+    (value) => {
+      var _a2;
+      if (!required && value.trim() === "") return true;
+      return (_a2 = validate == null ? void 0 : validate(value)) != null ? _a2 : true;
+    },
+    [validate, required]
+  );
+  const { field, fieldState } = (0, import_react_hook_form2.useController)({
+    name,
+    rules: {
+      required: required ? validationErrorMessage : false,
+      validate: handleValidate,
+      onChange
+    },
+    defaultValue: ""
+  });
+  const fieldError = fieldState.error;
   const haveError = !!fieldError;
   const errorMsg = fieldError == null ? void 0 : fieldError.message;
+  const { value: formValue, onChange: formChange } = field;
+  const formattedValue = (0, import_react17.useMemo)(() => {
+    let value = formValue;
+    if (valueFormatter) value = valueFormatter.format(value);
+    if (mask) value = (0, import_mask2.format)(value != null ? value : "", mask);
+    return value;
+  }, [formValue, valueFormatter, mask]);
+  const handleChange = (e) => {
+    let value = e.target.value;
+    if (mask) value = (0, import_mask2.unformat)(value, mask);
+    if (valueFormatter) value = valueFormatter.unformat(value);
+    formChange(value);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Flex2, { direction: "column", children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       FormLabel,
@@ -9859,16 +9888,13 @@ var TextFormField = ({
     ),
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       TextField,
-      __spreadProps(__spreadValues({
+      __spreadProps(__spreadValues(__spreadValues({
         mask,
-        placeholder,
-        disabled,
         color: haveError ? "error" : "default",
         "aria-labelledby": `${name}-label`
-      }, restFieldProps), {
-        ref,
-        onChange,
-        value
+      }, inputProps), field), {
+        onChange: handleChange,
+        value: formattedValue
       })
     ),
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ErrorFormMessage, { message: errorMsg })
@@ -9881,14 +9907,14 @@ var import_jsx_runtime34 = require("react/jsx-runtime");
 var Form = (_a) => {
   var _b = _a, {
     onSubmit,
-    children,
-    methods
+    children
   } = _b, props = __objRest(_b, [
     "onSubmit",
-    "children",
-    "methods"
+    "children"
   ]);
-  const formMethods = methods || (0, import_react_hook_form3.useForm)(props);
+  const formMethods = (0, import_react_hook_form3.useForm)(__spreadValues({
+    mode: "onTouched"
+  }, props));
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_hook_form3.FormProvider, __spreadProps(__spreadValues({}, formMethods), { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("form", { onSubmit: formMethods.handleSubmit(onSubmit), children }) }));
 };
 
@@ -9906,10 +9932,7 @@ var MultiSelectFormField = (_a) => {
     "required"
   ]);
   var _a2;
-  const {
-    formState: { errors }
-  } = (0, import_react_hook_form4.useFormContext)();
-  const { field } = (0, import_react_hook_form4.useController)({
+  const { field, fieldState } = (0, import_react_hook_form4.useController)({
     name,
     rules: {
       required
@@ -9917,8 +9940,8 @@ var MultiSelectFormField = (_a) => {
     defaultValue: []
   });
   const { value, onChange, ref, onBlur, disabled } = field;
-  const haveError = !!errors[name];
-  const errorMsg = (_a2 = errors[name]) == null ? void 0 : _a2.message;
+  const haveError = !!fieldState.error;
+  const errorMsg = (_a2 = fieldState.error) == null ? void 0 : _a2.message;
   const handleChange = (v) => {
     onChange(v);
   };
@@ -9945,49 +9968,56 @@ var MultiSelectFormField = (_a) => {
   ] });
 };
 
+// src/components/FormFields/utils/validation.ts
+var isValidEmail = (email) => {
+  const emailRexep = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i;
+  return emailRexep.test(email);
+};
+var validateEmail = (errorMsg) => (value) => {
+  return !isValidEmail(value) ? errorMsg : true;
+};
+var minMaxLength = (min, max, errorMsg) => (value) => {
+  var length = value.length;
+  return length > max || length < min ? errorMsg : true;
+};
+
 // src/components/FormFields/PhoneFormField.tsx
-var import_react_hook_form5 = require("react-hook-form");
 var import_jsx_runtime36 = require("react/jsx-runtime");
-var PhoneFormField = (_a) => {
-  var _b = _a, {
-    name,
-    label,
-    required,
-    defaultCountry = "br"
-  } = _b, props = __objRest(_b, [
-    "name",
-    "label",
-    "required",
-    "defaultCountry"
-  ]);
-  var _a2;
-  const {
-    register,
-    formState: { errors },
-    setValue,
-    watch
-  } = (0, import_react_hook_form5.useFormContext)();
-  const haveError = !!errors[name];
-  const errorMsg = (_a2 = errors[name]) == null ? void 0 : _a2.message;
-  const handlePhoneChange = (phone) => {
-    setValue(name, phone);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Flex2, { direction: "column", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-      FormLabel,
-      {
-        name,
-        label,
-        required,
-        haveError
+var PhoneFormField = ({
+  name,
+  label,
+  required
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    TextFormField,
+    {
+      name,
+      label,
+      required,
+      addon: "+ 55",
+      mask: {
+        mask: "(__) _____-____}",
+        replacement: { _: /\d/ }
+      },
+      placeholder: "(00) 00000-0000",
+      type: "tel",
+      validate: minMaxLength(13, 14, "Telefone inv\xE1lido"),
+      valueFormatter: {
+        format(v) {
+          if (!v || v === "") return v;
+          return v.replace(/^\+55/, "");
+        },
+        unformat(v) {
+          if (!v || v === "") return v;
+          return "+55" + v;
+        }
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ErrorFormMessage, { message: errorMsg })
-  ] });
+    }
+  );
 };
 
 // src/components/FormFields/CPFFormField.tsx
-var import_react_hook_form6 = require("react-hook-form");
+var import_react_hook_form5 = require("react-hook-form");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var isValidCPF = (cpf) => {
   cpf = cpf.replace(/[^\d]+/g, "");
@@ -10012,8 +10042,8 @@ var CPFFormField = ({
   validationErrorMessage,
   foreignerLabel
 }) => {
-  const { control, setValue } = (0, import_react_hook_form6.useFormContext)();
-  const foreigner = (0, import_react_hook_form6.useWatch)({ name: "foreigner", control });
+  const { control, setValue } = (0, import_react_hook_form5.useFormContext)();
+  const foreigner = (0, import_react_hook_form5.useWatch)({ name: "foreigner", control });
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Flex2, { direction: "column", children: [
     /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       TextFormField,
@@ -10026,11 +10056,9 @@ var CPFFormField = ({
           mask: "___.___.___-__",
           replacement: { _: /[0-9]/ }
         },
-        validation: {
-          validate: (value) => {
-            if (!required || foreigner) return true;
-            return isValidCPF(value) || validationErrorMessage;
-          }
+        validate: (value) => {
+          if (!required || foreigner) return true;
+          return isValidCPF(value) || validationErrorMessage;
         },
         disabled: foreigner
       }
@@ -10113,12 +10141,10 @@ var CNPJFormField = ({
         mask: "__.___.___/____-__",
         replacement: { _: /[0-9]/ }
       },
-      validation: {
-        validate: (value) => {
-          const isEmpty = value.replace(matchesNonDigit, "").length === 0;
-          if (!required && isEmpty) return true;
-          return isValidCNPJ(value) || validationErrorMessage;
-        }
+      validate: (value) => {
+        const isEmpty = value.replace(matchesNonDigit, "").length === 0;
+        if (!required && isEmpty) return true;
+        return isValidCNPJ(value) || validationErrorMessage;
       }
     }
   );
@@ -10171,12 +10197,10 @@ var BirthDateFormField = ({
         mask: "__/__/____",
         replacement: { _: /[0-9]/ }
       },
-      validation: {
-        validate: (value) => {
-          const isEmpty = value.replace(/[^\d]+/g, "").length === 0;
-          if (!required && isEmpty) return true;
-          return isValidBirthDate(value, language) || validationErrorMessage;
-        }
+      validate: (value) => {
+        const isEmpty = value.replace(/[^\d]+/g, "").length === 0;
+        if (!required && isEmpty) return true;
+        return isValidBirthDate(value, language) || validationErrorMessage;
       }
     }
   );
@@ -10206,23 +10230,27 @@ var IdentityDocumentNumberFormField = ({
         mask: "__.___.___-_",
         replacement: { _: /[0-9]/ }
       },
-      validation: {
-        validate: (value) => {
-          const isEmpty = value.replace(/[^\d]/g, "").length === 0;
-          if (!required && isEmpty) return true;
-          return isValidRG(value) || validationErrorMessage;
-        }
+      validate: (value) => {
+        const isEmpty = value.replace(/[^\d]/g, "").length === 0;
+        if (!required && isEmpty) return true;
+        return isValidRG(value) || validationErrorMessage;
       }
     }
   );
 };
 
 // src/components/FormFields/AddressFormFields/index.tsx
-var import_react18 = require("react");
-var import_react_hook_form10 = require("react-hook-form");
+var import_react_hook_form8 = require("react-hook-form");
+
+// src/components/FormFields/SelectFormField.tsx
+var import_react_hook_form6 = require("react-hook-form");
+
+// src/utils/getNestedValue.ts
+function getNestedValue(obj, path) {
+  return path.split(".").reduce((acc, key) => acc == null ? void 0 : acc[key], obj);
+}
 
 // src/components/FormFields/SelectFormField.tsx
-var import_react_hook_form7 = require("react-hook-form");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var SelectFormField = ({
   name,
@@ -10237,7 +10265,7 @@ var SelectFormField = ({
   const {
     control,
     formState: { errors }
-  } = (0, import_react_hook_form7.useFormContext)();
+  } = (0, import_react_hook_form6.useFormContext)();
   const fieldError = getNestedValue(errors, name);
   const haveError = !!fieldError;
   const errorMsg = fieldError == null ? void 0 : fieldError.message;
@@ -10255,7 +10283,7 @@ var SelectFormField = ({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      import_react_hook_form7.Controller,
+      import_react_hook_form6.Controller,
       {
         control,
         name,
@@ -10340,19 +10368,15 @@ function CountryFormField({
 }
 
 // src/components/FormFields/AddressFormFields/PostalCodeFormField.tsx
-var import_react_hook_form8 = require("react-hook-form");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var PostalCodeFormField = ({
   name,
   label,
   required,
   placeholder,
-  validationErrorMessage
+  validationErrorMessage,
+  onChange
 }) => {
-  const { control } = (0, import_react_hook_form8.useFormContext)();
-  const {
-    field: { onChange, value }
-  } = (0, import_react_hook_form8.useController)({ name, control });
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     TextFormField,
     {
@@ -10364,14 +10388,11 @@ var PostalCodeFormField = ({
         mask: "_____-___",
         replacement: { _: /[0-9]/ }
       },
-      value,
-      onChange,
-      validation: {
-        validate: (value2) => {
-          const isEmpty = value2.replace(/[^\d]/g, "").length === 0;
-          if (!required && isEmpty) return true;
-          return /^\d{8}$/.test(value2.replace(/\D/g, "")) || validationErrorMessage;
-        }
+      onChange: (e) => onChange == null ? void 0 : onChange(e.target.value),
+      validate: (value) => {
+        const isEmpty = value.replace(/[^\d]/g, "").length === 0;
+        if (!required && isEmpty) return true;
+        return /^\d{8}$/.test(value.replace(/\D/g, "")) || validationErrorMessage;
       }
     }
   );
@@ -10428,8 +10449,8 @@ function StateFormField({
 }
 
 // src/components/FormFields/AddressFormFields/CityFormField.tsx
-var import_react17 = require("react");
-var import_react_hook_form9 = require("react-hook-form");
+var import_react18 = require("react");
+var import_react_hook_form7 = require("react-hook-form");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 function CityFormField({
   name,
@@ -10439,11 +10460,11 @@ function CityFormField({
   isBrazil,
   placeholder
 }) {
-  const { control, watch } = (0, import_react_hook_form9.useFormContext)();
+  const { control, watch } = (0, import_react_hook_form7.useFormContext)();
   const selectedState = watch(stateName);
-  const [cities, setCities] = (0, import_react17.useState)([]);
-  const [loading, setLoading] = (0, import_react17.useState)(false);
-  (0, import_react17.useEffect)(() => {
+  const [cities, setCities] = (0, import_react18.useState)([]);
+  const [loading, setLoading] = (0, import_react18.useState)(false);
+  (0, import_react18.useEffect)(() => {
     if (!isBrazil) {
       setCities([]);
       return;
@@ -10483,7 +10504,7 @@ function CityFormField({
     fetchCities();
   }, [selectedState, isBrazil]);
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children: isBrazil && cities.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-    import_react_hook_form9.Controller,
+    import_react_hook_form7.Controller,
     {
       name,
       control,
@@ -10543,28 +10564,27 @@ function AddressFormFields({
   required,
   layout = "column"
 }) {
-  const { control, setValue } = (0, import_react_hook_form10.useFormContext)();
-  const { errors } = (0, import_react_hook_form10.useFormState)({ control });
-  const selectedCountry = (0, import_react_hook_form10.useWatch)({ control, name: `${name}.country` });
-  const cep = (0, import_react_hook_form10.useWatch)({ control, name: `${name}.zip_code` });
+  const { control, setValue } = (0, import_react_hook_form8.useFormContext)();
+  const { errors } = (0, import_react_hook_form8.useFormState)({ control });
+  const selectedCountry = (0, import_react_hook_form8.useWatch)({ control, name: `${name}.country` });
   const isBrazil = selectedCountry === "Brasil";
   const addressErrors = getNestedValue2(errors, name);
   const haveError = !!addressErrors;
-  (0, import_react18.useEffect)(() => {
+  const handleCEPChange = (cep) => {
+    if (!isBrazil) return;
     const cleanedCep = cep == null ? void 0 : cep.replace(/\D/g, "");
-    if (isBrazil && (cleanedCep == null ? void 0 : cleanedCep.length) === 8) {
-      fetch(`https://viacep.com.br/ws/${cleanedCep}/json`).then((res) => res.json()).then((data) => {
-        if (!data.erro) {
-          setValue(`${name}.street`, data.logradouro || "");
-          setValue(`${name}.neighborhood`, data.bairro || "");
-          setValue(`${name}.city`, data.localidade || "");
-          setValue(`${name}.state`, data.uf || "");
-        }
-      }).catch(() => {
-        console.error("Erro ao buscar CEP");
-      });
-    }
-  }, [cep, isBrazil]);
+    if ((cleanedCep == null ? void 0 : cleanedCep.length) !== 8) return;
+    fetch(`https://viacep.com.br/ws/${cleanedCep}/json`).then((res) => res.json()).then((data) => {
+      if (!data.erro) {
+        setValue(`${name}.street`, data.logradouro || "");
+        setValue(`${name}.neighborhood`, data.bairro || "");
+        setValue(`${name}.city`, data.localidade || "");
+        setValue(`${name}.state`, data.uf || "");
+      }
+    }).catch(() => {
+      console.error("Erro ao buscar CEP");
+    });
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(AddressContainerStyled, { layout, children: [
     /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       FormLabel,
@@ -10591,7 +10611,8 @@ function AddressFormFields({
         label: "CEP",
         required,
         placeholder: "00000-000",
-        validationErrorMessage: "CEP inv\xE1lido"
+        validationErrorMessage: "CEP inv\xE1lido",
+        onChange: handleCEPChange
       }
     ) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       TextFormField,
@@ -10642,7 +10663,7 @@ function AddressFormFields({
 }
 
 // src/components/FormFields/RadioGroupFormField.tsx
-var import_react_hook_form11 = require("react-hook-form");
+var import_react_hook_form9 = require("react-hook-form");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var RadioGroupFormField = ({
   name,
@@ -10658,7 +10679,7 @@ var RadioGroupFormField = ({
   const {
     control,
     formState: { errors }
-  } = (0, import_react_hook_form11.useFormContext)();
+  } = (0, import_react_hook_form9.useFormContext)();
   const fieldError = getNestedValue(errors, name);
   const haveError = !!fieldError;
   const errorMsg = fieldError == null ? void 0 : fieldError.message;
@@ -10676,7 +10697,7 @@ var RadioGroupFormField = ({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-      import_react_hook_form11.Controller,
+      import_react_hook_form9.Controller,
       {
         name,
         control,
@@ -10703,7 +10724,7 @@ var RadioGroupFormField = ({
 };
 
 // src/components/FormFields/CheckboxGroupFormField.tsx
-var import_react_hook_form12 = require("react-hook-form");
+var import_react_hook_form10 = require("react-hook-form");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 var CheckboxGroupFormField = ({
   name,
@@ -10719,7 +10740,7 @@ var CheckboxGroupFormField = ({
   const {
     control,
     formState: { errors }
-  } = (0, import_react_hook_form12.useFormContext)();
+  } = (0, import_react_hook_form10.useFormContext)();
   const fieldError = getNestedValue(errors, name);
   const haveError = !!fieldError;
   const errorMsg = fieldError == null ? void 0 : fieldError.message;
@@ -10738,7 +10759,7 @@ var CheckboxGroupFormField = ({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-      import_react_hook_form12.Controller,
+      import_react_hook_form10.Controller,
       {
         name,
         control,
@@ -10768,6 +10789,26 @@ var CheckboxGroupFormField = ({
     /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ErrorFormMessage, { message: errorMsg })
   ] });
 };
+
+// src/components/FormFields/EmailFormField.tsx
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var EmailFormField = ({
+  name,
+  label,
+  required
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    TextFormField,
+    {
+      name,
+      label,
+      required,
+      placeholder: "@mail.com",
+      type: "email",
+      validate: validateEmail("E-mail inv\xE1lido.")
+    }
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddressFormFields,
@@ -10805,6 +10846,7 @@ var CheckboxGroupFormField = ({
   Drawer,
   DropdownMenu,
   DropdownMenuItem,
+  EmailFormField,
   ErrorFormMessage,
   Filter,
   FilterItem,