@apia/validations 1.0.4 → 2.0.0

package/dist/index.js

@@ -1,11 +1,11 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { customEvents, propsStore, usePropsSelector, useUpdateEffect, useUnmount, useMount, PropsSelectorUndefinedObject, formatMessage, toBoolean, EventEmitter, getLabel } from '@apia/util';
-import { uniqueId } from 'lodash';
+import { jsx, jsxs } from '@apia/theme/jsx-runtime';
+import { customEvents, propsStore, usePropsSelector, useUpdateEffect, useUnmount, useMount, PropsSelectorUndefinedObject, formatMessage, toBoolean, EventEmitter, StatefulEmitter, useSubscription, getLabel } from '@apia/util';
+import uniqueId from 'lodash-es/uniqueId';
 import React, { useState } from 'react';
 import { shallowEqual } from 'react-redux';
-import { injectStyles, Box, getVariant, Input as Input$1, Label, Radio as Radio$1, Select as Select$1, Switch, Textarea as Textarea$1, Button } from '@apia/theme';
+import { Box, getVariant, injectStyles, Input as Input$1, Label, Radio as Radio$1, Select as Select$1, Switch, Textarea as Textarea$1, Button } from '@apia/theme';
 import { notify } from '@apia/notifications';
-import { RequiredMark, Captcha, Checkbox as Checkbox$1, IconButton, getFieldErrorStyles, DateInput, parseNumberInputValueToNumber, NumberInput, ApiaUtil } from '@apia/components';
+import { RequiredMark, Captcha, Checkbox as Checkbox$1, IconButton, getFieldErrorStyles, DateInput, parseNumberInputValueToNumber, NumberInput, SimpleButton, useModalContext, ApiaUtil } from '@apia/components';
 
 const FormContext = React.createContext(
   {}
@@ -25,58 +25,45 @@ function validateByRules({
   return validationResult;
 }
 
-var __defProp$f = Object.defineProperty;
-var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
-var __hasOwnProp$g = Object.prototype.hasOwnProperty;
-var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$f = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$g.call(b, prop))
-      __defNormalProp$f(a, prop, b[prop]);
-  if (__getOwnPropSymbols$g)
-    for (var prop of __getOwnPropSymbols$g(b)) {
-      if (__propIsEnum$g.call(b, prop))
-        __defNormalProp$f(a, prop, b[prop]);
-    }
-  return a;
-};
-var __async$2 = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-function validateField(field, formName) {
-  return __async$2(this, null, function* () {
-    let validationResult = null;
-    const fieldValue = field.validationValueParser ? field.validationValueParser(field.value) : field.value;
-    if (field.validationFunction) {
-      validationResult = yield field.validationFunction(fieldValue, formName);
-    }
-    if ((!field.validationFunction || validationResult === true) && field.validationRules) {
-      validationResult = validateByRules({
-        rules: field.validationRules,
-        value: fieldValue
-      });
-    } else if (validationResult === null)
-      validationResult = true;
-    return validationResult;
-  });
+function __variableDynamicImportRuntime2__(path) {
+  switch (path) {
+    case './lang/da.ts': return import('./da.js');
+    case './lang/de.ts': return import('./de.js');
+    case './lang/en.ts': return import('./en.js');
+    case './lang/es.ts': return import('./es.js');
+    case './lang/fa.ts': return import('./fa.js');
+    case './lang/fr.ts': return import('./fr.js');
+    case './lang/gr.ts': return import('./gr.js');
+    case './lang/hr.ts': return import('./hr.js');
+    case './lang/hu.ts': return import('./hu.js');
+    case './lang/it.ts': return import('./it.js');
+    case './lang/ja.ts': return import('./ja.js');
+    case './lang/jp.ts': return import('./jp.js');
+    case './lang/nl.ts': return import('./nl.js');
+    case './lang/pl.ts': return import('./pl.js');
+    case './lang/pt.ts': return import('./pt.js');
+    case './lang/ro.ts': return import('./ro.js');
+    default: return new Promise(function(resolve, reject) {
+      (typeof queueMicrotask === 'function' ? queueMicrotask : setTimeout)(
+        reject.bind(null, new Error("Unknown variable dynamic import: " + path))
+      );
+    })
+   }
+ }
+async function validateField(field, formName) {
+  let validationResult = null;
+  const fieldValue = field.validationValueParser ? field.validationValueParser(field.value) : field.value;
+  if (field.validationFunction) {
+    validationResult = await field.validationFunction(fieldValue, formName);
+  }
+  if ((!field.validationFunction || validationResult === true) && field.validationRules) {
+    validationResult = validateByRules({
+      rules: field.validationRules,
+      value: fieldValue
+    });
+  } else if (validationResult === null)
+    validationResult = true;
+  return validationResult;
 }
 function hasSucceedFieldValidation(result) {
   return result === true;
@@ -84,28 +71,26 @@ function hasSucceedFieldValidation(result) {
 function hasSucceedFormValidation(result) {
   return !("errors" in result);
 }
-function focusOnField(formName, field) {
-  return __async$2(this, null, function* () {
-    const formElement = document.getElementById(
-      `ValidationForm-${formName}`
-    );
-    const fieldElement = formElement == null ? void 0 : formElement.querySelector(
-      `[name="${field.name}"], #${field.name}`
-    );
-    if (fieldElement) {
-      return new Promise((resolve) => {
-        const event = new CustomEvent(customEvents.focus, { bubbles: true });
-        fieldElement.focus();
-        fieldElement.dispatchEvent(event);
-        fieldElement.scrollIntoView({
-          block: "center",
-          behavior: "auto"
-        });
-        resolve(true);
+async function focusOnField(formName, field) {
+  const formElement = document.getElementById(
+    `ValidationForm-${formName}`
+  );
+  const fieldElement = formElement?.querySelector(
+    `[name="${field.name}"], #${field.name}`
+  );
+  if (fieldElement) {
+    return new Promise((resolve) => {
+      const event = new CustomEvent(customEvents.focus, { bubbles: true });
+      fieldElement.focus();
+      fieldElement.dispatchEvent(event);
+      fieldElement.scrollIntoView({
+        block: "center",
+        behavior: "auto"
       });
-    }
-    return false;
-  });
+      resolve(true);
+    });
+  }
+  return false;
 }
 let langDefinition;
 function lang(errorCode, ...replacements) {
@@ -118,11 +103,10 @@ function lang(errorCode, ...replacements) {
   return returnString;
 }
 function classToValidationFunction(className) {
-  const match = className == null ? void 0 : className.match(/'confirm:(\w+):(.+?)']/);
+  const match = className?.match(/'confirm:(\w+):(.+?)']/);
   if (match) {
     const validationFunction = (value, formName) => {
-      var _a, _b;
-      return value === ((_a = validationsStore.getFieldStore(formName, match[1])) == null ? void 0 : _a.value) ? true : lang("confirm", (_b = match[2]) != null ? _b : match[1]);
+      return value === validationsStore.getFieldStore(formName, match[1])?.value ? true : lang("confirm", match[2] ?? match[1]);
     };
     return validationFunction;
   }
@@ -153,26 +137,23 @@ function classToValidate(className) {
   }
   return {};
 }
-function initValidations() {
-  return __async$2(this, null, function* () {
-    var _a;
-    if (langDefinition)
-      return;
-    const code = (_a = document.documentElement.lang) != null ? _a : "es";
-    langDefinition = (yield import(
-      /* webpackChunkName: "val-lang-[request]" */
-      `../lang/${code}.ts`
-    ).catch((error) => {
-      notify({
-        type: "danger",
-        message: window.NO_LANGUAGE_EXCEPTION
-      });
-      throw error;
-    })).default;
-  });
+async function initValidations() {
+  if (langDefinition)
+    return;
+  const code = document.documentElement.lang ?? "es";
+  langDefinition = (await __variableDynamicImportRuntime2__(
+    /* webpackChunkName: "val-lang-[request]" */
+    `./lang/${code}.ts`
+  ).catch((error) => {
+    notify({
+      type: "danger",
+      message: window.NO_LANGUAGE_EXCEPTION
+    });
+    throw error;
+  })).default;
 }
 function getValidations(outerValidation) {
-  const validation = __spreadValues$f({}, outerValidation);
+  const validation = { ...outerValidation };
   if (!validation)
     return {
       validate: () => {
@@ -181,8 +162,7 @@ function getValidations(outerValidation) {
     };
   return {
     validate: (outerV) => {
-      var _a;
-      const v = outerV != null ? outerV : "";
+      const v = outerV ?? "";
       let returnValue = true;
       if (returnValue && validation.pattern) {
         let actualRegexp;
@@ -199,7 +179,7 @@ function getValidations(outerValidation) {
           );
         } else
           actualRegexp = validation.pattern;
-        returnValue = !!outerV.match(actualRegexp) || ((_a = validation.patternMessage) != null ? _a : window.MSG_INVALID_REG_EXP);
+        returnValue = !!outerV.match(actualRegexp) || (validation.patternMessage ?? window.MSG_INVALID_REG_EXP);
       }
       if (returnValue === true && validation.maxLength)
         returnValue = v.length <= validation.maxLength || lang("lengthmax", validation.maxLength);
@@ -249,80 +229,33 @@ function getValidations(outerValidation) {
   };
 }
 
-var __defProp$e = Object.defineProperty;
-var __defProps$c = Object.defineProperties;
-var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
-var __hasOwnProp$f = Object.prototype.hasOwnProperty;
-var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$e = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$f.call(b, prop))
-      __defNormalProp$e(a, prop, b[prop]);
-  if (__getOwnPropSymbols$f)
-    for (var prop of __getOwnPropSymbols$f(b)) {
-      if (__propIsEnum$f.call(b, prop))
-        __defNormalProp$e(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
-var __objRest$b = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$f.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$f)
-    for (var prop of __getOwnPropSymbols$f(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$f.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-var __async$1 = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
+var __defProp$9 = Object.defineProperty;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$9 = (obj, key, value) => {
+  __defNormalProp$9(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
 };
 const validationsStore = new class {
   constructor() {
-    this.activeForms = [];
-    this.timeouts = {};
-    this.existsField = (formName, fieldName) => {
-      var _a, _b;
-      return !!((_b = (_a = this.getFormStore(formName)) == null ? void 0 : _a.fields) == null ? void 0 : _b.includes(fieldName));
-    };
-    this.registerField = (formName, registerData, options = { registerIfExists: true }) => {
-      var _a, _b, _c;
+    __publicField$9(this, "activeForms", []);
+    __publicField$9(this, "timeouts", {});
+    __publicField$9(this, "existsField", (formName, fieldName) => {
+      return !!this.getFormStore(formName)?.fields?.includes(fieldName);
+    });
+    __publicField$9(this, "registerField", (formName, registerData, options = { registerIfExists: true }) => {
       const formProps = this.getFormStore(formName);
       if (formProps === void 0)
         this.registerForm(formName);
-      if (!((_a = this.getFormStore(formName)) == null ? void 0 : _a.fields.includes(registerData.name)))
+      if (!this.getFormStore(formName)?.fields.includes(registerData.name))
         this.updateFormStore(formName, {
           fields: [
-            ...(_c = (_b = this.getFormStore(formName)) == null ? void 0 : _b.fields) != null ? _c : [],
+            ...this.getFormStore(formName)?.fields ?? [],
             registerData.name
           ]
         });
       const existsInStore = this.getFieldStore(formName, registerData.name);
-      if (((formProps == null ? void 0 : formProps.avoidFieldsOverride) || !options.registerIfExists) && existsInStore) {
-        const _d = registerData, updateData = __objRest$b(_d, ["value"]);
+      if ((formProps?.avoidFieldsOverride || !options.registerIfExists) && existsInStore) {
+        const { value, ...updateData } = registerData;
         this.updateField(formName, updateData, {
           markFormAsTouched: false,
           avoidPropagation: options.avoidPropagation
@@ -335,12 +268,11 @@ const validationsStore = new class {
         registerData,
         options.avoidPropagation
       );
-    };
+    });
     /**
      * Inicializa el estado de un nuevo formulario
      */
-    this.registerForm = (formName, props = { avoidFieldsOverride: false }) => {
-      var _a;
+    __publicField$9(this, "registerForm", (formName, props = { avoidFieldsOverride: false }) => {
       if (this.activeForms.includes(formName)) {
         this.updateFormStore(formName, {
           avoidFieldsOverride: props.avoidFieldsOverride
@@ -348,7 +280,7 @@ const validationsStore = new class {
         if (props.initialValues)
           Object.entries(props.initialValues).forEach(([fieldId, fieldProps]) => {
             if (fieldProps instanceof Object)
-              this.updateField(formName, __spreadValues$e({ name: fieldId }, fieldProps));
+              this.updateField(formName, { name: fieldId, ...fieldProps });
           });
         return;
       }
@@ -361,15 +293,15 @@ const validationsStore = new class {
         name: formName,
         validationResult: null
       });
-      Object.entries((_a = props.initialValues) != null ? _a : {}).forEach(([name, value]) => {
+      Object.entries(props.initialValues ?? {}).forEach(([name, value]) => {
         this.updateField(formName, { name, value }, { markFormAsTouched: false });
       });
-    };
+    });
     /**
      * Setea el valor del campo con el nombre provisto. Si el campo no existe
      * en el formulario lo crea.
      */
-    this.setFieldValue = (formName, fieldName, newValue, options) => {
+    __publicField$9(this, "setFieldValue", (formName, fieldName, newValue, options) => {
       if (!this.getFieldStore(formName, fieldName))
         this.registerField(formName, { name: fieldName, value: newValue });
       else
@@ -384,16 +316,16 @@ const validationsStore = new class {
         );
       if (this.getFormStore(formName).isValid)
         this.updateFormStore(formName, { isValid: false });
-    };
-    this.setFormIsTouched = (formName, isTouched = true) => {
+    });
+    __publicField$9(this, "setFormIsTouched", (formName, isTouched = true) => {
       this.updateFormStore(formName, { isTouched });
-    };
+    });
     /**
      * Elimina un campo del registro de validación de un formulario. De esta
      * forma cualquier validación que pudiera aplicarse sobre el mismo, ya no se
      * aplicará.
      */
-    this.unregisterField = (formName, fieldName) => {
+    __publicField$9(this, "unregisterField", (formName, fieldName) => {
       if (this.getFormStore(formName))
         this.updateFormStore(formName, {
           fields: this.getFormStore(formName).fields.filter((current) => {
@@ -401,14 +333,13 @@ const validationsStore = new class {
           })
         });
       propsStore.removeField(this.makeFieldName(formName, fieldName));
-    };
+    });
     /**
      * Elimina un formulario del store de validación junto con todos los campos
      * asociados al mismo.
      */
-    this.unregisterForm = (formName) => {
-      var _a, _b;
-      (_b = (_a = this.getFormStore(formName)) == null ? void 0 : _a.fields) == null ? void 0 : _b.forEach((current) => {
+    __publicField$9(this, "unregisterForm", (formName) => {
+      this.getFormStore(formName)?.fields?.forEach((current) => {
         return propsStore.removeField(this.makeFieldName(formName, current));
       });
       this.activeForms = this.activeForms.filter((current) => {
@@ -416,42 +347,42 @@ const validationsStore = new class {
       });
       propsStore.removeField(this.makeFormName(formName));
       delete this.timeouts[formName];
-    };
+    });
     /**
      * Actualiza las propiedades de un campo, si no existe, lo registra en el
      * formulario.
      */
-    this.updateField = (formName, field, options) => {
-      var _a, _b;
-      const previousValue = (_a = this.getFieldStore(formName, field.name)) == null ? void 0 : _a.value;
+    __publicField$9(this, "updateField", (formName, field, options) => {
+      const previousValue = this.getFieldStore(formName, field.name)?.value;
       if (this.getFormStore(formName))
         this.updateFormStore(formName, { isValid: false });
       else
         this.registerForm(formName);
-      const isTouched = field.value !== void 0 && field.value !== previousValue && (options == null ? void 0 : options.markFormAsTouched) !== false;
+      const isTouched = field.value !== void 0 && field.value !== previousValue && options?.markFormAsTouched !== false;
       if (!this.existsField(formName, field.name))
         this.registerField(formName, field, {
-          avoidPropagation: options == null ? void 0 : options.avoidPropagation
+          avoidPropagation: options?.avoidPropagation
         });
       this.updateFieldStore(
         formName,
         field.name,
-        __spreadProps$c(__spreadValues$e({}, field), {
-          isTouched: isTouched || ((_b = this.getFieldStore(formName, field.name)) == null ? void 0 : _b.isTouched)
-        }),
-        options == null ? void 0 : options.avoidPropagation
+        {
+          ...field,
+          isTouched: isTouched || this.getFieldStore(formName, field.name)?.isTouched
+        },
+        options?.avoidPropagation
       );
       if (isTouched)
         this.setFormIsTouched(formName);
-    };
+    });
     /**
      * Actualiza múltiples campos al mismo tiempo.
      */
-    this.updateMultipleFields = (formName, fields, options) => {
+    __publicField$9(this, "updateMultipleFields", (formName, fields, options) => {
       fields.forEach((current) => {
         return this.updateField(formName, current, options);
       });
-    };
+    });
     /**
      * Ejecuta la validación sobre un formulario. En caso de que la validación
      * falle, se intenta hacer foco sobre el campo que no pudo validar.
@@ -476,8 +407,7 @@ const validationsStore = new class {
      *   console.error('Validation error', result);
      * }
      */
-    this.validateForm = (formName) => __async$1(this, null, function* () {
-      var _a;
+    __publicField$9(this, "validateForm", async (formName) => {
       const state = this.getFormStore(formName);
       const fields = state.fields.map((current) => {
         return this.getFieldStore(formName, current);
@@ -493,10 +423,10 @@ const validationsStore = new class {
       for (const field of fields.filter((current) => {
         return current !== void 0;
       })) {
-        const validationResult = yield validateField(field, formName);
+        const validationResult = await validateField(field, formName);
         fieldsWithError[field.name] = validationResult;
         if (hasSucceedFieldValidation(validationResult)) {
-          validationValues.submitValues[(_a = field.submitName) != null ? _a : field.name] = field.submitValueParser ? field.submitValueParser(field.value) : field.value;
+          validationValues.submitValues[field.submitName ?? field.name] = field.submitValueParser ? await field.submitValueParser(field.value) : field.value;
           validationValues.values[field.name] = field.value;
         } else {
           this.updateField(formName, {
@@ -504,7 +434,7 @@ const validationsStore = new class {
             error: validationResult
           });
           if (!hasFiredFocus) {
-            if (yield focusOnField(formName, field))
+            if (await focusOnField(formName, field))
               hasFiredFocus = true;
           }
           existsErrors = true;
@@ -543,7 +473,10 @@ const validationsStore = new class {
   updateFieldStore(formName, fieldName, props, noEmit) {
     propsStore.updateField(
       this.makeFieldName(formName, fieldName),
-      __spreadValues$e(__spreadValues$e({}, this.getFieldStore(formName, fieldName)), props),
+      {
+        ...this.getFieldStore(formName, fieldName),
+        ...props
+      },
       { noEmit }
     );
   }
@@ -593,45 +526,6 @@ const formStyles = {
   }
 };
 
-var __defProp$d = Object.defineProperty;
-var __defProps$b = Object.defineProperties;
-var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
-var __hasOwnProp$e = Object.prototype.hasOwnProperty;
-var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$d = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$e.call(b, prop))
-      __defNormalProp$d(a, prop, b[prop]);
-  if (__getOwnPropSymbols$e)
-    for (var prop of __getOwnPropSymbols$e(b)) {
-      if (__propIsEnum$e.call(b, prop))
-        __defNormalProp$d(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 const Form = ({
   avoidFieldsOverride,
   avoidFieldsTouch,
@@ -644,7 +538,7 @@ const Form = ({
   unregisterOnUnmount
 }) => {
   const actualName = React.useMemo(
-    () => name != null ? name : `ValidationForm${uniqueId()}`,
+    () => name ?? `ValidationForm${uniqueId()}`,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
@@ -668,21 +562,19 @@ const Form = ({
     () => ({
       avoidFieldsTouch,
       name: actualName,
-      validate: () => __async(void 0, null, function* () {
-        return validationsStore.validateForm(actualName);
-      })
+      validate: async () => validationsStore.validateForm(actualName)
     }),
     [actualName, avoidFieldsTouch]
   );
   useUnmount(() => {
-    onUnmount == null ? void 0 : onUnmount();
+    onUnmount?.();
     if (unregisterOnUnmount !== false)
       validationsStore.unregisterForm(actualName);
   });
   const [hasRegistered, setHasRegistered] = React.useState(false);
   useMount(() => {
     validationsStore.registerForm(actualName, {
-      avoidFieldsOverride: avoidFieldsOverride != null ? avoidFieldsOverride : initialValues !== void 0,
+      avoidFieldsOverride: avoidFieldsOverride ?? initialValues !== void 0,
       initialValues
     });
     setHasRegistered(true);
@@ -691,39 +583,22 @@ const Form = ({
     return null;
   return /* @__PURE__ */ jsx(FormContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     Box,
-    __spreadProps$b(__spreadValues$d(__spreadProps$b(__spreadValues$d({
-      as: "form"
-    }, getVariant("layout.common.validations.form")), {
+    {
+      as: "form",
+      ...getVariant("layout.common.validations.form"),
       className,
-      id: `ValidationForm-${actualName}`
-    }), { name: actualName }), {
+      id: `ValidationForm-${actualName}`,
+      ...{ name: actualName },
       onSubmit: handleSubmit,
       children
-    })
+    }
   ) });
 };
 injectStyles("layout.common.validations.form", formStyles);
 
-var __defProp$c = Object.defineProperty;
-var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
-var __hasOwnProp$d = Object.prototype.hasOwnProperty;
-var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$c = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$d.call(b, prop))
-      __defNormalProp$c(a, prop, b[prop]);
-  if (__getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(b)) {
-      if (__propIsEnum$d.call(b, prop))
-        __defNormalProp$c(a, prop, b[prop]);
-    }
-  return a;
-};
 function useField(fieldDefinition) {
-  var _a;
   const formContext = React.useContext(FormContext);
-  const formName = (_a = fieldDefinition.formName) != null ? _a : formContext.name;
+  const formName = fieldDefinition.formName ?? formContext.name;
   if (!formName) {
     console.error(fieldDefinition);
     throw new Error(
@@ -733,7 +608,10 @@ function useField(fieldDefinition) {
   React.useMemo(() => {
     validationsStore.registerField(
       formName,
-      __spreadValues$c(__spreadValues$c({}, fieldDefinition), fieldDefinition.initialValue !== void 0 ? { value: fieldDefinition.initialValue } : null),
+      {
+        ...fieldDefinition,
+        ...fieldDefinition.initialValue !== void 0 ? { value: fieldDefinition.initialValue } : null
+      },
       {
         avoidPropagation: true,
         registerIfExists: !fieldDefinition.avoidRegisterIfExists
@@ -741,8 +619,7 @@ function useField(fieldDefinition) {
     );
   }, []);
   useMount(() => {
-    var _a2;
-    if (fieldDefinition.initialValue !== void 0 && (!((_a2 = validationsStore.getFormStore(formName)) == null ? void 0 : _a2.avoidFieldsOverride) && !fieldDefinition.avoidRegisterIfExists || validationsStore.getFieldStore(formName, fieldDefinition.name) === void 0))
+    if (fieldDefinition.initialValue !== void 0 && (!validationsStore.getFormStore(formName)?.avoidFieldsOverride && !fieldDefinition.avoidRegisterIfExists || validationsStore.getFieldStore(formName, fieldDefinition.name) === void 0))
       validationsStore.setFieldValue(
         formName,
         fieldDefinition.name,
@@ -807,7 +684,7 @@ function useField(fieldDefinition) {
       },
       [formName, fieldDefinition.name]
     ),
-    value: localValue != null ? localValue : fieldDefinition.initialValue
+    value: localValue ?? fieldDefinition.initialValue
   };
 }
 
@@ -834,36 +711,20 @@ function useFieldValue({ formName, name }) {
     );
   }
   const { value } = useFieldSelector(
-    formName != null ? formName : hookFormName,
+    formName ?? hookFormName,
     name,
     (props) => {
       return props;
     },
     (a, b) => {
-      if (a === PropsSelectorUndefinedObject && (b == null ? void 0 : b.value) === void 0)
+      if (a === PropsSelectorUndefinedObject && b?.value === void 0)
         return true;
-      return shallowEqual(a == null ? void 0 : a.value, b == null ? void 0 : b.value);
+      return shallowEqual(a?.value, b?.value);
     }
   );
   return value;
 }
 
-var __defProp$b = Object.defineProperty;
-var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
-var __hasOwnProp$c = Object.prototype.hasOwnProperty;
-var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$b = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$c.call(b, prop))
-      __defNormalProp$b(a, prop, b[prop]);
-  if (__getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(b)) {
-      if (__propIsEnum$c.call(b, prop))
-        __defNormalProp$b(a, prop, b[prop]);
-    }
-  return a;
-};
 function useValidationClass({
   customValidation,
   formName,
@@ -878,16 +739,12 @@ function useValidationClass({
     [validationClass]
   );
   const initialValidationFunction = React.useMemo(
-    () => {
-      var _a;
-      return (_a = validationsStore.getFieldStore(formName != null ? formName : contextFormName, name)) == null ? void 0 : _a.validationFunction;
-    },
+    () => validationsStore.getFieldStore(formName ?? contextFormName, name)?.validationFunction,
     [contextFormName, formName, name]
   );
   const actualValidationFunction = React.useCallback(
     (currentValue, parameterFormName) => {
-      var _a, _b;
-      let result = (_b = (_a = initialValidationFunction == null ? void 0 : initialValidationFunction(currentValue, parameterFormName)) != null ? _a : validationFunction == null ? void 0 : validationFunction(currentValue, parameterFormName)) != null ? _b : true;
+      let result = initialValidationFunction?.(currentValue, parameterFormName) ?? validationFunction?.(currentValue, parameterFormName) ?? true;
       if (typeof result === "string")
         return result;
       if (customValidation) {
@@ -907,7 +764,10 @@ function useValidationClass({
     ]
   );
   const actualValidationRules = React.useMemo(() => {
-    return __spreadValues$b(__spreadValues$b({}, validationRules), validationClass !== void 0 ? classToValidate(validationClass) : {});
+    return {
+      ...validationRules,
+      ...validationClass !== void 0 ? classToValidate(validationClass) : {}
+    };
   }, [validationClass, validationRules]);
   return {
     actualValidationFunction,
@@ -918,7 +778,7 @@ function useValidationClass({
 const ValidationError = ({ name }) => {
   const formContext = useFormContext();
   const error = useFieldSelector(formContext.name, name, (state) => {
-    return state == null ? void 0 : state.error;
+    return state?.error;
   });
   return error ? /* @__PURE__ */ jsx(
     Box,
@@ -933,70 +793,28 @@ const ValidationError = ({ name }) => {
   ) : null;
 };
 
-var __defProp$a = Object.defineProperty;
-var __defProps$a = Object.defineProperties;
-var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
-var __hasOwnProp$b = Object.prototype.hasOwnProperty;
-var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$a = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$b.call(b, prop))
-      __defNormalProp$a(a, prop, b[prop]);
-  if (__getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(b)) {
-      if (__propIsEnum$b.call(b, prop))
-        __defNormalProp$a(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
-var __objRest$a = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$b.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$b.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const FieldWrapper = (_a) => {
-  var _b = _a, {
-    name,
-    label,
-    avoidSemicolon,
-    children,
-    className,
-    as = "label",
-    type
-  } = _b, props = __objRest$a(_b, [
-    "name",
-    "label",
-    "avoidSemicolon",
-    "children",
-    "className",
-    "as",
-    "type"
-  ]);
+const FieldWrapper = ({
+  name,
+  label,
+  avoidSemicolon,
+  children,
+  className,
+  as = "label",
+  type,
+  ...props
+}) => {
   const { name: formName } = useFormContext();
   const isRequired = useFieldSelector(
     formName,
     name,
-    (global) => {
-      var _a2;
-      return (_a2 = global == null ? void 0 : global.validationRules) == null ? void 0 : _a2.required;
-    }
+    (global) => global?.validationRules?.required
   );
   if (type === "checkbox") {
     return /* @__PURE__ */ jsxs(
       Box,
-      __spreadProps$a(__spreadValues$a({
-        className: `fieldWrapper checkboxWrapper ${className != null ? className : ""}`
-      }, props), {
+      {
+        className: `fieldWrapper checkboxWrapper ${className ?? ""}`,
+        ...props,
         as,
         children: [
           window.SHOW_REQUIRED_POSITION !== "0" && label && /* @__PURE__ */ jsx(RequiredMark, { isRequired }),
@@ -1007,7 +825,7 @@ const FieldWrapper = (_a) => {
           ] }),
           /* @__PURE__ */ jsx(ValidationError, { name })
         ]
-      })
+      }
     );
   }
   if (!label) {
@@ -1016,8 +834,8 @@ const FieldWrapper = (_a) => {
       /* @__PURE__ */ jsx(ValidationError, { name })
     ] });
   }
-  return /* @__PURE__ */ jsxs(Box, __spreadProps$a(__spreadValues$a({ className: `fieldWrapper ${className != null ? className : ""}` }, props), { as, children: [
-    /* @__PURE__ */ jsxs(Box, { as: "span", children: [
+  return /* @__PURE__ */ jsxs(Box, { className: `fieldWrapper ${className ?? ""}`, ...props, as, children: [
+    /* @__PURE__ */ jsxs(Box, { as: "span", className: "fieldWrapper__label", children: [
       window.SHOW_REQUIRED_POSITION !== "0" && label && /* @__PURE__ */ jsx(RequiredMark, { isRequired }),
       label,
       !avoidSemicolon && label && /* @__PURE__ */ jsx("abbr", { className: "semicolon", children: ": " }),
@@ -1025,24 +843,9 @@ const FieldWrapper = (_a) => {
     ] }),
     children,
     /* @__PURE__ */ jsx(ValidationError, { name })
-  ] }));
+  ] });
 };
 
-var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
-var __hasOwnProp$a = Object.prototype.hasOwnProperty;
-var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
-var __objRest$9 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$a.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$a)
-    for (var prop of __getOwnPropSymbols$a(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$a.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 const InnerCaptcha = ({
   className,
   name,
@@ -1059,7 +862,7 @@ const InnerCaptcha = ({
   submitValueParser,
   validationValueParser
 }) => {
-  const _a = useField({
+  const { error, updateValidations, onChange, isTouched, ...validationProps } = useField({
     name,
     avoidRegisterIfExists,
     formName,
@@ -1069,7 +872,7 @@ const InnerCaptcha = ({
     submitValueParser,
     validationValueParser,
     validationRules: { required: true }
-  }), { error, updateValidations, onChange, isTouched } = _a, validationProps = __objRest$9(_a, ["error", "updateValidations", "onChange", "isTouched"]);
+  });
   const handleOnChange = React.useCallback(
     (ev) => {
       onChange(ev);
@@ -1082,7 +885,7 @@ const InnerCaptcha = ({
     {
       name,
       label,
-      className: `input ${className != null ? className : ""}`,
+      className: `input ${className ?? ""}`,
       avoidSemicolon,
       children: /* @__PURE__ */ jsx(
         Captcha,
@@ -1098,78 +901,29 @@ const InnerCaptcha = ({
   );
 };
 
-var __defProp$9 = Object.defineProperty;
-var __defProps$9 = Object.defineProperties;
-var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
-var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
-var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$9 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$9.call(b, prop))
-      __defNormalProp$9(a, prop, b[prop]);
-  if (__getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(b)) {
-      if (__propIsEnum$9.call(b, prop))
-        __defNormalProp$9(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
-var __objRest$8 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$9.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$9.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 const Checkbox = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      avoidSemicolon,
-      className,
-      label,
-      native,
-      onChange: outerOnChange,
-      type,
-      avoidRegisterIfExists: avoidRegisterIfExists,
-      formName,
-      initialValue,
-      name,
-      removeOnUnmount,
-      submitValueParser,
-      validationClass,
-      validationFunction,
-      validationRules,
-      value
-    } = _b, props = __objRest$8(_b, [
-      "avoidSemicolon",
-      "className",
-      "label",
-      "native",
-      "onChange",
-      "type",
-      /**
-       * useField
-       */
-      "avoidRegisterIfExists",
-      "formName",
-      "initialValue",
-      "name",
-      "removeOnUnmount",
-      "submitValueParser",
-      "validationClass",
-      "validationFunction",
-      "validationRules",
-      "value"
-    ]);
-    var _a2, _c;
+  ({
+    avoidSemicolon,
+    className,
+    label,
+    native,
+    onChange: outerOnChange,
+    type,
+    /**
+     * useField
+     */
+    avoidRegisterIfExists,
+    formName,
+    initialValue,
+    name,
+    removeOnUnmount,
+    submitValueParser,
+    validationClass,
+    validationFunction,
+    validationRules,
+    value,
+    ...props
+  }, ref) => {
     const { actualValidationFunction, actualValidationRules } = useValidationClass({
       formName,
       name,
@@ -1177,38 +931,36 @@ const Checkbox = React.forwardRef(
       validationFunction,
       validationRules
     });
-    const _b2 = useField({
+    const {
+      value: innerValue,
+      onChange,
+      updateValidations,
+      isTouched,
+      ...inputProps
+    } = useField({
       avoidRegisterIfExists,
       formName,
       name,
-      initialValue: (_a2 = initialValue === true || initialValue === "on") != null ? _a2 : false,
+      initialValue: (initialValue === true || initialValue === "on") ?? false,
       removeOnUnmount,
       submitValueParser,
       validationFunction: actualValidationFunction,
       validationRules: actualValidationRules
-    }), {
-      value: innerValue,
-      onChange,
-      updateValidations,
-      isTouched
-    } = _b2, inputProps = __objRest$8(_b2, [
-      "value",
-      "onChange",
-      "updateValidations",
-      "isTouched"
-    ]);
+    });
     return /* @__PURE__ */ jsx(
       FieldWrapper,
       {
         name,
         label,
-        className: `checkbox ${className != null ? className : ""}`,
+        className: `checkbox ${className ?? ""}`,
         avoidSemicolon,
         children: /* @__PURE__ */ jsx(
           Checkbox$1,
-          __spreadProps$9(__spreadValues$9(__spreadValues$9({}, props), inputProps), {
+          {
+            ...props,
+            ...inputProps,
             native,
-            "aria-label": (_c = props["aria-label"]) != null ? _c : label,
+            "aria-label": props["aria-label"] ?? label,
             onChange: (ev) => {
               onChange(ev.target.checked);
               if (outerOnChange)
@@ -1216,7 +968,7 @@ const Checkbox = React.forwardRef(
             },
             checked: innerValue === true || innerValue === "on",
             ref
-          })
+          }
         )
       }
     );
@@ -1224,78 +976,30 @@ const Checkbox = React.forwardRef(
 );
 Checkbox.displayName = "Checkbox";
 
-var __defProp$8 = Object.defineProperty;
-var __defProps$8 = Object.defineProperties;
-var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
-var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
-var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$8 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$8.call(b, prop))
-      __defNormalProp$8(a, prop, b[prop]);
-  if (__getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(b)) {
-      if (__propIsEnum$8.call(b, prop))
-        __defNormalProp$8(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
-var __objRest$7 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$8.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$8.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 const DeletableInput = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      avoidSemicolon,
-      className,
-      label,
-      onChange: outerOnChange,
-      type,
-      avoidRegisterIfExists: avoidRegisterIfExists,
-      formName: propsFormName,
-      initialValue,
-      name,
-      removeOnUnmount,
-      submitValueParser,
-      validationClass,
-      validationFunction,
-      validationRules,
-      value
-    } = _b, props = __objRest$7(_b, [
-      "avoidSemicolon",
-      "className",
-      "label",
-      "onChange",
-      "type",
-      /**
-       * useField
-       */
-      "avoidRegisterIfExists",
-      "formName",
-      "initialValue",
-      "name",
-      "removeOnUnmount",
-      "submitValueParser",
-      "validationClass",
-      "validationFunction",
-      "validationRules",
-      "value"
-    ]);
-    var _a2, _b2, _c, _e, _f;
+  ({
+    avoidSemicolon,
+    className,
+    label,
+    onChange: outerOnChange,
+    type,
+    /**
+     * useField
+     */
+    avoidRegisterIfExists,
+    formName: propsFormName,
+    initialValue,
+    name,
+    removeOnUnmount,
+    submitValueParser,
+    validationClass,
+    validationFunction,
+    validationRules,
+    value,
+    ...props
+  }, ref) => {
     const { name: contextFormName } = React.useContext(FormContext);
-    const formName = propsFormName != null ? propsFormName : contextFormName;
+    const formName = propsFormName ?? contextFormName;
     const { actualValidationFunction, actualValidationRules } = useValidationClass({
       formName,
       name,
@@ -1303,29 +1007,25 @@ const DeletableInput = React.forwardRef(
       validationFunction,
       validationRules
     });
-    const _d = useField({
+    const {
+      error,
+      updateValidations,
+      onChange,
+      isTouched,
+      ...validationProps
+    } = useField({
       formName,
       name,
-      initialValue: (_c = (_b2 = initialValue != null ? initialValue : value) != null ? _b2 : (_a2 = validationsStore.getFieldStore(formName, name)) == null ? void 0 : _a2.value) != null ? _c : "",
+      initialValue: initialValue ?? value ?? validationsStore.getFieldStore(formName, name)?.value ?? "",
       removeOnUnmount,
       submitValueParser,
       validationFunction: actualValidationFunction,
       validationRules: actualValidationRules
-    }), {
-      error,
-      updateValidations,
-      onChange,
-      isTouched
-    } = _d, validationProps = __objRest$7(_d, [
-      "error",
-      "updateValidations",
-      "onChange",
-      "isTouched"
-    ]);
+    });
     const handleOnChange = React.useCallback(
       (ev) => {
         onChange(ev);
-        outerOnChange == null ? void 0 : outerOnChange(ev);
+        outerOnChange?.(ev);
       },
       [onChange, outerOnChange]
     );
@@ -1343,20 +1043,21 @@ const DeletableInput = React.forwardRef(
           }),
           []
         ),
-        className: `deletableInput ${className != null ? className : ""}`,
+        className: `deletableInput ${className ?? ""}`,
         avoidSemicolon,
         children: [
           /* @__PURE__ */ jsx(
             Input$1,
-            __spreadProps$8(__spreadValues$8(__spreadValues$8({
-              type
-            }, props), validationProps), {
-              "aria-label": (_e = props["aria-label"]) != null ? _e : label,
+            {
+              type,
+              ...props,
+              ...validationProps,
+              "aria-label": props["aria-label"] ?? label,
               ref,
               onChange: handleOnChange,
-              value: (_f = validationProps.value) != null ? _f : "",
-              className: `deletableInput__input ${stateClassName != null ? stateClassName : ""}`
-            })
+              value: validationProps.value ?? "",
+              className: `deletableInput__input ${stateClassName ?? ""}`
+            }
           ),
           /* @__PURE__ */ jsx(
             IconButton,
@@ -1373,71 +1074,26 @@ const DeletableInput = React.forwardRef(
 );
 DeletableInput.displayName = "DeletableInput";
 
-var __defProp$7 = Object.defineProperty;
-var __defProps$7 = Object.defineProperties;
-var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$7 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$7.call(b, prop))
-      __defNormalProp$7(a, prop, b[prop]);
-  if (__getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(b)) {
-      if (__propIsEnum$7.call(b, prop))
-        __defNormalProp$7(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
-var __objRest$6 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$7.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$7.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 const FileInput = React.memo(
   React.forwardRef(
-    (_a, ref) => {
-      var _b = _a, {
-        avoidSemicolon,
-        className,
-        label,
-        avoidRegisterIfExists: avoidRegisterIfExists,
-        formName: propsFormName,
-        initialValue,
-        name,
-        removeOnUnmount,
-        submitValueParser,
-        validationClass,
-        validationFunction,
-        validationRules
-      } = _b, props = __objRest$6(_b, [
-        "avoidSemicolon",
-        "className",
-        "label",
-        /**
-         * useField
-         */
-        "avoidRegisterIfExists",
-        "formName",
-        "initialValue",
-        "name",
-        "removeOnUnmount",
-        "submitValueParser",
-        "validationClass",
-        "validationFunction",
-        "validationRules"
-      ]);
-      var _b2;
+    ({
+      avoidSemicolon,
+      className,
+      label,
+      /**
+       * useField
+       */
+      avoidRegisterIfExists,
+      formName: propsFormName,
+      initialValue,
+      name,
+      removeOnUnmount,
+      submitValueParser,
+      validationClass,
+      validationFunction,
+      validationRules,
+      ...props
+    }, ref) => {
       const { name: formName } = useFormContext();
       const { actualValidationFunction, actualValidationRules } = useValidationClass({
         formName,
@@ -1449,48 +1105,44 @@ const FileInput = React.memo(
         validationFunction,
         validationRules
       });
-      const _a2 = useField({
+      const {
+        error,
+        onChange,
+        value,
+        updateValidations,
+        isTouched,
+        ...validationProps
+      } = useField({
         formName,
         name,
         removeOnUnmount,
         submitValueParser,
         validationFunction: actualValidationFunction,
         validationRules: actualValidationRules
-      }), {
-        error,
-        onChange,
-        value,
-        updateValidations,
-        isTouched
-      } = _a2, validationProps = __objRest$6(_a2, [
-        "error",
-        "onChange",
-        "value",
-        "updateValidations",
-        "isTouched"
-      ]);
+      });
       return /* @__PURE__ */ jsx(
         FieldWrapper,
         {
           name,
           label,
-          className: `input ${className != null ? className : ""}`,
+          className: `input ${className ?? ""}`,
           avoidSemicolon,
           children: /* @__PURE__ */ jsx(
             Input$1,
-            __spreadProps$7(__spreadValues$7(__spreadValues$7({}, props), validationProps), {
+            {
+              ...props,
+              ...validationProps,
               type: "file",
-              "aria-label": (_b2 = props["aria-label"]) != null ? _b2 : label,
+              "aria-label": props["aria-label"] ?? label,
               ref,
               sx: getFieldErrorStyles(!error),
               onChange: React.useCallback(
                 (ev) => {
-                  var _a3, _b3, _c;
-                  onChange((_c = (_b3 = (_a3 = ev.target) == null ? void 0 : _a3.files) == null ? void 0 : _b3[0]) != null ? _c : null);
+                  onChange(ev.target?.files?.[0] ?? null);
                 },
                 [onChange]
               )
-            })
+            }
           )
         }
       );
@@ -1499,79 +1151,31 @@ const FileInput = React.memo(
 );
 FileInput.displayName = "FileInput";
 
-var __defProp$6 = Object.defineProperty;
-var __defProps$6 = Object.defineProperties;
-var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$6 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$6.call(b, prop))
-      __defNormalProp$6(a, prop, b[prop]);
-  if (__getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(b)) {
-      if (__propIsEnum$6.call(b, prop))
-        __defNormalProp$6(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
-var __objRest$5 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$6.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 const Input = React.memo(
   React.forwardRef(
-    (_a, ref) => {
-      var _b = _a, {
-        avoidSemicolon,
-        className,
-        label,
-        onChange: outerOnChange,
-        type,
-        avoidRegisterIfExists: avoidRegisterIfExists,
-        formName: propsFormName,
-        initialValue,
-        name,
-        removeOnUnmount,
-        submitValueParser,
-        validationClass,
-        validationFunction,
-        validationRules,
-        value
-      } = _b, props = __objRest$5(_b, [
-        "avoidSemicolon",
-        "className",
-        "label",
-        "onChange",
-        "type",
-        /**
-         * useField
-         */
-        "avoidRegisterIfExists",
-        "formName",
-        "initialValue",
-        "name",
-        "removeOnUnmount",
-        "submitValueParser",
-        "validationClass",
-        "validationFunction",
-        "validationRules",
-        "value"
-      ]);
-      var _a2, _b2, _c, _e, _f, _g, _h;
+    ({
+      avoidSemicolon,
+      className,
+      label,
+      onChange: outerOnChange,
+      type,
+      /**
+       * useField
+       */
+      avoidRegisterIfExists,
+      formName: propsFormName,
+      initialValue,
+      name,
+      removeOnUnmount,
+      submitValueParser,
+      validationClass,
+      validationFunction,
+      validationRules,
+      value,
+      ...props
+    }, ref) => {
       const { name: contextFormName } = React.useContext(FormContext);
-      const formName = propsFormName != null ? propsFormName : contextFormName;
+      const formName = propsFormName ?? contextFormName;
       const { actualValidationFunction, actualValidationRules } = useValidationClass({
         formName,
         name,
@@ -1579,34 +1183,30 @@ const Input = React.memo(
         validationFunction,
         validationRules
       });
-      const _d = useField({
+      const {
+        error,
+        updateValidations,
+        onChange,
+        isTouched,
+        ...validationProps
+      } = useField({
         formName,
         name,
-        initialValue: (_c = (_b2 = initialValue != null ? initialValue : value) != null ? _b2 : (_a2 = validationsStore.getFieldStore(formName, name)) == null ? void 0 : _a2.value) != null ? _c : "",
+        initialValue: initialValue ?? value ?? validationsStore.getFieldStore(formName, name)?.value ?? "",
         removeOnUnmount,
         submitValueParser,
         validationFunction: actualValidationFunction,
         validationRules: actualValidationRules
-      }), {
-        error,
-        updateValidations,
-        onChange,
-        isTouched
-      } = _d, validationProps = __objRest$5(_d, [
-        "error",
-        "updateValidations",
-        "onChange",
-        "isTouched"
-      ]);
+      });
       const handleOnChange = React.useCallback(
         (ev) => {
           onChange(ev);
           if (typeof ev === "string") {
-            outerOnChange == null ? void 0 : outerOnChange({
+            outerOnChange?.({
               target: ref
             });
           } else {
-            outerOnChange == null ? void 0 : outerOnChange(ev);
+            outerOnChange?.(ev);
           }
         },
         [onChange, outerOnChange, ref]
@@ -1617,29 +1217,32 @@ const Input = React.memo(
         {
           name,
           label,
-          className: `input ${className != null ? className : ""}`,
+          className: `input ${className ?? ""}`,
           avoidSemicolon,
           children: type === "date" ? /* @__PURE__ */ jsx(
             DateInput,
-            __spreadProps$6(__spreadValues$6(__spreadValues$6({}, props), validationProps), {
-              "aria-label": (_e = props["aria-label"]) != null ? _e : label,
+            {
+              ...props,
+              ...validationProps,
+              "aria-label": props["aria-label"] ?? label,
               onError: void 0,
               ref,
               onChange: handleOnChange,
-              value: (_f = validationProps.value) != null ? _f : "",
+              value: validationProps.value ?? "",
               className: stateClassName
-            })
+            }
           ) : /* @__PURE__ */ jsx(
             Input$1,
-            __spreadProps$6(__spreadValues$6(__spreadValues$6({
-              type
-            }, props), validationProps), {
-              "aria-label": (_g = props["aria-label"]) != null ? _g : label,
+            {
+              type,
+              ...props,
+              ...validationProps,
+              "aria-label": props["aria-label"] ?? label,
               ref,
               onChange: handleOnChange,
-              value: (_h = validationProps.value) != null ? _h : "",
+              value: validationProps.value ?? "",
               className: stateClassName
-            })
+            }
           )
         }
       );
@@ -1648,77 +1251,30 @@ const Input = React.memo(
 );
 Input.displayName = "Input";
 
-var __defProp$5 = Object.defineProperty;
-var __defProps$5 = Object.defineProperties;
-var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$5 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$5.call(b, prop))
-      __defNormalProp$5(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b)) {
-      if (__propIsEnum$5.call(b, prop))
-        __defNormalProp$5(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-var __objRest$4 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$5.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$5.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 const NumberInputf = React.memo(
   React.forwardRef(
-    (_a, ref) => {
-      var _b = _a, {
-        avoidSemicolon,
-        className,
-        label,
-        onChange: outerOnChange,
-        avoidRegisterIfExists: avoidRegisterIfExists,
-        formName: propsFormName,
-        initialValue,
-        name,
-        removeOnUnmount,
-        submitValueParser,
-        validationClass,
-        validationFunction,
-        validationRules,
-        value
-      } = _b, props = __objRest$4(_b, [
-        "avoidSemicolon",
-        "className",
-        "label",
-        "onChange",
-        /**
-         * useField
-         */
-        "avoidRegisterIfExists",
-        "formName",
-        "initialValue",
-        "name",
-        "removeOnUnmount",
-        "submitValueParser",
-        "validationClass",
-        "validationFunction",
-        "validationRules",
-        "value"
-      ]);
-      var _a2, _b2, _c;
+    ({
+      avoidSemicolon,
+      className,
+      label,
+      onChange: outerOnChange,
+      /**
+       * useField
+       */
+      avoidRegisterIfExists,
+      formName: propsFormName,
+      initialValue,
+      name,
+      removeOnUnmount,
+      submitValueParser,
+      validationClass,
+      validationFunction,
+      validationRules,
+      value,
+      ...props
+    }, ref) => {
       const { name: contextFormName } = React.useContext(FormContext);
-      const formName = propsFormName != null ? propsFormName : contextFormName;
+      const formName = propsFormName ?? contextFormName;
       const { actualValidationFunction, actualValidationRules } = useValidationClass({
         formName,
         name,
@@ -1729,14 +1285,14 @@ const NumberInputf = React.memo(
       const { onChange, value: innerValue } = useField({
         formName,
         name,
-        initialValue: (_c = (_b2 = initialValue != null ? initialValue : value) != null ? _b2 : (_a2 = validationsStore.getFieldStore(formName, name)) == null ? void 0 : _a2.value) != null ? _c : "",
+        initialValue: initialValue ?? value ?? validationsStore.getFieldStore(formName, name)?.value ?? "",
         removeOnUnmount,
         submitValueParser: React.useCallback(
-          (current) => parseNumberInputValueToNumber(current != null ? current : ""),
+          (current) => parseNumberInputValueToNumber(current ?? ""),
           []
         ),
         validationValueParser: React.useCallback(
-          (current) => parseNumberInputValueToNumber(current != null ? current : ""),
+          (current) => parseNumberInputValueToNumber(current ?? ""),
           []
         ),
         validationFunction: actualValidationFunction,
@@ -1745,7 +1301,7 @@ const NumberInputf = React.memo(
       const handleOnChange = React.useCallback(
         (ev) => {
           if (ev.error) {
-            outerOnChange == null ? void 0 : outerOnChange(__spreadProps$5(__spreadValues$5({}, ev), { value: "" }));
+            outerOnChange?.({ ...ev, value: "" });
             onChange("");
             validationsStore.updateField(formName, {
               name,
@@ -1753,7 +1309,7 @@ const NumberInputf = React.memo(
             });
           } else {
             onChange(ev.value);
-            outerOnChange == null ? void 0 : outerOnChange(ev);
+            outerOnChange?.(ev);
             validationsStore.updateField(formName, { name, error: null });
           }
         },
@@ -1773,18 +1329,18 @@ const NumberInputf = React.memo(
             }),
             []
           ),
-          className: `input ${className != null ? className : ""}`,
+          className: `input ${className ?? ""}`,
           avoidSemicolon,
           children: /* @__PURE__ */ jsx(
             NumberInput,
-            __spreadProps$5(__spreadValues$5({
-              ref
-            }, props), {
+            {
+              ref,
+              ...props,
               name,
               value: innerValue,
               onChange: handleOnChange,
               className: stateClassName
-            })
+            }
           )
         }
       );
@@ -1793,75 +1349,28 @@ const NumberInputf = React.memo(
 );
 NumberInputf.displayName = "NumberInputf";
 
-var __defProp$4 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
-var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$4 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$4.call(b, prop))
-      __defNormalProp$4(a, prop, b[prop]);
-  if (__getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(b)) {
-      if (__propIsEnum$4.call(b, prop))
-        __defNormalProp$4(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
-var __objRest$3 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$4.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$4.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 const Radio = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      avoidSemicolon,
-      className,
-      formName,
-      label,
-      onChange: outerOnChange,
-      options,
-      value: outerValue,
-      avoidRegisterIfExists: avoidRegisterIfExists,
-      initialValue,
-      name,
-      removeOnUnmount,
-      submitValueParser,
-      validationClass,
-      validationFunction,
-      validationRules
-    } = _b, props = __objRest$3(_b, [
-      "avoidSemicolon",
-      "className",
-      "formName",
-      "label",
-      "onChange",
-      "options",
-      "value",
-      /**
-       * useField
-       */
-      "avoidRegisterIfExists",
-      "initialValue",
-      "name",
-      "removeOnUnmount",
-      "submitValueParser",
-      "validationClass",
-      "validationFunction",
-      "validationRules"
-    ]);
+  ({
+    avoidSemicolon,
+    className,
+    formName,
+    label,
+    onChange: outerOnChange,
+    options,
+    value: outerValue,
+    /**
+     * useField
+     */
+    avoidRegisterIfExists,
+    initialValue,
+    name,
+    removeOnUnmount,
+    submitValueParser,
+    validationClass,
+    validationFunction,
+    validationRules,
+    ...props
+  }, ref) => {
     const { actualValidationFunction, actualValidationRules } = useValidationClass({
       formName,
       name,
@@ -1869,15 +1378,15 @@ const Radio = React.forwardRef(
       validationFunction,
       validationRules
     });
-    const _a2 = useField({
+    const { value, updateValidations, onChange, isTouched, ...inputProps } = useField({
       formName,
       name,
-      initialValue: initialValue != null ? initialValue : outerValue,
+      initialValue: initialValue ?? outerValue,
       removeOnUnmount,
       submitValueParser,
       validationFunction: actualValidationFunction,
       validationRules: actualValidationRules
-    }), { value, updateValidations, onChange, isTouched } = _a2, inputProps = __objRest$3(_a2, ["value", "updateValidations", "onChange", "isTouched"]);
+    });
     const handleOnChange = React.useCallback(
       (ev) => {
         onChange(ev);
@@ -1892,13 +1401,15 @@ const Radio = React.forwardRef(
       {
         name,
         label,
-        className: `radio ${className != null ? className : ""}`,
+        className: `radio ${className ?? ""}`,
         avoidSemicolon,
         as: "ul",
-        children: options == null ? void 0 : options.map((option) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Label, { title: option.label, className: "radio-label", children: [
+        children: options?.map((option) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Label, { title: option.label, className: "radio-label", children: [
           /* @__PURE__ */ jsx(
             Radio$1,
-            __spreadProps$4(__spreadValues$4(__spreadValues$4({}, props), inputProps), {
+            {
+              ...props,
+              ...inputProps,
               role: "radio",
               className: "radio-button",
               "aria-label": option.label,
@@ -1906,7 +1417,7 @@ const Radio = React.forwardRef(
               value: option.value,
               checked: value === option.value,
               onChange: handleOnChange
-            })
+            }
           ),
           /* @__PURE__ */ jsx(Box, { as: "span", className: "radio-text", children: option.label })
         ] }) }, option.value))
@@ -1916,76 +1427,28 @@ const Radio = React.forwardRef(
 );
 Radio.displayName = "Radio";
 
-var __defProp$3 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
-var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
-var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
-var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$3 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$3.call(b, prop))
-      __defNormalProp$3(a, prop, b[prop]);
-  if (__getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(b)) {
-      if (__propIsEnum$3.call(b, prop))
-        __defNormalProp$3(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-var __objRest$2 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$3.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$3.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 const Select = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      avoidSemicolon,
-      className,
-      formName,
-      label,
-      onChange: outerOnChange,
-      options,
-      avoidRegisterIfExists: avoidRegisterIfExists,
-      initialValue,
-      name,
-      removeOnUnmount,
-      submitValueParser,
-      validationClass,
-      validationFunction,
-      validationRules,
-      value
-    } = _b, props = __objRest$2(_b, [
-      "avoidSemicolon",
-      "className",
-      "formName",
-      "label",
-      "onChange",
-      "options",
-      /**
-       * useField
-       */
-      "avoidRegisterIfExists",
-      "initialValue",
-      "name",
-      "removeOnUnmount",
-      "submitValueParser",
-      "validationClass",
-      "validationFunction",
-      "validationRules",
-      "value"
-    ]);
-    var _a2, _b2, _d, _e;
+  ({
+    avoidSemicolon,
+    className,
+    formName,
+    label,
+    onChange: outerOnChange,
+    options,
+    /**
+     * useField
+     */
+    avoidRegisterIfExists,
+    initialValue,
+    name,
+    removeOnUnmount,
+    submitValueParser,
+    validationClass,
+    validationFunction,
+    validationRules,
+    value,
+    ...props
+  }, ref) => {
     const { actualValidationFunction, actualValidationRules } = useValidationClass({
       formName,
       name,
@@ -1993,25 +1456,28 @@ const Select = React.forwardRef(
       validationFunction,
       validationRules
     });
-    const _c = useField({
+    const { updateValidations, onChange, isTouched, ...inputProps } = useField({
       avoidRegisterIfExists,
-      initialValue: (_b2 = initialValue != null ? initialValue : value) != null ? _b2 : (_a2 = options[0]) == null ? void 0 : _a2.value,
+      initialValue: initialValue ?? value ?? options[0]?.value,
       name,
       removeOnUnmount,
       submitValueParser,
       validationFunction: actualValidationFunction,
       validationRules: actualValidationRules
-    }), { updateValidations, onChange, isTouched } = _c, inputProps = __objRest$2(_c, ["updateValidations", "onChange", "isTouched"]);
+    });
     return /* @__PURE__ */ jsx(
       FieldWrapper,
       {
         name,
         label,
-        className: `select ${className != null ? className : ""}`,
+        className: `select ${className ?? ""}`,
         avoidSemicolon,
         children: /* @__PURE__ */ jsxs(
           Select$1,
-          __spreadProps$3(__spreadValues$3(__spreadValues$3(__spreadValues$3({}, getVariant("forms.select")), props), inputProps), {
+          {
+            ...getVariant("forms.select"),
+            ...props,
+            ...inputProps,
             onChange: React.useCallback(
               (ev) => {
                 onChange(ev);
@@ -2021,14 +1487,14 @@ const Select = React.forwardRef(
               },
               [onChange, outerOnChange]
             ),
-            "aria-label": (_d = props["aria-label"]) != null ? _d : label,
+            "aria-label": props["aria-label"] ?? label,
             ref,
-            value: (_e = inputProps.value) != null ? _e : "",
+            value: inputProps.value ?? "",
             children: [
-              options == null ? void 0 : options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value)),
+              options?.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value)),
               props.children
             ]
-          })
+          }
         )
       }
     );
@@ -2036,75 +1502,26 @@ const Select = React.forwardRef(
 );
 Select.displayName = "Select";
 
-var __defProp$2 = Object.defineProperty;
-var __defProps$2 = Object.defineProperties;
-var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$2.call(b, prop))
-      __defNormalProp$2(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(b)) {
-      if (__propIsEnum$2.call(b, prop))
-        __defNormalProp$2(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
-var __objRest$1 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$2.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$2.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 const Switchbox = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      avoidSemicolon,
-      className,
-      label,
-      onChange: outerOnChange,
-      type,
-      reverse = false,
-      avoidRegisterIfExists,
-      formName,
-      initialValue,
-      name,
-      removeOnUnmount,
-      submitValueParser,
-      validationClass,
-      validationFunction,
-      validationRules,
-      value
-    } = _b, props = __objRest$1(_b, [
-      "avoidSemicolon",
-      "className",
-      "label",
-      "onChange",
-      "type",
-      "reverse",
-      "avoidRegisterIfExists",
-      "formName",
-      "initialValue",
-      "name",
-      "removeOnUnmount",
-      "submitValueParser",
-      "validationClass",
-      "validationFunction",
-      "validationRules",
-      "value"
-    ]);
-    var _b2, _c;
+  ({
+    avoidSemicolon,
+    className,
+    label,
+    onChange: outerOnChange,
+    type,
+    reverse = false,
+    avoidRegisterIfExists,
+    formName,
+    initialValue,
+    name,
+    removeOnUnmount,
+    submitValueParser,
+    validationClass,
+    validationFunction,
+    validationRules,
+    value,
+    ...props
+  }, ref) => {
     const { actualValidationFunction, actualValidationRules } = useValidationClass({
       formName,
       name,
@@ -2112,36 +1529,38 @@ const Switchbox = React.forwardRef(
       validationFunction,
       validationRules
     });
-    const _a2 = useField({
+    const { onChange, updateValidations, isTouched, ...inputProps } = useField({
       avoidRegisterIfExists,
       formName,
       name,
-      initialValue: (initialValue != null ? initialValue : "off") === "on" || toBoolean(initialValue) ? "on" : "off",
+      initialValue: (initialValue ?? "off") === "on" || toBoolean(initialValue) ? "on" : "off",
       removeOnUnmount,
       submitValueParser,
       validationFunction: actualValidationFunction,
       validationRules: actualValidationRules
-    }), { onChange, updateValidations, isTouched } = _a2, inputProps = __objRest$1(_a2, ["onChange", "updateValidations", "isTouched"]);
+    });
     return /* @__PURE__ */ jsx(
       FieldWrapper,
       {
         name,
         label,
-        className: `switchbox ${className != null ? className : ""}`,
+        className: `switchbox ${className ?? ""}`,
         avoidSemicolon,
         children: /* @__PURE__ */ jsx(
           Switch,
-          __spreadProps$2(__spreadValues$2(__spreadValues$2({}, props), inputProps), {
-            "aria-label": (_b2 = props["aria-label"]) != null ? _b2 : label,
+          {
+            ...props,
+            ...inputProps,
+            "aria-label": props["aria-label"] ?? label,
             onChange: (ev) => {
               onChange(ev.target.checked !== reverse ? "on" : "off");
               if (outerOnChange) {
                 outerOnChange(ev);
               }
             },
-            checked: ((_c = inputProps.value) != null ? _c : "off") === "on" !== reverse,
+            checked: (inputProps.value ?? "off") === "on" !== reverse,
             ref
-          })
+          }
         )
       }
     );
@@ -2149,74 +1568,27 @@ const Switchbox = React.forwardRef(
 );
 Switchbox.displayName = "Switchbox";
 
-var __defProp$1 = Object.defineProperty;
-var __defProps$1 = Object.defineProperties;
-var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp$1(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b)) {
-      if (__propIsEnum$1.call(b, prop))
-        __defNormalProp$1(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$1.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 const Textarea = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      avoidSemicolon,
-      className,
-      formName,
-      label,
-      onChange: outerOnChange,
-      avoidRegisterIfExists: avoidRegisterIfExists,
-      initialValue,
-      name,
-      removeOnUnmount,
-      submitValueParser,
-      validationClass,
-      validationFunction,
-      validationRules,
-      value
-    } = _b, props = __objRest(_b, [
-      "avoidSemicolon",
-      "className",
-      "formName",
-      "label",
-      "onChange",
-      /**
-       * useField
-       */
-      "avoidRegisterIfExists",
-      "initialValue",
-      "name",
-      "removeOnUnmount",
-      "submitValueParser",
-      "validationClass",
-      "validationFunction",
-      "validationRules",
-      "value"
-    ]);
-    var _b2, _c;
+  ({
+    avoidSemicolon,
+    className,
+    formName,
+    label,
+    onChange: outerOnChange,
+    /**
+     * useField
+     */
+    avoidRegisterIfExists,
+    initialValue,
+    name,
+    removeOnUnmount,
+    submitValueParser,
+    validationClass,
+    validationFunction,
+    validationRules,
+    value,
+    ...props
+  }, ref) => {
     const { actualValidationFunction, actualValidationRules } = useValidationClass({
       formName,
       name,
@@ -2224,16 +1596,16 @@ const Textarea = React.forwardRef(
       validationFunction,
       validationRules
     });
-    const _a2 = useField({
+    const { updateValidations, onChange, isTouched, ...inputProps } = useField({
       avoidRegisterIfExists,
       formName,
-      initialValue: initialValue != null ? initialValue : value,
+      initialValue: initialValue ?? value,
       name,
       removeOnUnmount,
       submitValueParser,
       validationRules: actualValidationRules,
       validationFunction: actualValidationFunction
-    }), { updateValidations, onChange, isTouched } = _a2, inputProps = __objRest(_a2, ["updateValidations", "onChange", "isTouched"]);
+    });
     const handleOnChange = React.useCallback(
       (ev) => {
         onChange(ev);
@@ -2248,16 +1620,18 @@ const Textarea = React.forwardRef(
       {
         name,
         label,
-        className: `textarea ${className != null ? className : ""}`,
+        className: `textarea ${className ?? ""}`,
         avoidSemicolon,
         children: /* @__PURE__ */ jsx(
           Textarea$1,
-          __spreadProps$1(__spreadValues$1(__spreadValues$1({}, props), inputProps), {
-            "aria-label": (_b2 = props["aria-label"]) != null ? _b2 : label,
+          {
+            ...props,
+            ...inputProps,
+            "aria-label": props["aria-label"] ?? label,
             ref,
-            value: (_c = inputProps.value) != null ? _c : "",
+            value: inputProps.value ?? "",
             onChange: handleOnChange
-          })
+          }
         )
       }
     );
@@ -2265,104 +1639,197 @@ const Textarea = React.forwardRef(
 );
 Textarea.displayName = "Textarea";
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
+var __defProp$8 = Object.defineProperty;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$8 = (obj, key, value) => {
+  __defNormalProp$8(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __accessCheck = (obj, member, msg) => {
+var __accessCheck$3 = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
 };
-var __privateGet = (obj, member, getter) => {
-  __accessCheck(obj, member, "read from private field");
+var __privateGet$3 = (obj, member, getter) => {
+  __accessCheck$3(obj, member, "read from private field");
   return getter ? getter.call(obj) : member.get(obj);
 };
-var __privateAdd = (obj, member, value) => {
+var __privateAdd$3 = (obj, member, value) => {
   if (member.has(obj))
     throw TypeError("Cannot add the same private member more than once");
   member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 };
-var __privateSet = (obj, member, value, setter) => {
-  __accessCheck(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
-  return value;
-};
-var _rules, _validationFunction, _fields;
-try {
-  void initValidations().catch(() => {
-  });
-} catch (e) {
-}
+var _emitter;
 class CollectorField extends EventEmitter {
-  constructor(_name, label) {
+  constructor(_name, label, properties) {
     super();
     this._name = _name;
     this.label = label;
+    __privateAdd$3(this, _emitter, new StatefulEmitter({
+      isHidden: false
+    }));
+    __publicField$8(this, "collector", {});
+    __publicField$8(this, "isHidden", () => __privateGet$3(this, _emitter).getState("isHidden"));
+    __publicField$8(this, "setIsHidden", (isHidden) => {
+      __privateGet$3(this, _emitter).emit("isHidden", isHidden);
+    });
+    __publicField$8(this, "properties", {});
+    __publicField$8(this, "setProperties", (newProps) => {
+      this.properties = newProps;
+      this.emit("propsUpdate", { ...this.properties });
+    });
+    __publicField$8(this, "useProperties", () => {
+      return useSubscription({
+        getInitialState: () => this.properties,
+        makeSubscription: (setProps) => this.on("propsUpdate", setProps)
+      });
+    });
+    /**
+     * Este componente se utiliza para controlar propiedades comunes a todos los
+     * campos.
+     */
+    __publicField$8(this, "SuperComponent", () => {
+      if (__privateGet$3(this, _emitter).useState("isHidden"))
+        return null;
+      return /* @__PURE__ */ jsx(Box, { className: `collector__field ${this.type}`, children: /* @__PURE__ */ jsx(this.Component, {}) });
+    });
+    if (properties) {
+      this.properties = properties;
+    }
   }
   get name() {
     return this._name;
   }
+  set name(name) {
+    this._name = name;
+  }
 }
+_emitter = new WeakMap();
+
+var __defProp$7 = Object.defineProperty;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$7 = (obj, key, value) => {
+  __defNormalProp$7(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var __accessCheck$2 = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet$2 = (obj, member, getter) => {
+  __accessCheck$2(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd$2 = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet$1 = (obj, member, value, setter) => {
+  __accessCheck$2(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var _rules, _validationFunction;
 class ValidatedCollectorField extends CollectorField {
-  constructor() {
-    super(...arguments);
-    this.initialValue = void 0;
-    __privateAdd(this, _rules, {});
-    __privateAdd(this, _validationFunction, () => true);
-    this.setInitialValue = (newValue) => {
+  constructor(_name, label, config) {
+    super(_name, label, config?.properties);
+    this._name = _name;
+    this.label = label;
+    __publicField$7(this, "initialValue");
+    __privateAdd$2(this, _rules, {});
+    __privateAdd$2(this, _validationFunction, () => true);
+    __publicField$7(this, "setInitialValue", (newValue) => {
       this.initialValue = newValue;
-    };
-    this.setValidationFunction = (newFunction) => {
-      __privateSet(this, _validationFunction, newFunction);
-      this.emit("functionUpdate", __privateGet(this, _validationFunction));
-    };
-    this.setValidationRules = (newRules) => {
-      __privateSet(this, _rules, newRules);
-      this.emit("rulesUpdate", __spreadValues({}, __privateGet(this, _rules)));
-    };
-    this.useValidationFunction = () => {
-      const [validationFunction, setValidationFunction] = useState(() => __privateGet(this, _validationFunction));
-      useMount(() => {
-        return this.on("functionUpdate", setValidationFunction);
+    });
+    __publicField$7(this, "setValidationFunction", (newFunction) => {
+      __privateSet$1(this, _validationFunction, newFunction);
+      this.emit("functionUpdate", __privateGet$2(this, _validationFunction));
+    });
+    __publicField$7(this, "setValidationRules", (newRules) => {
+      __privateSet$1(this, _rules, newRules);
+      this.emit("rulesUpdate", { ...__privateGet$2(this, _rules) });
+    });
+    __publicField$7(this, "setValue", (newValue) => {
+      validationsStore.setFieldValue(this.collector.id, this.name, newValue);
+    });
+    __publicField$7(this, "useValidationFunction", () => {
+      return useSubscription({
+        getInitialState: () => () => __privateGet$2(this, _validationFunction),
+        makeSubscription: (setValidationFunction) => {
+          return this.on("functionUpdate", setValidationFunction);
+        }
       });
-      return validationFunction;
-    };
-    this.useValidationRules = () => {
-      const [validationRules, setValidationRules] = useState(__privateGet(this, _rules));
-      useMount(() => {
-        return this.on("rulesUpdate", setValidationRules);
+    });
+    __publicField$7(this, "useValidationRules", () => {
+      return useSubscription({
+        getInitialState: () => __privateGet$2(this, _rules),
+        makeSubscription: (setValidationRules) => {
+          return this.on("rulesUpdate", setValidationRules);
+        }
       });
-      return validationRules;
-    };
+    });
+    if (config?.initialValue) {
+      this.initialValue = config.initialValue;
+    }
+    if (config?.validationFunction) {
+      __privateSet$1(this, _validationFunction, config.validationFunction);
+    }
+    if (config?.validationRules) {
+      __privateSet$1(this, _rules, config.validationRules);
+    }
   }
 }
 _rules = new WeakMap();
 _validationFunction = new WeakMap();
+
+var __defProp$6 = Object.defineProperty;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$6 = (obj, key, value) => {
+  __defNormalProp$6(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class CollectorCheckbox extends ValidatedCollectorField {
+  constructor() {
+    super(...arguments);
+    __publicField$6(this, "type", "checkbox");
+    __publicField$6(this, "Component", () => {
+      const rules = this.useValidationRules();
+      const validationFunction = this.useValidationFunction();
+      const props = this.useProperties();
+      return /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          ...props,
+          initialValue: this.initialValue,
+          validationFunction,
+          name: this.name,
+          label: this.label,
+          validationRules: rules,
+          avoidSemicolon: true
+        }
+      );
+    });
+  }
+}
+
+var __defProp$5 = Object.defineProperty;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$5 = (obj, key, value) => {
+  __defNormalProp$5(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 class CollectorInput extends ValidatedCollectorField {
   constructor() {
     super(...arguments);
-    this.type = "input";
-    this.Component = () => {
+    __publicField$5(this, "type", "input");
+    __publicField$5(this, "Component", () => {
       const rules = this.useValidationRules();
       const validationFunction = this.useValidationFunction();
+      const props = this.useProperties();
       return /* @__PURE__ */ jsx(
         Input,
         {
+          ...props,
           initialValue: this.initialValue,
           validationFunction,
           name: this.name,
@@ -2370,31 +1837,101 @@ class CollectorInput extends ValidatedCollectorField {
           validationRules: rules
         }
       );
-    };
+    });
   }
 }
-const _CollectorLabel = class extends CollectorField {
-  constructor(label, kind = "label") {
-    super(`label${_CollectorLabel.maxId++}`, label);
-    this.kind = kind;
-    this.type = "label";
-    this.Component = () => {
-      return /* @__PURE__ */ jsx(Box, { as: this.kind, children: this.label });
-    };
+
+var __defProp$4 = Object.defineProperty;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$4 = (obj, key, value) => {
+  __defNormalProp$4(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var __accessCheck$1 = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet$1 = (obj, member, getter) => {
+  __accessCheck$1(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd$1 = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck$1(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var _options, _useOptions;
+class CollectorSelect extends ValidatedCollectorField {
+  constructor(_name, label, config) {
+    super(_name, label, config);
+    this._name = _name;
+    this.label = label;
+    __publicField$4(this, "type", "select");
+    __privateAdd$1(this, _options, []);
+    __publicField$4(this, "addOption", (newOption) => {
+      __privateSet(this, _options, [...__privateGet$1(this, _options), newOption]);
+      this.emit("optionsUpdate", __privateGet$1(this, _options));
+    });
+    __publicField$4(this, "setOptions", (newOptions) => {
+      __privateSet(this, _options, [...newOptions]);
+      this.emit("optionsUpdate", __privateGet$1(this, _options));
+    });
+    __privateAdd$1(this, _useOptions, () => {
+      const [options, setOptions] = useState(__privateGet$1(this, _options));
+      useMount(() => {
+        return this.on("optionsUpdate", setOptions);
+      });
+      return options;
+    });
+    __publicField$4(this, "Component", () => {
+      const rules = this.useValidationRules();
+      const validationFunction = this.useValidationFunction();
+      const options = __privateGet$1(this, _useOptions).call(this);
+      const props = this.useProperties();
+      return /* @__PURE__ */ jsx(
+        Select,
+        {
+          ...props,
+          initialValue: this.initialValue,
+          validationFunction,
+          name: this.name,
+          label: this.label,
+          validationRules: rules,
+          options
+        }
+      );
+    });
+    if (config?.options) {
+      __privateSet(this, _options, config.options);
+    }
   }
+}
+_options = new WeakMap();
+_useOptions = new WeakMap();
+
+var __defProp$3 = Object.defineProperty;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$3 = (obj, key, value) => {
+  __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
 };
-let CollectorLabel = _CollectorLabel;
-CollectorLabel.maxId = 0;
 class CollectorTextarea extends ValidatedCollectorField {
   constructor() {
     super(...arguments);
-    this.type = "textarea";
-    this.Component = () => {
+    __publicField$3(this, "type", "textarea");
+    __publicField$3(this, "Component", () => {
       const rules = this.useValidationRules();
       const validationFunction = this.useValidationFunction();
+      const props = this.useProperties();
       return /* @__PURE__ */ jsx(
         Textarea,
         {
+          ...props,
           initialValue: this.initialValue,
           name: this.name,
           validationFunction,
@@ -2402,59 +1939,162 @@ class CollectorTextarea extends ValidatedCollectorField {
           label: this.label
         }
       );
-    };
+    });
   }
 }
+
+var __defProp$2 = Object.defineProperty;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$2 = (obj, key, value) => {
+  __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+const _CollectorLabel = class _CollectorLabel extends CollectorField {
+  constructor(label, kind = "label") {
+    super(`label${_CollectorLabel.maxId++}`, label);
+    this.kind = kind;
+    __publicField$2(this, "type", "label");
+    __publicField$2(this, "Component", () => {
+      if (this.kind === "label")
+        return /* @__PURE__ */ jsx(Box, { as: this.kind, children: /* @__PURE__ */ jsx("span", { children: this.label }) });
+      return /* @__PURE__ */ jsx(Box, { as: this.kind, children: this.label });
+    });
+  }
+};
+__publicField$2(_CollectorLabel, "maxId", 0);
+let CollectorLabel = _CollectorLabel;
+
+var __defProp$1 = Object.defineProperty;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$1 = (obj, key, value) => {
+  __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+let i = 0;
+class CollectorButton extends CollectorField {
+  constructor(label, properties) {
+    super(`Button${i++}`, label, properties);
+    this.label = label;
+    __publicField$1(this, "type", "button");
+    __publicField$1(this, "Component", () => {
+      const props = this.useProperties();
+      return /* @__PURE__ */ jsx(SimpleButton, { ...props, children: this.label });
+    });
+  }
+}
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var _fields, _Component;
+try {
+  void initValidations().catch(() => {
+  });
+} catch (e) {
+  console.error(e);
+}
 let maxId = 0;
 class Collector {
   constructor() {
-    this.fields = {
+    __publicField(this, "fields", {
+      button: CollectorButton,
+      checkbox: CollectorCheckbox,
       input: CollectorInput,
+      /**
+       * Muestra una etiqueta con tag personalizable: h1...h6, p, label. (Por
+       * defecto: label)
+       */
       label: CollectorLabel,
+      select: CollectorSelect,
       textarea: CollectorTextarea
-    };
-    this.id = `Collector${maxId++}`;
+    });
+    __publicField(this, "private__id", `Collector${maxId++}`);
     __privateAdd(this, _fields, {});
-    this.add = (field) => {
+    __publicField(this, "add", (field) => {
       __privateGet(this, _fields)[field.name] = field;
-    };
-    this.show = (modalProps) => {
+      field.collector = this;
+    });
+    __publicField(this, "forEach", (cb) => {
+      Object.values(__privateGet(this, _fields)).forEach(cb);
+    });
+    __privateAdd(this, _Component, ({
+      hideConfirm,
+      resolve
+    }) => {
+      const modal = useModalContext();
+      let hasValidated = false;
+      return /* @__PURE__ */ jsx(Box, { ...getVariant("layout.util.collector.formContainer"), children: /* @__PURE__ */ jsxs(
+        Form,
+        {
+          name: this.private__id,
+          onValidate: (result) => {
+            if (hasSucceedFormValidation(result)) {
+              resolve(result.submitValues);
+              modal.close();
+            }
+          },
+          children: [
+            Object.values(__privateGet(this, _fields)).map((current) => {
+              if (current instanceof ValidatedCollectorField)
+                hasValidated = true;
+              return /* @__PURE__ */ jsx(current.SuperComponent, {}, current.name);
+            }),
+            hasValidated && !hideConfirm && /* @__PURE__ */ jsx(Box, { className: "collector__buttons", children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: getLabel("btnCon").text }) })
+          ]
+        }
+      ) });
+    });
+    __publicField(this, "show", (modalProps) => {
       return new Promise((resolve) => {
-        const modal = new ApiaUtil().modals.open(__spreadValues({
-          children: /* @__PURE__ */ jsx(Box, __spreadProps(__spreadValues({}, getVariant("layout.util.collector.formContainer")), { children: /* @__PURE__ */ jsxs(
-            Form,
+        const C = __privateGet(this, _Component);
+        ApiaUtil.instance.modals.open({
+          onExited() {
             {
-              name: this.id,
-              onValidate: (result) => {
-                if (hasSucceedFormValidation(result)) {
-                  resolve(result.submitValues);
-                  modal.close();
-                }
-              },
-              children: [
-                Object.values(__privateGet(this, _fields)).map((current) => /* @__PURE__ */ jsx(
-                  Box,
-                  {
-                    className: `collector__field ${current.type}`,
-                    children: /* @__PURE__ */ jsx(current.Component, {})
-                  },
-                  current.name
-                )),
-                /* @__PURE__ */ jsx(Box, { className: "collector__buttons", children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: getLabel("btnCon").text }) })
-              ]
+              resolve(null);
             }
-          ) })),
+          },
+          children: /* @__PURE__ */ jsx(
+            C,
+            {
+              hideConfirm: modalProps?.hideConfirm,
+              resolve: (values) => {
+                resolve(values);
+              }
+            }
+          ),
           variant: "layout.util.collector.modal",
           initialFocusGetter(modalInnerRef) {
             return modalInnerRef.querySelector(
               "input,textarea,select,button:not(.modal__closeButton)"
             );
-          }
-        }, modalProps));
+          },
+          ...modalProps
+        });
       });
-    };
+    });
+  }
+  get id() {
+    return this.private__id;
   }
 }
 _fields = new WeakMap();
+_Component = new WeakMap();
 
 export { InnerCaptcha as Captcha, Checkbox, Collector, CollectorField, DeletableInput, FieldWrapper, FileInput, Form, FormContext, Input, NumberInputf, Radio, Select, Switchbox, Textarea, ValidatedCollectorField, ValidationError, classToValidate, classToValidationFunction, hasSucceedFieldValidation, hasSucceedFormValidation, initValidations, lang, useField, useFieldSelector, useFieldStatesClassNames, useFieldValue, useFormContext, useFormSelector, useValidationClass, validationsStore };
+//# sourceMappingURL=index.js.map