@ttoss/forms 0.22.7 → 0.23.1

package/dist/MultistepForm/index.js

@@ -45,7 +45,7 @@ module.exports = __toCommonJS(MultistepForm_exports);
 
 // src/MultistepForm/MultistepForm.tsx
 var React5 = __toESM(require("react"));
-var import_ui19 = require("@ttoss/ui");
+var import_ui20 = require("@ttoss/ui");
 
 // src/MultistepForm/MultistepFooter.tsx
 var import_ui = require("@ttoss/ui");
@@ -71,7 +71,7 @@ var MultistepFooter = ({
 };
 
 // src/MultistepForm/MultistepFormStepper.tsx
-var import_ui16 = require("@ttoss/ui");
+var import_ui17 = require("@ttoss/ui");
 
 // src/index.ts
 var src_exports = {};
@@ -98,11 +98,12 @@ __export(src_exports, {
   useFormGroup: () => useFormGroup,
   useFormState: () => import_react_hook_form6.useFormState,
   useWatch: () => import_react_hook_form6.useWatch,
-  yup: () => yup,
+  yup: () => yup2,
   yupResolver: () => import_yup2.yupResolver
 });
+var import_yup2 = require("@hookform/resolvers/yup");
 
-// src/i18n.ts
+// src/yup/i18n.ts
 var import_react_i18n = require("@ttoss/react-i18n");
 var import_yup = require("yup");
 (0, import_yup.setLocale)({
@@ -142,23 +143,75 @@ var import_yup = require("yup");
   }
 });
 
-// src/index.ts
-var import_yup2 = require("@hookform/resolvers/yup");
+// src/yup/schema.ts
 var yup = __toESM(require("yup"));
 
-// src/Form.tsx
+// src/Brazil/FormFieldCNPJ.tsx
 var import_ui2 = require("@ttoss/ui");
-var import_react_hook_form = require("react-hook-form");
+var import_react_number_format = require("react-number-format");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var isCnpjValid = cnpj => {
+  if (cnpj?.length != 14) {
+    return false;
+  }
+  if (cnpj == "00000000000000" || cnpj == "11111111111111" || cnpj == "22222222222222" || cnpj == "33333333333333" || cnpj == "44444444444444" || cnpj == "55555555555555" || cnpj == "66666666666666" || cnpj == "77777777777777" || cnpj == "88888888888888" || cnpj == "99999999999999") {
+    return false;
+  }
+  let size = cnpj.length - 2;
+  let numbers = cnpj.substring(0, size);
+  const digits = cnpj.substring(size);
+  let soma = 0;
+  let pos = size - 7;
+  for (let i = size; i >= 1; i--) {
+    soma += numbers.charAt(size - i) * pos--;
+    if (pos < 2) {
+      pos = 9;
+    }
+  }
+  let result = soma % 11 < 2 ? 0 : 11 - soma % 11;
+  if (result != digits.charAt(0)) {
+    return false;
+  }
+  size = size + 1;
+  numbers = cnpj.substring(0, size);
+  soma = 0;
+  pos = size - 7;
+  for (let i = size; i >= 1; i--) {
+    soma += numbers.charAt(size - i) * pos--;
+    if (pos < 2) {
+      pos = 9;
+    }
+  }
+  result = soma % 11 < 2 ? 0 : 11 - soma % 11;
+  if (result != digits.charAt(1)) {
+    return false;
+  }
+  return true;
+};
+
+// src/yup/schema.ts
+yup.addMethod(yup.string, "cnpj", function () {
+  return this.test("valid-cnpj", "Invalid CNPJ", value => {
+    return isCnpjValid(value);
+  });
+});
+
+// src/yup/yup.ts
+var yup2 = __toESM(require("yup"));
+
+// src/Form.tsx
+var import_ui3 = require("@ttoss/ui");
+var import_react_hook_form = require("react-hook-form");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var Form = ({
   children,
   onSubmit,
   sx,
   ...formMethods
 }) => {
-  return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_react_hook_form.FormProvider, {
+  return /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_react_hook_form.FormProvider, {
     ...formMethods,
-    children: /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.Box, {
+    children: /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_ui3.Box, {
       as: "form",
       variant: "forms.form",
       onSubmit: formMethods.handleSubmit(data => {
@@ -176,9 +229,9 @@ var React = __toESM(require("react"));
 // src/ErrorMessage.tsx
 var import_react_hook_form2 = require("react-hook-form");
 var import_react_i18n2 = require("@ttoss/react-i18n");
-var import_ui3 = require("@ttoss/ui");
+var import_ui4 = require("@ttoss/ui");
 var import_error_message = require("@hookform/error-message");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var isMessageDescriptor = possibleMessageDescriptor => {
   return possibleMessageDescriptor !== void 0 && possibleMessageDescriptor.defaultMessage !== void 0;
 };
@@ -191,13 +244,13 @@ var ErrorMessage = ({
       errors
     }
   } = (0, import_react_hook_form2.useFormContext)();
-  return /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_error_message.ErrorMessage, {
+  return /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_error_message.ErrorMessage, {
     name,
     errors,
     render: ({
       message
     }) => {
-      return /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_ui3.HelpText, {
+      return /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_ui4.HelpText, {
         negative: true,
         disabled,
         children: (() => {
@@ -205,7 +258,7 @@ var ErrorMessage = ({
             return message;
           }
           if (isMessageDescriptor(message)) {
-            return /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_react_i18n2.FormattedMessage, {
+            return /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_react_i18n2.FormattedMessage, {
               ...message
             });
           }
@@ -218,8 +271,8 @@ var ErrorMessage = ({
 
 // src/FormField.tsx
 var import_react_hook_form3 = require("react-hook-form");
-var import_ui4 = require("@ttoss/ui");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_ui5 = require("@ttoss/ui");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var FormField = ({
   label,
   id: idProp,
@@ -239,8 +292,8 @@ var FormField = ({
   const id = idProp || `form-field-${name}`;
   const memoizedRender = React.useMemo(() => {
     return React.Children.map(render(controllerReturn), child => {
-      return /* @__PURE__ */(0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, {
-        children: [label && /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_ui4.Label, {
+      return /* @__PURE__ */(0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, {
+        children: [label && /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_ui5.Label, {
           "aria-disabled": disabled,
           htmlFor: id,
           tooltip,
@@ -253,7 +306,7 @@ var FormField = ({
       });
     });
   }, [controllerReturn, disabled, onTooltipClick, tooltip, id, label, render]);
-  return /* @__PURE__ */(0, import_jsx_runtime4.jsxs)(import_ui4.Flex, {
+  return /* @__PURE__ */(0, import_jsx_runtime5.jsxs)(import_ui5.Flex, {
     sx: {
       flexDirection: "column",
       width: "100%",
@@ -261,16 +314,16 @@ var FormField = ({
       ...sx
     },
     css,
-    children: [memoizedRender, /* @__PURE__ */(0, import_jsx_runtime4.jsx)(ErrorMessage, {
+    children: [memoizedRender, /* @__PURE__ */(0, import_jsx_runtime5.jsx)(ErrorMessage, {
       name
     })]
   });
 };
 
 // src/FormFieldCheckbox.tsx
-var import_ui5 = require("@ttoss/ui");
+var import_ui6 = require("@ttoss/ui");
 var import_react_hook_form4 = require("react-hook-form");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var FormFieldCheckbox = ({
   label,
   name,
@@ -293,20 +346,20 @@ var FormFieldCheckbox = ({
   });
   const id = `form-field-checkbox-${name}`;
   const error = !!errors[name]?.message;
-  return /* @__PURE__ */(0, import_jsx_runtime5.jsxs)(import_ui5.Flex, {
+  return /* @__PURE__ */(0, import_jsx_runtime6.jsxs)(import_ui6.Flex, {
     sx: {
       flexDirection: "column",
       width: "100%",
       ...sx
     },
-    children: [/* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_ui5.Flex, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_ui6.Flex, {
       sx: {
         alignItems: "center"
       },
-      children: /* @__PURE__ */(0, import_jsx_runtime5.jsxs)(import_ui5.Label, {
+      children: /* @__PURE__ */(0, import_jsx_runtime6.jsxs)(import_ui6.Label, {
         "aria-disabled": checkboxProps.disabled,
         htmlFor: id,
-        children: [/* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_ui5.Checkbox, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_ui6.Checkbox, {
           id,
           ref,
           checked: value,
@@ -317,36 +370,36 @@ var FormFieldCheckbox = ({
           ...checkboxProps
         }), label]
       })
-    }), /* @__PURE__ */(0, import_jsx_runtime5.jsx)(ErrorMessage, {
+    }), /* @__PURE__ */(0, import_jsx_runtime6.jsx)(ErrorMessage, {
       name
     })]
   });
 };
 
 // src/FormFieldPatternFormat.tsx
-var import_ui6 = require("@ttoss/ui");
-var import_react_number_format = require("react-number-format");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_ui7 = require("@ttoss/ui");
+var import_react_number_format2 = require("react-number-format");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var FormFieldPatternFormat = ({
   label,
   name,
   ...patternFormatProps
 }) => {
-  return /* @__PURE__ */(0, import_jsx_runtime6.jsx)(FormField, {
+  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(FormField, {
     name,
     label,
     render: ({
       field,
       fieldState
     }) => {
-      return /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_react_number_format.PatternFormat, {
+      return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_react_number_format2.PatternFormat, {
         name: field.name,
         value: field.value,
         onBlur: field.onBlur,
         onValueChange: values => {
           field.onChange(values.value);
         },
-        customInput: import_ui6.Input,
+        customInput: import_ui7.Input,
         "aria-invalid": Boolean(fieldState.error).valueOf(),
         ...patternFormatProps
       });
@@ -355,13 +408,13 @@ var FormFieldPatternFormat = ({
 };
 
 // src/FormFieldCreditCardNumber.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var FormFieldCreditCardNumber = ({
   label,
   name,
   ...formFieldPatternFormatProps
 }) => {
-  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(FormFieldPatternFormat, {
+  return /* @__PURE__ */(0, import_jsx_runtime8.jsx)(FormFieldPatternFormat, {
     name,
     label,
     format: "#### #### #### ####",
@@ -371,28 +424,28 @@ var FormFieldCreditCardNumber = ({
 };
 
 // src/FormFieldNumericFormat.tsx
-var import_ui7 = require("@ttoss/ui");
-var import_react_number_format2 = require("react-number-format");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_ui8 = require("@ttoss/ui");
+var import_react_number_format3 = require("react-number-format");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var FormFieldNumericFormat = ({
   label,
   name,
   ...numericFormatProps
 }) => {
-  return /* @__PURE__ */(0, import_jsx_runtime8.jsx)(FormField, {
+  return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(FormField, {
     label,
     name,
     render: ({
       field
     }) => {
-      return /* @__PURE__ */(0, import_jsx_runtime8.jsx)(import_react_number_format2.NumericFormat, {
+      return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_react_number_format3.NumericFormat, {
         name: field.name,
         value: field.value,
         onBlur: field.onBlur,
         onValueChange: values => {
           field.onChange(values.floatValue);
         },
-        customInput: import_ui7.Input,
+        customInput: import_ui8.Input,
         ...numericFormatProps
       });
     }
@@ -400,7 +453,7 @@ var FormFieldNumericFormat = ({
 };
 
 // src/FormFieldCurrencyInput.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var FormFieldCurrencyInput = ({
   label,
   name,
@@ -409,7 +462,7 @@ var FormFieldCurrencyInput = ({
   thousandSeparator,
   ...formFieldNumericFormatProps
 }) => {
-  return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(FormFieldNumericFormat, {
+  return /* @__PURE__ */(0, import_jsx_runtime10.jsx)(FormFieldNumericFormat, {
     name,
     label,
     fixedDecimalScale: true,
@@ -424,8 +477,8 @@ var FormFieldCurrencyInput = ({
 };
 
 // src/FormFieldInput.tsx
-var import_ui8 = require("@ttoss/ui");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_ui9 = require("@ttoss/ui");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var FormFieldInput = ({
   label,
   name,
@@ -435,7 +488,7 @@ var FormFieldInput = ({
   defaultValue = "",
   ...inputProps
 }) => {
-  return /* @__PURE__ */(0, import_jsx_runtime10.jsx)(FormField, {
+  return /* @__PURE__ */(0, import_jsx_runtime11.jsx)(FormField, {
     name,
     label,
     disabled: inputProps.disabled,
@@ -447,7 +500,7 @@ var FormFieldInput = ({
       field,
       fieldState
     }) => {
-      return /* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_ui8.Input, {
+      return /* @__PURE__ */(0, import_jsx_runtime11.jsx)(import_ui9.Input, {
         ...inputProps,
         ...field,
         "aria-invalid": fieldState.error ? "true" : void 0
@@ -457,8 +510,8 @@ var FormFieldInput = ({
 };
 
 // src/FormFieldPassword.tsx
-var import_ui9 = require("@ttoss/ui");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_ui10 = require("@ttoss/ui");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var FormFieldPassword = ({
   label,
   name,
@@ -468,7 +521,7 @@ var FormFieldPassword = ({
   defaultValue = "",
   ...inputProps
 }) => {
-  return /* @__PURE__ */(0, import_jsx_runtime11.jsx)(FormField, {
+  return /* @__PURE__ */(0, import_jsx_runtime12.jsx)(FormField, {
     name,
     label,
     disabled: inputProps.disabled,
@@ -480,7 +533,7 @@ var FormFieldPassword = ({
       field,
       fieldState
     }) => {
-      return /* @__PURE__ */(0, import_jsx_runtime11.jsx)(import_ui9.InputPassword, {
+      return /* @__PURE__ */(0, import_jsx_runtime12.jsx)(import_ui10.InputPassword, {
         ...inputProps,
         ...field,
         "aria-invalid": fieldState.error ? "true" : void 0
@@ -490,9 +543,9 @@ var FormFieldPassword = ({
 };
 
 // src/FormFieldRadio.tsx
-var import_ui10 = require("@ttoss/ui");
+var import_ui11 = require("@ttoss/ui");
 var import_react_hook_form5 = require("react-hook-form");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var FormFieldRadio = ({
   label,
   name,
@@ -511,23 +564,23 @@ var FormFieldRadio = ({
     name,
     defaultValue: ""
   });
-  return /* @__PURE__ */(0, import_jsx_runtime12.jsxs)(import_ui10.Flex, {
+  return /* @__PURE__ */(0, import_jsx_runtime13.jsxs)(import_ui11.Flex, {
     sx: {
       flexDirection: "column",
       width: "100%",
       ...sx
     },
-    children: [label && /* @__PURE__ */(0, import_jsx_runtime12.jsx)(import_ui10.Label, {
+    children: [label && /* @__PURE__ */(0, import_jsx_runtime13.jsx)(import_ui11.Label, {
       sx: {
         marginBottom: "md"
       },
       children: label
-    }), /* @__PURE__ */(0, import_jsx_runtime12.jsx)(import_ui10.Box, {
+    }), /* @__PURE__ */(0, import_jsx_runtime13.jsx)(import_ui11.Box, {
       children: options.map(option => {
         const id = `form-field-radio-${name}-${option.value}`;
-        return /* @__PURE__ */(0, import_jsx_runtime12.jsxs)(import_ui10.Label, {
+        return /* @__PURE__ */(0, import_jsx_runtime13.jsxs)(import_ui11.Label, {
           htmlFor: id,
-          children: [/* @__PURE__ */(0, import_jsx_runtime12.jsx)(import_ui10.Radio, {
+          children: [/* @__PURE__ */(0, import_jsx_runtime13.jsx)(import_ui11.Radio, {
             ref,
             onChange,
             onBlur,
@@ -539,15 +592,15 @@ var FormFieldRadio = ({
           }), option.label]
         }, id);
       })
-    }), /* @__PURE__ */(0, import_jsx_runtime12.jsx)(ErrorMessage, {
+    }), /* @__PURE__ */(0, import_jsx_runtime13.jsx)(ErrorMessage, {
       name
     })]
   });
 };
 
 // src/FormFieldSelect.tsx
-var import_ui11 = require("@ttoss/ui");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_ui12 = require("@ttoss/ui");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var FormFieldSelect = ({
   label,
   name,
@@ -560,7 +613,7 @@ var FormFieldSelect = ({
   onTooltipClick,
   ...selectProps
 }) => {
-  return /* @__PURE__ */(0, import_jsx_runtime13.jsx)(FormField, {
+  return /* @__PURE__ */(0, import_jsx_runtime14.jsx)(FormField, {
     name,
     label,
     id,
@@ -574,7 +627,7 @@ var FormFieldSelect = ({
       field,
       fieldState
     }) => {
-      return /* @__PURE__ */(0, import_jsx_runtime13.jsx)(import_ui11.Select, {
+      return /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_ui12.Select, {
         ...selectProps,
         ...field,
         isDisabled: disabled,
@@ -585,8 +638,8 @@ var FormFieldSelect = ({
 };
 
 // src/FormFieldTextarea.tsx
-var import_ui12 = require("@ttoss/ui");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_ui13 = require("@ttoss/ui");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var FormFieldTextarea = ({
   label,
   name,
@@ -594,7 +647,7 @@ var FormFieldTextarea = ({
   ...textareaProps
 }) => {
   const id = `form-field-textarea-${name}`;
-  return /* @__PURE__ */(0, import_jsx_runtime14.jsx)(FormField, {
+  return /* @__PURE__ */(0, import_jsx_runtime15.jsx)(FormField, {
     label,
     name,
     id,
@@ -603,7 +656,7 @@ var FormFieldTextarea = ({
       field,
       fieldState
     }) => {
-      return /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_ui12.Textarea, {
+      return /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_ui13.Textarea, {
         ...field,
         ...textareaProps,
         "aria-invalid": fieldState.error ? "true" : void 0
@@ -614,8 +667,8 @@ var FormFieldTextarea = ({
 
 // src/FormGroup.tsx
 var React2 = __toESM(require("react"));
-var import_ui13 = require("@ttoss/ui");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_ui14 = require("@ttoss/ui");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var FormGroupLevelsManagerContext = React2.createContext({
   levelsLength: 1,
   registerChild: () => {
@@ -631,7 +684,7 @@ var FormGroupLevelsManager = ({
       setLevelsLength(level + 1);
     }
   }, [levelsLength]);
-  return /* @__PURE__ */(0, import_jsx_runtime15.jsx)(FormGroupLevelsManagerContext.Provider, {
+  return /* @__PURE__ */(0, import_jsx_runtime16.jsx)(FormGroupLevelsManagerContext.Provider, {
     value: {
       levelsLength,
       registerChild
@@ -674,7 +727,7 @@ var FormGroupWrapper = ({
     gap: "md",
     width: "100%"
   };
-  return /* @__PURE__ */(0, import_jsx_runtime15.jsxs)(import_ui13.Box, {
+  return /* @__PURE__ */(0, import_jsx_runtime16.jsxs)(import_ui14.Box, {
     "aria-level": level,
     ...boxProps,
     sx: {
@@ -682,18 +735,18 @@ var FormGroupWrapper = ({
       marginBottom: "lg",
       ...boxProps.sx
     },
-    children: [title && /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_ui13.Box, {
+    children: [title && /* @__PURE__ */(0, import_jsx_runtime16.jsx)(import_ui14.Box, {
       sx: {
         marginBottom: "md"
       },
-      children: /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_ui13.Text, {
+      children: /* @__PURE__ */(0, import_jsx_runtime16.jsx)(import_ui14.Text, {
         sx: {
           fontSize: "2xl",
           fontWeight: "bold"
         },
         children: title
       })
-    }), /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_ui13.Flex, {
+    }), /* @__PURE__ */(0, import_jsx_runtime16.jsx)(import_ui14.Flex, {
       sx: childrenContainerSx,
       children
     })]
@@ -704,15 +757,15 @@ var FormGroup = props => {
     level
   } = useFormGroup();
   const currentLevel = level === void 0 ? 0 : level + 1;
-  return /* @__PURE__ */(0, import_jsx_runtime15.jsx)(FormGroupContext.Provider, {
+  return /* @__PURE__ */(0, import_jsx_runtime16.jsx)(FormGroupContext.Provider, {
     value: {
       parentLevel: currentLevel
     },
-    children: currentLevel === 0 ? /* @__PURE__ */(0, import_jsx_runtime15.jsx)(FormGroupLevelsManager, {
-      children: /* @__PURE__ */(0, import_jsx_runtime15.jsx)(FormGroupWrapper, {
+    children: currentLevel === 0 ? /* @__PURE__ */(0, import_jsx_runtime16.jsx)(FormGroupLevelsManager, {
+      children: /* @__PURE__ */(0, import_jsx_runtime16.jsx)(FormGroupWrapper, {
         ...props
       })
-    }) : /* @__PURE__ */(0, import_jsx_runtime15.jsx)(FormGroupWrapper, {
+    }) : /* @__PURE__ */(0, import_jsx_runtime16.jsx)(FormGroupWrapper, {
       ...props
     })
   });
@@ -723,20 +776,20 @@ var import_react_hook_form6 = require("react-hook-form");
 __reExport(src_exports, require("react-hook-form"));
 
 // src/MultistepForm/MultistepFlowMessageImageText.tsx
-var import_ui14 = require("@ttoss/ui");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_ui15 = require("@ttoss/ui");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var MultistepFlowMessageImageText = ({
   src,
   description
 }) => {
-  return /* @__PURE__ */(0, import_jsx_runtime16.jsxs)(import_ui14.Flex, {
+  return /* @__PURE__ */(0, import_jsx_runtime17.jsxs)(import_ui15.Flex, {
     sx: {
       flexDirection: "column",
       paddingY: "xl",
       paddingX: "2xl",
       gap: "xl"
     },
-    children: [/* @__PURE__ */(0, import_jsx_runtime16.jsx)(import_ui14.Image, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime17.jsx)(import_ui15.Image, {
       src,
       sx: {
         width: "184px",
@@ -744,7 +797,7 @@ var MultistepFlowMessageImageText = ({
         objectFit: "cover",
         alignSelf: "center"
       }
-    }), /* @__PURE__ */(0, import_jsx_runtime16.jsx)(import_ui14.Text, {
+    }), /* @__PURE__ */(0, import_jsx_runtime17.jsx)(import_ui15.Text, {
       sx: {
         textAlign: "center"
       },
@@ -754,10 +807,10 @@ var MultistepFlowMessageImageText = ({
 };
 
 // src/MultistepForm/MultistepFlowMessage.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var MultistepFlowMessage = props => {
   if (props.variant === "image-text") {
-    return /* @__PURE__ */(0, import_jsx_runtime17.jsx)(MultistepFlowMessageImageText, {
+    return /* @__PURE__ */(0, import_jsx_runtime18.jsx)(MultistepFlowMessageImageText, {
       ...props
     });
   }
@@ -765,26 +818,26 @@ var MultistepFlowMessage = props => {
 };
 
 // src/MultistepForm/MultistepQuestion.tsx
-var import_ui15 = require("@ttoss/ui");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_ui16 = require("@ttoss/ui");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var MultistepQuestion = ({
   fields,
   question
 }) => {
-  return /* @__PURE__ */(0, import_jsx_runtime18.jsxs)(import_ui15.Flex, {
+  return /* @__PURE__ */(0, import_jsx_runtime19.jsxs)(import_ui16.Flex, {
     sx: {
       flexDirection: "column",
       paddingTop: "xl",
       paddingX: "2xl"
     },
-    children: [/* @__PURE__ */(0, import_jsx_runtime18.jsx)(import_ui15.Text, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime19.jsx)(import_ui16.Text, {
       sx: {
         textAlign: "center",
         fontSize: "lg",
         marginBottom: "xl"
       },
       children: question
-    }), /* @__PURE__ */(0, import_jsx_runtime18.jsx)(import_ui15.Flex, {
+    }), /* @__PURE__ */(0, import_jsx_runtime19.jsx)(import_ui16.Flex, {
       sx: {
         flexDirection: "column",
         gap: "xl"
@@ -795,7 +848,7 @@ var MultistepQuestion = ({
 };
 
 // src/MultistepForm/MultistepFormStepper.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var MultistepFormStepper = ({
   flowMessage,
   fields,
@@ -812,19 +865,19 @@ var MultistepFormStepper = ({
     resolver: schema ? (0, import_yup2.yupResolver)(schema) : void 0,
     defaultValues
   });
-  return /* @__PURE__ */(0, import_jsx_runtime19.jsxs)(Form, {
+  return /* @__PURE__ */(0, import_jsx_runtime20.jsxs)(Form, {
     ...formMethods,
     sx: {
       display: "flex",
       flexDirection: "column"
     },
     onSubmit,
-    children: [/* @__PURE__ */(0, import_jsx_runtime19.jsx)(MultistepFlowMessage, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime20.jsx)(MultistepFlowMessage, {
       ...flowMessage
-    }), /* @__PURE__ */(0, import_jsx_runtime19.jsx)(MultistepQuestion, {
+    }), /* @__PURE__ */(0, import_jsx_runtime20.jsx)(MultistepQuestion, {
       fields,
       question
-    }), /* @__PURE__ */(0, import_jsx_runtime19.jsx)(import_ui16.Button, {
+    }), /* @__PURE__ */(0, import_jsx_runtime20.jsx)(import_ui17.Button, {
       sx: {
         justifyContent: "center",
         marginTop: "2xl",
@@ -840,7 +893,7 @@ var MultistepFormStepper = ({
 };
 
 // src/MultistepForm/MultistepHeader.tsx
-var import_ui17 = require("@ttoss/ui");
+var import_ui18 = require("@ttoss/ui");
 
 // ../react-icons/src/Icon.tsx
 var React4 = __toESM(require("react"));
@@ -2979,9 +3032,9 @@ var Icon = import_react.default.forwardRef((props, ref) => {
 });
 
 // ../react-icons/src/Icon.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var Icon2 = React4.forwardRef((props, ref) => {
-  return /* @__PURE__ */(0, import_jsx_runtime20.jsx)(Icon, {
+  return /* @__PURE__ */(0, import_jsx_runtime21.jsx)(Icon, {
     ref,
     "data-testid": "iconify-icon",
     ...props
@@ -2990,7 +3043,7 @@ var Icon2 = React4.forwardRef((props, ref) => {
 Icon2.displayName = "Icon";
 
 // src/MultistepForm/MultistepHeader.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var MultistepHeaderTitled = ({
   title,
   leftIcon,
@@ -2998,7 +3051,7 @@ var MultistepHeaderTitled = ({
   rightIcon,
   onRightIconClick
 }) => {
-  return /* @__PURE__ */(0, import_jsx_runtime21.jsxs)(import_ui17.Flex, {
+  return /* @__PURE__ */(0, import_jsx_runtime22.jsxs)(import_ui18.Flex, {
     sx: {
       display: "flex",
       justifyContent: "space-between",
@@ -3006,16 +3059,16 @@ var MultistepHeaderTitled = ({
       paddingY: "lg",
       alignItems: "center"
     },
-    children: [/* @__PURE__ */(0, import_jsx_runtime21.jsx)(Icon2, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime22.jsx)(Icon2, {
       icon: leftIcon,
       onClick: onLeftIconClick
-    }), /* @__PURE__ */(0, import_jsx_runtime21.jsx)(import_ui17.Text, {
+    }), /* @__PURE__ */(0, import_jsx_runtime22.jsx)(import_ui18.Text, {
       sx: {
         fontWeight: "bold",
         fontSize: "lg"
       },
       children: title
-    }), /* @__PURE__ */(0, import_jsx_runtime21.jsx)(Icon2, {
+    }), /* @__PURE__ */(0, import_jsx_runtime22.jsx)(Icon2, {
       icon: rightIcon,
       onClick: onRightIconClick
     })]
@@ -3025,14 +3078,14 @@ var MultistepHeaderLogo = ({
   onClose,
   src
 }) => {
-  return /* @__PURE__ */(0, import_jsx_runtime21.jsxs)(import_ui17.Flex, {
+  return /* @__PURE__ */(0, import_jsx_runtime22.jsxs)(import_ui18.Flex, {
     sx: {
       justifyContent: "space-between",
       alignItems: "center",
       paddingX: "xl",
       paddingY: "lg"
     },
-    children: [/* @__PURE__ */(0, import_jsx_runtime21.jsx)(import_ui17.Image, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime22.jsx)(import_ui18.Image, {
       width: 115,
       height: 32,
       sx: {
@@ -3041,19 +3094,19 @@ var MultistepHeaderLogo = ({
         height: 32
       },
       src
-    }), onClose && /* @__PURE__ */(0, import_jsx_runtime21.jsx)(import_ui17.CloseButton, {
+    }), onClose && /* @__PURE__ */(0, import_jsx_runtime22.jsx)(import_ui18.CloseButton, {
       onClick: onClose
     })]
   });
 };
 var MultistepHeader = props => {
   if (props.variant === "logo") {
-    return /* @__PURE__ */(0, import_jsx_runtime21.jsx)(MultistepHeaderLogo, {
+    return /* @__PURE__ */(0, import_jsx_runtime22.jsx)(MultistepHeaderLogo, {
       ...props
     });
   }
   if (props.variant === "titled") {
-    return /* @__PURE__ */(0, import_jsx_runtime21.jsx)(MultistepHeaderTitled, {
+    return /* @__PURE__ */(0, import_jsx_runtime22.jsx)(MultistepHeaderTitled, {
       ...props
     });
   }
@@ -3061,40 +3114,40 @@ var MultistepHeader = props => {
 };
 
 // src/MultistepForm/MultistepNavigation.tsx
-var import_ui18 = require("@ttoss/ui");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_ui19 = require("@ttoss/ui");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var MultistepNavigation = ({
   amountOfSteps,
   currentStepNumber,
   onBack,
   stepsLabel
 }) => {
-  return /* @__PURE__ */(0, import_jsx_runtime22.jsxs)(import_ui18.Flex, {
+  return /* @__PURE__ */(0, import_jsx_runtime23.jsxs)(import_ui19.Flex, {
     sx: {
       justifyContent: "space-between",
       marginX: "2xl"
     },
-    children: [/* @__PURE__ */(0, import_jsx_runtime22.jsxs)(import_ui18.Flex, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime23.jsxs)(import_ui19.Flex, {
       onClick: onBack,
       sx: {
         alignItems: "center",
         cursor: "pointer"
       },
-      children: [/* @__PURE__ */(0, import_jsx_runtime22.jsx)(import_ui18.Text, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime23.jsx)(import_ui19.Text, {
         sx: {
           color: "#ACADB7",
           display: "flex"
         },
-        children: /* @__PURE__ */(0, import_jsx_runtime22.jsx)(Icon2, {
+        children: /* @__PURE__ */(0, import_jsx_runtime23.jsx)(Icon2, {
           icon: "nav-left"
         })
-      }), /* @__PURE__ */(0, import_jsx_runtime22.jsx)(import_ui18.Text, {
+      }), /* @__PURE__ */(0, import_jsx_runtime23.jsx)(import_ui19.Text, {
         sx: {
           color: "#ACADB7"
         },
         children: stepsLabel[currentStepNumber - 2]
       })]
-    }), /* @__PURE__ */(0, import_jsx_runtime22.jsxs)(import_ui18.Text, {
+    }), /* @__PURE__ */(0, import_jsx_runtime23.jsxs)(import_ui19.Text, {
       sx: {
         alignItems: "center",
         color: "#ACADB7"
@@ -3105,7 +3158,7 @@ var MultistepNavigation = ({
 };
 
 // src/MultistepForm/MultistepForm.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var MultistepForm = ({
   nextStepButtonLabel = "Next",
   submitButtonLabel = "Send",
@@ -3128,24 +3181,24 @@ var MultistepForm = ({
       });
     }
   };
-  return /* @__PURE__ */(0, import_jsx_runtime23.jsxs)(import_ui19.Flex, {
+  return /* @__PURE__ */(0, import_jsx_runtime24.jsxs)(import_ui20.Flex, {
     sx: {
       flexDirection: "column",
       maxWidth: "390px",
       background: "#fff"
     },
-    children: [/* @__PURE__ */(0, import_jsx_runtime23.jsx)(MultistepHeader, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime24.jsx)(MultistepHeader, {
       ...props.header
     }), props.steps.map((step, stepIndex) => {
       const isLastStep = stepIndex + 1 === amountOfSteps;
       const isCurrentStep = stepIndex + 1 === currentStep;
-      return /* @__PURE__ */(0, import_jsx_runtime23.jsx)(import_ui19.Flex, {
+      return /* @__PURE__ */(0, import_jsx_runtime24.jsx)(import_ui20.Flex, {
         sx: {
           flexDirection: "column",
           display: isCurrentStep ? "flex" : "none"
         },
         "aria-hidden": !isCurrentStep,
-        children: /* @__PURE__ */(0, import_jsx_runtime23.jsx)(MultistepFormStepper, {
+        children: /* @__PURE__ */(0, import_jsx_runtime24.jsx)(MultistepFormStepper, {
           ...step,
           stepNumber: stepIndex + 1,
           isLastStep,
@@ -3164,14 +3217,14 @@ var MultistepForm = ({
           submitLabel: isLastStep ? submitButtonLabel : nextStepButtonLabel
         })
       }, `form-step-${step.question}`);
-    }), currentStep > 1 && /* @__PURE__ */(0, import_jsx_runtime23.jsx)(MultistepNavigation, {
+    }), currentStep > 1 && /* @__PURE__ */(0, import_jsx_runtime24.jsx)(MultistepNavigation, {
       amountOfSteps,
       currentStepNumber: currentStep,
       onBack: backStep,
       stepsLabel: props.steps.map(s => {
         return s.label;
       })
-    }), props.footer && /* @__PURE__ */(0, import_jsx_runtime23.jsx)(MultistepFooter, {
+    }), props.footer && /* @__PURE__ */(0, import_jsx_runtime24.jsx)(MultistepFooter, {
       footer: props.footer
     })]
   });