@rolster/react-components 18.14.0 → 18.15.1

package/dist/cjs/index.js

@@ -2,14 +2,56 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var helpersAdvanced = require('@rolster/helpers-advanced');
 var helpersString = require('@rolster/helpers-string');
-var helpersDate = require('@rolster/helpers-date');
-var ReactDOM = require('react-dom');
 var i18n = require('@rolster/i18n');
-var helpersForms = require('@rolster/helpers-forms');
+var ReactDOM = require('react-dom');
 require('uuid');
-var rxjs = require('rxjs');
+
+function currencyFormat(currency) {
+    const { value, decimals, symbol } = currency;
+    const [integer, decimal] = Math.abs(value).toString().split('.');
+    let result = '';
+    let count = 0;
+    for (let i = 1; i <= integer.length; i++) {
+        const index = integer.length - i;
+        if (count === 3) {
+            count = 0;
+            result = `.${result}`;
+        }
+        count++;
+        result = `${integer.charAt(index)}${result}`;
+    }
+    if (decimals && decimal) {
+        result = `${result},${decimal.slice(0, 2)}`;
+    }
+    if (value < 0) {
+        result = `-${result}`;
+    }
+    return symbol ? `${symbol} ${result}` : result;
+}
+
+class PartialSealed {
+    constructor(key, value) {
+        this.key = key;
+        this.value = value;
+    }
+    otherwise(otherwise) {
+        this.sealedOtherwise = otherwise;
+        return this;
+    }
+    when(resolver, whenOtherwise) {
+        const handler = resolver[this.key];
+        const otherwise = whenOtherwise || this.sealedOtherwise;
+        if (otherwise) {
+            otherwise();
+        }
+        return handler ? handler(this.value) : undefined;
+    }
+}
+
+function itIsDefined(object) {
+    return typeof object !== 'undefined' && object !== null;
+}
 
 const baseCls = 'rls-tabular-text';
 const pointers = ['.', ','];
@@ -21,7 +63,7 @@ function RlsTabularText({ value }) {
 }
 
 function RlsAmount({ value, decimals, rlsTheme, symbol }) {
-    return (jsxRuntime.jsxs("div", { className: "rls-amount", "rls-theme": rlsTheme, children: [symbol && jsxRuntime.jsx("span", { children: symbol }), jsxRuntime.jsx(RlsTabularText, { value: helpersAdvanced.currencyFormat({ value, decimals }) })] }));
+    return (jsxRuntime.jsxs("div", { className: "rls-amount", "rls-theme": rlsTheme, children: [symbol && jsxRuntime.jsx("span", { children: symbol }), jsxRuntime.jsx(RlsTabularText, { value: currencyFormat({ value, decimals }) })] }));
 }
 
 function renderClassStatus(base, status = {}, aditionals) {
@@ -88,9 +130,6 @@ function RlsInput({ children, disabled, formControl, placeholder, type, value, o
         setFocused(true);
     }
     function onBlur() {
-        if (formControl && !formControl.touched) {
-            formControl.touch();
-        }
         formControl?.blur();
         setFocused(false);
     }
@@ -139,9 +178,6 @@ function RlsInputPassword({ disabled, formControl, placeholder, type, onValue })
         setFocused(true);
     }
     function onBlur() {
-        if (formControl && !formControl.touched) {
-            formControl.touch();
-        }
         formControl?.blur();
         setFocused(false);
     }
@@ -151,6 +187,10 @@ function RlsInputPassword({ disabled, formControl, placeholder, type, onValue })
         }), children: jsxRuntime.jsx("input", { className: "rls-input-password__component", autoComplete: "off", type: type || 'password', placeholder: placeholder, disabled: disabled, onFocus: onFocus, onBlur: onBlur, onChange: onChange }) }));
 }
 
+function RlsInputSearch({ formControl, placeholder, onSearch }) {
+    return (jsxRuntime.jsxs("div", { className: "rls-input-search", children: [jsxRuntime.jsx(RlsInput, { formControl: formControl, placeholder: placeholder }), onSearch && jsxRuntime.jsx(RlsButtonAction, { icon: "search", onClick: onSearch })] }));
+}
+
 function RlsInputText({ disabled, formControl, placeholder, value, onValue }) {
     const [valueInput, setValueInput] = react.useState(value || '');
     function onText(value) {
@@ -188,16 +228,12 @@ function RlsRadioButton({ checked, disabled, rlsTheme, onClick }) {
     return (jsxRuntime.jsx("div", { className: renderClassStatus('rls-radiobutton', { checked, disabled }), onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntime.jsx("div", { className: "rls-radiobutton__component" }) }));
 }
 
-function RlsSearchInput({ formControl, placeholder, onSearch }) {
-    return (jsxRuntime.jsxs("div", { className: "rls-search-input", children: [jsxRuntime.jsx(RlsInput, { formControl: formControl, placeholder: placeholder }), onSearch && jsxRuntime.jsx(RlsButtonAction, { icon: "search", onClick: onSearch })] }));
-}
-
 function RlsSkeleton({ rlsTheme }) {
     return jsxRuntime.jsx("div", { className: "rls-skeleton", "rls-theme": rlsTheme });
 }
 
 function RlsSkeletonText({ active, children, rlsTheme }) {
-    return (jsxRuntime.jsx("div", { className: renderClassStatus('rls-skeleton-text', { active }), "rls-theme": rlsTheme, children: jsxRuntime.jsx("span", { className: "rls-skeleton-text__value", children: children }) }));
+    return (jsxRuntime.jsx("div", { className: "rls-skeleton-text", "rls-theme": rlsTheme, children: active ? (jsxRuntime.jsx(RlsSkeleton, {})) : (jsxRuntime.jsx("span", { className: "rls-skeleton-text__value", children: children })) }));
 }
 
 function RlsSwitch({ checked, disabled, rlsTheme, onClick }) {
@@ -249,12 +285,16 @@ function RlsButtonToggle({ onAction, options, type, automatic, disabled, rlsThem
                 }), children: jsxRuntime.jsx("ul", { children: options.map((action, index) => (jsxRuntime.jsx("li", { className: "truncate", onClick: () => onSelectAction(action), children: action.label }, index))) }) })] }));
 }
 
+function RlsMessageFormError({ className, formControl }) {
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: formControl?.wrong && (jsxRuntime.jsx("div", { className: className, children: jsxRuntime.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl?.error?.message }) })) }));
+}
+
 function RlsFieldMoney({ children, decimals, disabled, formControl, placeholder, symbol, rlsTheme, value, onValue }) {
     return (jsxRuntime.jsxs("div", { className: renderClassStatus('rls-field-box', {
             focused: formControl?.focused,
             error: formControl?.wrong,
             disabled: formControl?.disabled || disabled
-        }, 'rls-field-money'), "rls-theme": rlsTheme, children: [children && jsxRuntime.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntime.jsx("div", { className: "rls-field-box__component", children: jsxRuntime.jsx("div", { className: "rls-field-box__body", children: jsxRuntime.jsx(RlsInputMoney, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, symbol: symbol, decimals: decimals, onValue: onValue }) }) }), formControl?.touched && formControl?.error && (jsxRuntime.jsx("div", { className: "rls-field-box__error", children: jsxRuntime.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }));
+        }, 'rls-field-money'), "rls-theme": rlsTheme, children: [children && jsxRuntime.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntime.jsx("div", { className: "rls-field-box__component", children: jsxRuntime.jsx("div", { className: "rls-field-box__body", children: jsxRuntime.jsx(RlsInputMoney, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, symbol: symbol, decimals: decimals, onValue: onValue }) }) }), jsxRuntime.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })] }));
 }
 
 function RlsFieldNumber({ children, disabled, formControl, placeholder, rlsTheme, value, onValue }) {
@@ -262,7 +302,7 @@ function RlsFieldNumber({ children, disabled, formControl, placeholder, rlsTheme
             focused: formControl?.focused,
             error: formControl?.wrong,
             disabled: formControl?.disabled || disabled
-        }, 'rls-field-number'), "rls-theme": rlsTheme, children: [children && jsxRuntime.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntime.jsx("div", { className: "rls-field-box__component", children: jsxRuntime.jsx("div", { className: "rls-field-box__body", children: jsxRuntime.jsx(RlsInputNumber, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), formControl?.touched && formControl?.error && (jsxRuntime.jsx("div", { className: "rls-field-box__error", children: jsxRuntime.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }));
+        }, 'rls-field-number'), "rls-theme": rlsTheme, children: [children && jsxRuntime.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntime.jsx("div", { className: "rls-field-box__component", children: jsxRuntime.jsx("div", { className: "rls-field-box__body", children: jsxRuntime.jsx(RlsInputNumber, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), jsxRuntime.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })] }));
 }
 
 function RlsFieldPassword({ children, disabled, formControl, placeholder, rlsTheme }) {
@@ -274,7 +314,7 @@ function RlsFieldPassword({ children, disabled, formControl, placeholder, rlsThe
             focused: formControl?.focused,
             error: formControl?.wrong,
             disabled: formControl?.disabled || disabled
-        }, 'rls-field-password'), "rls-theme": rlsTheme, children: [children && jsxRuntime.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntime.jsx("div", { className: "rls-field-box__component", children: jsxRuntime.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntime.jsx(RlsInputPassword, { formControl: formControl, disabled: disabled, placeholder: placeholder, type: password ? 'password' : 'text' }), jsxRuntime.jsx(RlsButtonAction, { icon: password ? 'eye' : 'eye-off', onClick: onToggleInput })] }) }), formControl?.touched && formControl?.error && (jsxRuntime.jsx("div", { className: "rls-field-box__error", children: jsxRuntime.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }));
+        }, 'rls-field-password'), "rls-theme": rlsTheme, children: [children && jsxRuntime.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntime.jsx("div", { className: "rls-field-box__component", children: jsxRuntime.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntime.jsx(RlsInputPassword, { formControl: formControl, disabled: disabled, placeholder: placeholder, type: password ? 'password' : 'text' }), jsxRuntime.jsx(RlsButtonAction, { icon: password ? 'eye' : 'eye-off', onClick: onToggleInput })] }) }), jsxRuntime.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })] }));
 }
 
 function RlsFieldText({ children, disabled, formControl, placeholder, rlsTheme, value, onValue }) {
@@ -282,13 +322,13 @@ function RlsFieldText({ children, disabled, formControl, placeholder, rlsTheme,
             focused: formControl?.focused,
             error: formControl?.wrong,
             disabled: formControl?.disabled || disabled
-        }, 'rls-field-text'), "rls-theme": rlsTheme, children: [children && jsxRuntime.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntime.jsx("div", { className: "rls-field-box__component", children: jsxRuntime.jsx("div", { className: "rls-field-box__body", children: jsxRuntime.jsx(RlsInputText, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), formControl?.touched && formControl?.error && (jsxRuntime.jsx("div", { className: "rls-field-box__error", children: jsxRuntime.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }));
+        }, 'rls-field-text'), "rls-theme": rlsTheme, children: [children && jsxRuntime.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntime.jsx("div", { className: "rls-field-box__component", children: jsxRuntime.jsx("div", { className: "rls-field-box__body", children: jsxRuntime.jsx(RlsInputText, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), jsxRuntime.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })] }));
 }
 
 function RlsLabelCheckBox({ children, disabled, extended, formControl, rlsTheme }) {
-    const [checked, setChecked] = react.useState(formControl?.value || false);
+    const [checked, setChecked] = react.useState(!!formControl?.state);
     react.useEffect(() => {
-        setChecked(formControl?.state || false);
+        setChecked(!!formControl?.state);
     }, [formControl?.state]);
     function onToggle() {
         if (formControl) {
@@ -305,7 +345,7 @@ function RlsLabelCheckBox({ children, disabled, extended, formControl, rlsTheme
 }
 
 function RlsLabelRadioButton({ children, disabled, extended, formControl, rlsTheme, value }) {
-    const [checked, setChecked] = react.useState(formControl?.state || false);
+    const [checked, setChecked] = react.useState(formControl?.state === value);
     react.useEffect(() => {
         setChecked(formControl?.state === value);
     }, [formControl?.state]);
@@ -321,9 +361,9 @@ function RlsLabelRadioButton({ children, disabled, extended, formControl, rlsThe
 }
 
 function RlsLabelSwitch({ children, disabled, extended, formControl, rlsTheme }) {
-    const [checked, setChecked] = react.useState(formControl?.value || false);
+    const [checked, setChecked] = react.useState(!!formControl?.state);
     react.useEffect(() => {
-        setChecked(formControl?.state || false);
+        setChecked(!!formControl?.state);
     }, [formControl?.state]);
     function onToggle() {
         if (formControl) {
@@ -549,13 +589,374 @@ function RlsPagination({ elements, count: defaultCount, filter, onElements, onPa
                 }) }), jsxRuntime.jsx("div", { className: "rls-pagination__description", children: description }), jsxRuntime.jsxs("div", { className: "rls-pagination__actions", children: [jsxRuntime.jsx("button", { className: "rls-pagination__action", onClick: goNextPagination, disabled: lastPage, children: jsxRuntime.jsx(RlsIcon, { value: "arrow-ios-right" }) }), jsxRuntime.jsx("button", { className: "rls-pagination__action", onClick: goLastPagination, disabled: lastPage, children: jsxRuntime.jsx(RlsIcon, { value: "arrowhead-right" }) })] })] }));
 }
 
+const dateI18n = i18n.i18n({
+    es: {
+        // Months
+        january: 'Enero',
+        february: 'Febrero',
+        march: 'Marzo',
+        april: 'Abril',
+        may: 'Mayo',
+        june: 'Junio',
+        july: 'Julio',
+        august: 'Agosto',
+        september: 'Septiembre',
+        october: 'Octubre',
+        november: 'Noviembre',
+        december: 'Diciembre',
+        // Days
+        monday: 'Lunes',
+        tuesday: 'Martes',
+        wednesday: 'Miércoles',
+        thursday: 'Jueves',
+        friday: 'Viernes',
+        saturday: 'Sábado',
+        sunday: 'Domingo',
+        // Timestamps
+        year: 'año',
+        month: 'mes',
+        week: 'semana',
+        day: 'día',
+        hour: 'hora',
+        minute: 'minuto',
+        second: 'segundo'
+    },
+    en: {
+        // Months
+        january: 'January',
+        february: 'February',
+        march: 'March',
+        april: 'April',
+        may: 'May',
+        june: 'June',
+        july: 'July',
+        august: 'August',
+        september: 'September',
+        october: 'October',
+        november: 'November',
+        december: 'December',
+        // Days
+        monday: 'Monday',
+        tuesday: 'Tuesday',
+        wednesday: 'Wednesday',
+        thursday: 'Thursday',
+        friday: 'Friday',
+        saturday: 'Saturday',
+        sunday: 'Sunday',
+        // Timestamps
+        year: 'year',
+        month: 'month',
+        week: 'week',
+        day: 'day',
+        hour: 'hour',
+        minute: 'minute',
+        second: 'second'
+    }
+});
+
+var Miliseconds;
+(function (Miliseconds) {
+    Miliseconds[Miliseconds["Year"] = 31536000000] = "Year";
+    Miliseconds[Miliseconds["Month"] = 2592000000] = "Month";
+    Miliseconds[Miliseconds["Week"] = 604800000] = "Week";
+    Miliseconds[Miliseconds["Day"] = 86400000] = "Day";
+    Miliseconds[Miliseconds["Hour"] = 3600000] = "Hour";
+    Miliseconds[Miliseconds["Minute"] = 60000] = "Minute";
+    Miliseconds[Miliseconds["Second"] = 1000] = "Second";
+})(Miliseconds || (Miliseconds = {}));
+var Day;
+(function (Day) {
+    Day[Day["Sunday"] = 0] = "Sunday";
+    Day[Day["Monday"] = 1] = "Monday";
+    Day[Day["Tuesday"] = 2] = "Tuesday";
+    Day[Day["Wednesday"] = 3] = "Wednesday";
+    Day[Day["Thursday"] = 4] = "Thursday";
+    Day[Day["Friday"] = 5] = "Friday";
+    Day[Day["Saturday"] = 6] = "Saturday";
+})(Day || (Day = {}));
+var Month;
+(function (Month) {
+    Month[Month["January"] = 0] = "January";
+    Month[Month["February"] = 1] = "February";
+    Month[Month["March"] = 2] = "March";
+    Month[Month["April"] = 3] = "April";
+    Month[Month["May"] = 4] = "May";
+    Month[Month["June"] = 5] = "June";
+    Month[Month["July"] = 6] = "July";
+    Month[Month["August"] = 7] = "August";
+    Month[Month["September"] = 8] = "September";
+    Month[Month["October"] = 9] = "October";
+    Month[Month["November"] = 10] = "November";
+    Month[Month["December"] = 11] = "December";
+})(Month || (Month = {}));
+var MonthDay;
+(function (MonthDay) {
+    MonthDay[MonthDay["January"] = 31] = "January";
+    MonthDay[MonthDay["February"] = 28] = "February";
+    MonthDay[MonthDay["March"] = 31] = "March";
+    MonthDay[MonthDay["April"] = 30] = "April";
+    MonthDay[MonthDay["May"] = 31] = "May";
+    MonthDay[MonthDay["June"] = 30] = "June";
+    MonthDay[MonthDay["July"] = 31] = "July";
+    MonthDay[MonthDay["August"] = 31] = "August";
+    MonthDay[MonthDay["September"] = 30] = "September";
+    MonthDay[MonthDay["October"] = 31] = "October";
+    MonthDay[MonthDay["November"] = 30] = "November";
+    MonthDay[MonthDay["December"] = 31] = "December";
+})(MonthDay || (MonthDay = {}));
+
+let MONTH_NAMES_I18N = [];
+let MONTH_LABELS_I18N = [];
+let DAY_NAMES_I18N = [];
+let DAY_LABELS_I18N = [];
+function loadI18n(language = 'es') {
+    MONTH_NAMES_I18N = [
+        dateI18n('january', { language }),
+        dateI18n('february', { language }),
+        dateI18n('march', { language }),
+        dateI18n('april', { language }),
+        dateI18n('may', { language }),
+        dateI18n('june', { language }),
+        dateI18n('july', { language }),
+        dateI18n('august', { language }),
+        dateI18n('september', { language }),
+        dateI18n('october', { language }),
+        dateI18n('november', { language }),
+        dateI18n('december', { language })
+    ];
+    MONTH_LABELS_I18N = MONTH_NAMES_I18N.map((name) => name.substring(0, 3));
+    DAY_NAMES_I18N = [
+        dateI18n('sunday', { language }),
+        dateI18n('monday', { language }),
+        dateI18n('tuesday', { language }),
+        dateI18n('wednesday', { language }),
+        dateI18n('thursday', { language }),
+        dateI18n('friday', { language }),
+        dateI18n('saturday', { language })
+    ];
+    DAY_LABELS_I18N = DAY_NAMES_I18N.map((name) => name.substring(0, 3));
+}
+function isNumber(value) {
+    return value !== undefined && value !== null;
+}
+loadI18n();
+i18n.i18nSubscribe((language) => loadI18n(language));
+const MONTH_DAYS = [
+    MonthDay.January,
+    MonthDay.February,
+    MonthDay.March,
+    MonthDay.April,
+    MonthDay.May,
+    MonthDay.June,
+    MonthDay.July,
+    MonthDay.August,
+    MonthDay.September,
+    MonthDay.October,
+    MonthDay.November,
+    MonthDay.December
+];
+function MONTH_NAMES(index) {
+    return isNumber(index) ? MONTH_NAMES_I18N[index] || '' : MONTH_NAMES_I18N;
+}
+function MONTH_LABELS(index) {
+    return isNumber(index) ? MONTH_LABELS_I18N[index] || '' : MONTH_LABELS_I18N;
+}
+function DAY_NAMES(index) {
+    return isNumber(index) ? DAY_NAMES_I18N[index] || '' : DAY_NAMES_I18N;
+}
+function DAY_LABELS(index) {
+    return isNumber(index) ? DAY_LABELS_I18N[index] || '' : DAY_LABELS_I18N;
+}
+
+function completFormat(value, size) {
+    return value.toString().padStart(size, '0');
+}
+function hourFormat(date) {
+    const hour = date.getHours();
+    return hour > 12 ? hour - 12 : hour === 0 ? 12 : hour;
+}
+function verifyDayInYear(date, year) {
+    const days = getDaysOfMonth(year, date.getMonth());
+    if (days < date.getDate()) {
+        date.setDate(days);
+    }
+    date.setFullYear(year); // Establecer el año
+}
+function verifyDayInMonth(date, month) {
+    const days = getDaysOfMonth(date.getFullYear(), month);
+    if (days < date.getDate()) {
+        date.setDate(days);
+    }
+    date.setMonth(month); // Establecer el mes
+}
+const formatters = {
+    dd: (date) => {
+        return completFormat(date.getDate(), 2);
+    },
+    dw: (date) => {
+        return DAY_NAMES()[date.getDay()];
+    },
+    dx: (date) => {
+        return DAY_NAMES()[date.getDay()];
+    },
+    mm: (date) => {
+        return completFormat(date.getMonth() + 1, 2);
+    },
+    mn: (date) => {
+        return MONTH_NAMES(date.getMonth());
+    },
+    mx: (date) => {
+        return MONTH_LABELS(date.getMonth());
+    },
+    aa: (date) => {
+        return completFormat(date.getFullYear(), 4);
+    },
+    hh: (date) => {
+        return completFormat(date.getHours(), 2);
+    },
+    ii: (date) => {
+        return completFormat(date.getMinutes(), 2);
+    },
+    ss: (date) => {
+        return completFormat(date.getSeconds(), 2);
+    },
+    hz: (date) => {
+        return completFormat(hourFormat(date), 2);
+    },
+    zz: (date) => {
+        return date.getHours() > 11 ? 'PM' : 'AM';
+    }
+};
+const createElapsedTime = (value, single, charPlural = 's', plural) => {
+    plural = plural || `${single}${charPlural}`;
+    const label = `${single}(${charPlural})`;
+    return {
+        value,
+        label,
+        single,
+        plural
+    };
+};
+[
+    createElapsedTime(Miliseconds.Year, 'año'),
+    createElapsedTime(Miliseconds.Month, 'mes', 'es'),
+    createElapsedTime(Miliseconds.Week, 'semana'),
+    createElapsedTime(Miliseconds.Day, 'día', 's', 'dias'),
+    createElapsedTime(Miliseconds.Hour, 'hora'),
+    createElapsedTime(Miliseconds.Minute, 'minuto'),
+    createElapsedTime(Miliseconds.Second, 'segundo')
+];
+function getDateWeight(date) {
+    return date.getFullYear() * 365 + (date.getMonth() + 1) * 30 + date.getDate();
+}
+function dateIsEquals(date, compare = new Date()) {
+    return date.getTime() === compare.getTime();
+}
+function dateIsEqualsWeight(date, compare = new Date()) {
+    return getDateWeight(date) === getDateWeight(compare);
+}
+function dateIsBefore(date, compare = new Date()) {
+    return date.getTime() > compare.getTime();
+}
+function dateIsAfter(date, compare = new Date()) {
+    return date.getTime() < compare.getTime();
+}
+function dateIsBetween(minDate, maxDate, compare = new Date()) {
+    return dateIsAfter(minDate, compare) && dateIsBefore(maxDate, compare);
+}
+function getTimeDifference(date, compare = new Date()) {
+    return date.getTime() - compare.getTime();
+}
+function normalizeMinTime(date) {
+    const normalize = new Date(date.getTime());
+    normalize.setHours(0);
+    normalize.setMinutes(0);
+    normalize.setSeconds(0);
+    normalize.setMilliseconds(0);
+    return normalize;
+}
+function normalizeMaxTime(date) {
+    const normalize = new Date(date.getTime());
+    normalize.setHours(23);
+    normalize.setMinutes(59);
+    normalize.setSeconds(59);
+    normalize.setMilliseconds(0);
+    return normalize;
+}
+function getDaysOfMonth(year, month) {
+    return month === 1 && isLeapYear(year) ? 29 : MONTH_DAYS[month];
+}
+function isLeapYear(value) {
+    const year = value instanceof Date ? value.getFullYear() : value;
+    return year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
+}
+const regInterpolation = /{([^{}]*)}/g;
+function dateFormatTemplate(date, template) {
+    return template.replace(regInterpolation, (value, key) => formatters[key] ? formatters[key](date) : value);
+}
+function assignYearInDate(date, year) {
+    const newDate = new Date(date.getTime());
+    verifyDayInYear(newDate, year);
+    newDate.setFullYear(year);
+    return newDate;
+}
+function assignMonthInDate(date, month) {
+    const newDate = new Date(date.getTime());
+    verifyDayInMonth(newDate, month);
+    newDate.setMonth(month);
+    return newDate;
+}
+function assignDayInDate(date, day) {
+    const newDate = new Date(date.getTime());
+    newDate.setDate(day);
+    return newDate;
+}
+
+class DateRange {
+    constructor(minDate, maxDate) {
+        this.minDate = normalizeMinTime(minDate);
+        this.maxDate =
+            maxDate && dateIsBefore(maxDate, minDate)
+                ? normalizeMinTime(maxDate)
+                : normalizeMinTime(minDate);
+    }
+    get minISOFormat() {
+        return this.minDate.toISOString();
+    }
+    get maxISOFormat() {
+        return this.maxDate.toISOString();
+    }
+    between(date) {
+        return dateIsBetween(this.minDate, this.maxDate, date);
+    }
+    equals({ maxDate, minDate }) {
+        return dateIsEquals(this.minDate, minDate) && dateIsEquals(this.maxDate, maxDate);
+    }
+    recalculate(date) {
+        if (dateIsBefore(this.minDate, date)) {
+            return new DateRange(date, this.maxDate);
+        }
+        if (dateIsAfter(this.maxDate, date)) {
+            return new DateRange(this.minDate, date);
+        }
+        const minDifference = getTimeDifference(date, this.minDate);
+        const maxDifference = getTimeDifference(this.maxDate, date);
+        return minDifference > maxDifference
+            ? new DateRange(this.minDate, date)
+            : new DateRange(date, this.maxDate);
+    }
+    static now() {
+        return new DateRange(new Date());
+    }
+}
+
 function dateIsOutRangeMin(props) {
     const { date, minDate } = props;
-    return !!minDate && helpersDate.dateIsBefore(helpersDate.normalizeMinTime(minDate), date);
+    return !!minDate && dateIsBefore(normalizeMinTime(minDate), date);
 }
 function dateIsOutRangeMax(props) {
     const { date, maxDate } = props;
-    return !!maxDate && helpersDate.dateIsAfter(helpersDate.normalizeMaxTime(maxDate), date);
+    return !!maxDate && dateIsAfter(normalizeMaxTime(maxDate), date);
 }
 function dateOutRange(props) {
     return dateIsOutRangeMin(props) || dateIsOutRangeMax(props);
@@ -579,8 +980,8 @@ function createDayState(props, today, value) {
         disabled: dayIsOutside(props, value || 0),
         focused: !!value && day === value,
         forbidden: !value,
-        selected: !!dateValue && helpersDate.dateIsEqualsWeight(date, dateValue),
-        today: !!dateValue && helpersDate.dateIsEqualsWeight(today, dateValue),
+        selected: !!dateValue && dateIsEqualsWeight(date, dateValue),
+        today: !!dateValue && dateIsEqualsWeight(today, dateValue),
         value
     };
 }
@@ -605,7 +1006,7 @@ function createDaysPending$1(props, today, days) {
     return daysPending;
 }
 function createNextWeeks$1(props, date, today) {
-    const daysMonth = helpersDate.getDaysOfMonth(date.getFullYear(), date.getMonth());
+    const daysMonth = getDaysOfMonth(date.getFullYear(), date.getMonth());
     const weeks = [];
     let days = [];
     let countDays = 1;
@@ -630,13 +1031,13 @@ function createNextWeeks$1(props, date, today) {
 function dayIsOutsideMin(props, day) {
     const { month, year, minDate } = props;
     return minDate
-        ? helpersDate.getDateWeight(new Date(year, month, day)) < helpersDate.getDateWeight(minDate)
+        ? getDateWeight(new Date(year, month, day)) < getDateWeight(minDate)
         : false;
 }
 function dayIsOutsideMax(props, day) {
     const { month, year, maxDate } = props;
     return maxDate
-        ? helpersDate.getDateWeight(new Date(year, month, day)) > helpersDate.getDateWeight(maxDate)
+        ? getDateWeight(new Date(year, month, day)) > getDateWeight(maxDate)
         : false;
 }
 function dayIsOutside(props, day) {
@@ -671,7 +1072,7 @@ function rangeIsSelected({ range }, base, day) {
         dateIsSelected(base, range.maxDate, day));
 }
 function dayIsRange({ range }, base, day) {
-    return helpersDate.dateIsBetween(range.minDate, range.maxDate, helpersDate.assignDayInDate(base, day));
+    return dateIsBetween(range.minDate, range.maxDate, assignDayInDate(base, day));
 }
 function createDayRangeState(props, base, day) {
     return {
@@ -706,7 +1107,7 @@ function createDaysPending(props, base, days) {
 function createNextWeeks(props, base) {
     const weeks = [];
     const { date } = props;
-    const dayCount = helpersDate.getDaysOfMonth(date.getFullYear(), date.getMonth());
+    const dayCount = getDaysOfMonth(date.getFullYear(), date.getMonth());
     let days = [];
     let countDays = 1;
     let day = DAYS_WEEK - base.getDay() + 1;
@@ -730,13 +1131,13 @@ function createNextWeeks(props, base) {
 function dayRangeIsOutsideMin(props, day) {
     const { date, minDate } = props;
     return minDate
-        ? helpersDate.getDateWeight(helpersDate.assignDayInDate(date, day)) < helpersDate.getDateWeight(minDate)
+        ? getDateWeight(assignDayInDate(date, day)) < getDateWeight(minDate)
         : false;
 }
 function dayRangeIsOutsideMax(props, day) {
     const { date, maxDate } = props;
     return maxDate
-        ? helpersDate.getDateWeight(helpersDate.assignDayInDate(date, day)) > helpersDate.getDateWeight(maxDate)
+        ? getDateWeight(assignDayInDate(date, day)) > getDateWeight(maxDate)
         : false;
 }
 function dayRangeIsOutside(props, day) {
@@ -754,7 +1155,7 @@ function createMonthState(props, value) {
     return {
         disabled: monthIsOutside(props, value),
         focused: value === month,
-        label: helpersDate.MONTH_NAMES()[value],
+        label: MONTH_NAMES()[value],
         selected: date.getFullYear() === year && value === date.getMonth(),
         value
     };
@@ -784,23 +1185,23 @@ function checkMonthPicker(props) {
 }
 function createMonthPicker(props) {
     return [
-        createMonthState(props, helpersDate.Month.January),
-        createMonthState(props, helpersDate.Month.February),
-        createMonthState(props, helpersDate.Month.March),
-        createMonthState(props, helpersDate.Month.April),
-        createMonthState(props, helpersDate.Month.May),
-        createMonthState(props, helpersDate.Month.June),
-        createMonthState(props, helpersDate.Month.July),
-        createMonthState(props, helpersDate.Month.August),
-        createMonthState(props, helpersDate.Month.September),
-        createMonthState(props, helpersDate.Month.October),
-        createMonthState(props, helpersDate.Month.November),
-        createMonthState(props, helpersDate.Month.December)
+        createMonthState(props, Month.January),
+        createMonthState(props, Month.February),
+        createMonthState(props, Month.March),
+        createMonthState(props, Month.April),
+        createMonthState(props, Month.May),
+        createMonthState(props, Month.June),
+        createMonthState(props, Month.July),
+        createMonthState(props, Month.August),
+        createMonthState(props, Month.September),
+        createMonthState(props, Month.October),
+        createMonthState(props, Month.November),
+        createMonthState(props, Month.December)
     ];
 }
 function monthIsLimitMin(props) {
     const { month, date, minDate } = props;
-    if (helpersAdvanced.itIsDefined(month) && date) {
+    if (itIsDefined(month) && date) {
         const minYear = minDate ? minDate.getFullYear() : 0;
         const minMonth = minDate ? minDate.getMonth() : 0;
         return date.getFullYear() === minYear && month <= minMonth;
@@ -809,7 +1210,7 @@ function monthIsLimitMin(props) {
 }
 function monthIsLimitMax(props) {
     const { month, date, maxDate } = props;
-    if (helpersAdvanced.itIsDefined(month) && date) {
+    if (itIsDefined(month) && date) {
         const maxYear = maxDate ? maxDate.getFullYear() : 10000;
         const maxMonth = maxDate ? maxDate.getMonth() : 11;
         return date.getFullYear() === maxYear && month >= maxMonth;
@@ -889,6 +1290,30 @@ function createYearPicker(props) {
     };
 }
 
+const normalize = (word) => {
+    return word
+        .slice()
+        .replace(/á/g, 'a')
+        .replace(/Á/g, 'A')
+        .replace(/é/g, 'e')
+        .replace(/É/g, 'E')
+        .replace(/í/g, 'i')
+        .replace(/Í/g, 'I')
+        .replace(/ó/g, 'o')
+        .replace(/Ó/g, 'O')
+        .replace(/ú/g, 'u')
+        .replace(/Ú/g, 'U');
+};
+const hasPattern = (word, pattern, force = false) => {
+    let filter = pattern.toLowerCase();
+    let test = word.toLowerCase();
+    if (force) {
+        test = normalize(test);
+        filter = normalize(filter);
+    }
+    return !!test.match(`^.*${filter}.*$`);
+};
+
 function createEmptyStore() {
     return {
         coincidences: undefined,
@@ -904,7 +1329,7 @@ function searchForPattern(props) {
     let newStore = store;
     let search = false;
     while (!search && newStore) {
-        search = helpersString.hasPattern(pattern || '', newStore.pattern, true);
+        search = hasPattern(pattern || '', newStore.pattern, true);
         if (!search) {
             newStore = newStore.previous;
         }
@@ -1049,7 +1474,7 @@ function RlsPickerDay({ date, disabled: disabledPicker, formControl, maxDate, mo
         return {
             date: currentDate,
             day: formControl?.state || value,
-            month: helpersAdvanced.itIsDefined(month) ? month : currentDate.getMonth(),
+            month: itIsDefined(month) ? month : currentDate.getMonth(),
             year: year || currentDate.getFullYear(),
             minDate,
             maxDate
@@ -1064,7 +1489,7 @@ function RlsPickerDay({ date, disabled: disabledPicker, formControl, maxDate, mo
             onValue(value);
         }
     }
-    return (jsxRuntime.jsxs("div", { className: "rls-picker-day", "rls-theme": rlsTheme, children: [jsxRuntime.jsx("div", { className: "rls-picker-day__header", children: helpersDate.DAY_LABELS().map((title, index) => (jsxRuntime.jsx("label", { className: "rls-picker-day__label", children: title }, index))) }), jsxRuntime.jsx("div", { className: "rls-picker-day__component", children: weeks.map(({ days }, index) => (jsxRuntime.jsx("div", { className: "rls-picker-day__week", children: days.map(({ value, disabled, focused, forbidden, selected, today }, index) => (jsxRuntime.jsx("div", { className: renderClassStatus('rls-picker-day__element', {
+    return (jsxRuntime.jsxs("div", { className: "rls-picker-day", "rls-theme": rlsTheme, children: [jsxRuntime.jsx("div", { className: "rls-picker-day__header", children: DAY_LABELS().map((title, index) => (jsxRuntime.jsx("label", { className: "rls-picker-day__label", children: title }, index))) }), jsxRuntime.jsx("div", { className: "rls-picker-day__component", children: weeks.map(({ days }, index) => (jsxRuntime.jsx("div", { className: "rls-picker-day__week", children: days.map(({ value, disabled, focused, forbidden, selected, today }, index) => (jsxRuntime.jsx("div", { className: renderClassStatus('rls-picker-day__element', {
                             disabled: disabled || disabledPicker,
                             focused,
                             forbidden,
@@ -1076,8 +1501,8 @@ function RlsPickerDay({ date, disabled: disabledPicker, formControl, maxDate, mo
 const DATE_RANGE_FORMAT = '{dd}/{mx}/{aa}';
 
 function RlsPickerDayRange({ date, disabled: disabledPicker, formControl, maxDate, minDate, rlsTheme }) {
-    const currentRange = formControl?.state || helpersDate.DateRange.now();
-    const currentDate = helpersDate.normalizeMinTime(date || currentRange.minDate);
+    const currentRange = formControl?.state || DateRange.now();
+    const currentDate = normalizeMinTime(date || currentRange.minDate);
     const sourceDate = react.useRef(currentRange.minDate);
     const [weeks, setWeeks] = react.useState([]);
     const [range, setRange] = react.useState(currentRange);
@@ -1091,15 +1516,15 @@ function RlsPickerDayRange({ date, disabled: disabledPicker, formControl, maxDat
         }));
     }, [range, date, minDate, maxDate]);
     function onChange(value) {
-        const date = helpersDate.assignDayInDate(currentDate, value);
-        const range = helpersDate.dateIsBefore(date, sourceDate.current)
-            ? new helpersDate.DateRange(sourceDate.current, date)
-            : new helpersDate.DateRange(date, sourceDate.current);
+        const date = assignDayInDate(currentDate, value);
+        const range = dateIsBefore(date, sourceDate.current)
+            ? new DateRange(sourceDate.current, date)
+            : new DateRange(date, sourceDate.current);
         sourceDate.current = date;
         setRange(range);
         formControl?.setState(range);
     }
-    return (jsxRuntime.jsxs("div", { className: "rls-picker-day-range", "rls-theme": rlsTheme, children: [jsxRuntime.jsx("div", { className: "rls-picker-day-range__title", children: helpersDate.dateFormatTemplate(sourceDate.current, DATE_RANGE_FORMAT) }), jsxRuntime.jsx("div", { className: "rls-picker-day-range__header", children: helpersDate.DAY_LABELS().map((title, index) => (jsxRuntime.jsx("label", { className: "rls-picker-day-range__label", children: title }, index))) }), jsxRuntime.jsx("div", { className: "rls-picker-day-range__component", children: weeks.map(({ days }, index) => (jsxRuntime.jsx("div", { className: "rls-picker-day-range__week", children: days.map(({ disabled, end, forbidden, source, ranged, value }, index) => (jsxRuntime.jsx("div", { className: renderClassStatus('rls-picker-day-range__element', {
+    return (jsxRuntime.jsxs("div", { className: "rls-picker-day-range", "rls-theme": rlsTheme, children: [jsxRuntime.jsx("div", { className: "rls-picker-day-range__title", children: dateFormatTemplate(sourceDate.current, DATE_RANGE_FORMAT) }), jsxRuntime.jsx("div", { className: "rls-picker-day-range__header", children: DAY_LABELS().map((title, index) => (jsxRuntime.jsx("label", { className: "rls-picker-day-range__label", children: title }, index))) }), jsxRuntime.jsx("div", { className: "rls-picker-day-range__component", children: weeks.map(({ days }, index) => (jsxRuntime.jsx("div", { className: "rls-picker-day-range__week", children: days.map(({ disabled, end, forbidden, source, ranged, value }, index) => (jsxRuntime.jsx("div", { className: renderClassStatus('rls-picker-day-range__element', {
                             disabled: disabled || disabledPicker,
                             end,
                             forbidden,
@@ -1119,14 +1544,14 @@ function RlsPickerMonth({ date, disabled: disabledPicker, formControl, maxDate,
     }, [date, year, value, minDate, maxDate]);
     react.useEffect(() => {
         const month = checkMonthPicker(createPickerProps());
-        helpersAdvanced.itIsDefined(month)
+        itIsDefined(month)
             ? formControl?.setState(month)
             : setValue(formControl?.state || currentDate.getMonth());
     }, [formControl?.state]);
     function createPickerProps() {
         return {
             date: currentDate,
-            month: helpersAdvanced.itIsDefined(formControl?.state) ? formControl?.state : value,
+            month: itIsDefined(formControl?.state) ? formControl?.state : value,
             year: year || currentDate.getFullYear(),
             minDate,
             maxDate
@@ -1155,20 +1580,20 @@ function RlsPickerMonthTitle({ monthControl, type, yearControl, date, disabled,
         minDate,
         month: monthControl.state
     });
-    const monthName = helpersDate.MONTH_NAMES()[monthControl.state || 0];
+    const monthName = MONTH_NAMES()[monthControl.state || 0];
     function onPreviousMonth() {
-        if (helpersAdvanced.itIsDefined(monthControl.state) && helpersAdvanced.itIsDefined(yearControl.state)) {
-            if (monthControl.state > helpersDate.Month.January) {
+        if (itIsDefined(monthControl.state) && itIsDefined(yearControl.state)) {
+            if (monthControl.state > Month.January) {
                 monthControl.setState(monthControl.state - 1);
             }
             else {
-                monthControl.setState(helpersDate.Month.December);
+                monthControl.setState(Month.December);
                 yearControl.setState(yearControl.state - 1);
             }
         }
     }
     function onPreviousYear() {
-        if (helpersAdvanced.itIsDefined(yearControl.state)) {
+        if (itIsDefined(yearControl.state)) {
             yearControl.setState(yearControl.state - 1);
         }
     }
@@ -1176,18 +1601,18 @@ function RlsPickerMonthTitle({ monthControl, type, yearControl, date, disabled,
         type === 'month' ? onPreviousMonth() : onPreviousYear();
     }
     function onNextMonth() {
-        if (helpersAdvanced.itIsDefined(monthControl.state) && helpersAdvanced.itIsDefined(yearControl.state)) {
-            if (monthControl.state < helpersDate.Month.December) {
+        if (itIsDefined(monthControl.state) && itIsDefined(yearControl.state)) {
+            if (monthControl.state < Month.December) {
                 monthControl.setState(monthControl.state + 1);
             }
             else {
-                monthControl.setState(helpersDate.Month.January);
+                monthControl.setState(Month.January);
                 yearControl.setState(yearControl.state + 1);
             }
         }
     }
     function onNextYear() {
-        if (helpersAdvanced.itIsDefined(yearControl.state)) {
+        if (itIsDefined(yearControl.state)) {
             yearControl.setState(yearControl.state + 1);
         }
     }
@@ -1211,7 +1636,7 @@ function RlsPickerYear({ date, disabled: disabledPicker, formControl, maxDate, m
     }, [date, year, value, minDate, maxDate]);
     react.useEffect(() => {
         const year = checkYearPicker(createPickerProps());
-        helpersAdvanced.itIsDefined(year)
+        itIsDefined(year)
             ? formControl?.setState(year)
             : setValue(formControl?.state || currentDate.getFullYear());
     }, [formControl?.state]);
@@ -1275,7 +1700,7 @@ const reactI18n = i18n.i18n({
     }
 });
 
-class ConfirmationResult extends helpersAdvanced.PartialSealed {
+class ConfirmationResult extends PartialSealed {
     static approved() {
         return new ConfirmationResult('approved');
     }
@@ -1284,15 +1709,7 @@ class ConfirmationResult extends helpersAdvanced.PartialSealed {
     }
 }
 function RlsConfirmation({ approved, content, reject, rlsTheme, subtitle, title, visible }) {
-    return (jsxRuntime.jsxs("div", { className: renderClassStatus('rls-confirmation', { visible }), "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: "rls-confirmation__component", children: [jsxRuntime.jsxs("div", { className: "rls-confirmation__header", children: [title && (jsxRuntime.jsx("div", { className: "rls-confirmation__header__title", children: title })), subtitle && (jsxRuntime.jsx("div", { className: "rls-confirmation__header__subtitle", children: subtitle }))] }), jsxRuntime.jsx("div", { className: "rls-confirmation__body", children: content && (jsxRuntime.jsx("div", { className: "rls-confirmation__body__content", children: content })) }), (approved || reject) && (jsxRuntime.jsx("div", { className: "rls-confirmation__footer", children: jsxRuntime.jsxs("div", { className: "rls-confirmation__footer__actions", children: [approved && (jsxRuntime.jsx(RlsButton, { type: "raised", onClick: () => {
-                                        if (approved.onClick) {
-                                            approved.onClick();
-                                        }
-                                    }, children: approved.label })), reject && (jsxRuntime.jsx(RlsButton, { type: "outline", onClick: () => {
-                                        if (reject.onClick) {
-                                            reject.onClick();
-                                        }
-                                    }, children: reject.label }))] }) }))] }), jsxRuntime.jsx("div", { className: "rls-confirmation__backdrop" })] }));
+    return (jsxRuntime.jsxs("div", { className: renderClassStatus('rls-confirmation', { visible }), "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: "rls-confirmation__component", children: [jsxRuntime.jsxs("div", { className: "rls-confirmation__header", children: [title && jsxRuntime.jsx("div", { className: "rls-confirmation__title", children: title }), subtitle && (jsxRuntime.jsx("div", { className: "rls-confirmation__subtitle", children: subtitle }))] }), jsxRuntime.jsx("div", { className: "rls-confirmation__body", children: content && (jsxRuntime.jsx("div", { className: "rls-confirmation__message", children: content })) }), (approved || reject) && (jsxRuntime.jsx("div", { className: "rls-confirmation__footer", children: jsxRuntime.jsxs("div", { className: "rls-confirmation__actions", children: [approved && (jsxRuntime.jsx(RlsButton, { type: "raised", onClick: approved.onClick, children: approved.label })), reject && (jsxRuntime.jsx(RlsButton, { type: "outline", onClick: reject.onClick, children: reject.label }))] }) }))] }), jsxRuntime.jsx("div", { className: "rls-confirmation__backdrop" })] }));
 }
 function useConfirmationService() {
     const [config, setConfig] = react.useState({});
@@ -1361,15 +1778,18 @@ function useDatatable() {
     const bodyRef = react.useRef(null);
     react.useEffect(() => {
         let observer;
-        if (bodyRef?.current) {
+        const body = bodyRef?.current;
+        if (body) {
             observer = new ResizeObserver(() => {
-                const scrollHeight = bodyRef?.current?.scrollHeight || 0;
-                const clientHeight = bodyRef?.current?.clientHeight || 0;
+                const scrollHeight = body.scrollHeight || 0;
+                const clientHeight = body.clientHeight || 0;
                 setScrolleable(scrollHeight > clientHeight);
             });
             observer.observe(bodyRef?.current);
         }
-        return () => observer?.disconnect();
+        return () => {
+            observer?.disconnect();
+        };
     }, []);
     return { bodyRef, scrolleable };
 }
@@ -1378,17 +1798,18 @@ function useListControl({ suggestions, formControl }) {
     const boxContentRef = react.useRef(null);
     const listRef = react.useRef(null);
     const inputRef = react.useRef(null);
-    const [collection, setCollection] = react.useState(new ListCollection([]));
-    const [value, setValue] = react.useState('');
-    const [opened, setOpened] = react.useState(false);
-    const [visible, setVisible] = react.useState(false);
-    const [higher, setHigher] = react.useState(false);
-    const [focused, setFocused] = react.useState(false);
+    const [listState, setListState] = react.useState({
+        collection: new ListCollection([]),
+        focused: false,
+        higher: false,
+        value: '',
+        visible: false
+    });
     const position = react.useRef(0);
     react.useEffect(() => {
         function onCloseSuggestions({ target }) {
             if (!boxContentRef?.current?.contains(target)) {
-                setVisible(false);
+                setListState((state) => ({ ...state, visible: false }));
             }
         }
         document.addEventListener('click', onCloseSuggestions);
@@ -1397,25 +1818,37 @@ function useListControl({ suggestions, formControl }) {
         };
     }, []);
     react.useEffect(() => {
-        if (visible && !opened) {
-            setOpened(true);
-        }
-        if (!visible && opened && !!formControl?.touched) {
-            formControl.touch();
-        }
-        setHigher(!locationListIsBottom(boxContentRef.current, listRef.current));
-    }, [visible]);
+        const boxContent = boxContentRef.current;
+        const list = listRef.current;
+        formControl?.touch();
+        setListState((state) => ({
+            ...state,
+            higher: !locationListIsBottom(boxContent, list)
+        }));
+    }, [listState.visible]);
     react.useEffect(() => {
-        setCollection(new ListCollection(suggestions));
+        setListState((state) => ({
+            ...state,
+            collection: new ListCollection(suggestions)
+        }));
     }, [suggestions]);
+    function setFocused(focused) {
+        setListState((state) => ({ ...state, focused }));
+    }
+    function setValue(value) {
+        setListState((state) => ({ ...state, value }));
+    }
+    function setVisible(visible) {
+        setListState((state) => ({ ...state, visible }));
+    }
     function navigationInput(event) {
-        if (visible) {
+        if (listState.visible) {
             const newPosition = listNavigationInput({
                 contentElement: boxContentRef.current,
                 event: event,
                 listElement: listRef.current
             });
-            position.current = helpersAdvanced.itIsDefined(newPosition) ? newPosition : 0;
+            position.current = newPosition || 0;
         }
     }
     function navigationElement(event) {
@@ -1428,19 +1861,15 @@ function useListControl({ suggestions, formControl }) {
         });
     }
     return {
+        ...listState,
         boxContentRef,
-        collection,
-        focused,
-        higher,
         inputRef,
         listRef,
         navigationElement,
         navigationInput,
         setFocused,
         setValue,
-        setVisible,
-        value,
-        visible
+        setVisible
     };
 }
 
@@ -1597,7 +2026,7 @@ function RlsFieldAutocompleteTemplate({ suggestions, children, disabled, formCon
             disabled,
             focused: listControl.focused,
             selected: !!listControl.value
-        }, 'rls-field-list rls-field-autocomplete'), "rls-theme": rlsTheme, children: [children && jsxRuntime.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntime.jsx("div", { className: "rls-field-box__component", children: jsxRuntime.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntime.jsx("label", { className: "rls-field-list__control", onClick: onClickControl, children: listControl.value ? (jsxRuntime.jsx("span", { className: "rls-field-list__control__description", children: listControl.value })) : (jsxRuntime.jsx("span", { className: "rls-field-list__control__placeholder", children: placeholder })) }), !hiddenIcon && listControl.value && (jsxRuntime.jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: onClickAction, children: jsxRuntime.jsx(RlsIcon, { value: "trash-2" }) }))] }) }), formControl?.touched && formControl?.error && (jsxRuntime.jsx("div", { className: "rls-field-box__error", children: jsxRuntime.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) })), jsxRuntime.jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
+        }, 'rls-field-list rls-field-autocomplete'), "rls-theme": rlsTheme, children: [children && jsxRuntime.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntime.jsx("div", { className: "rls-field-box__component", children: jsxRuntime.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntime.jsx("label", { className: "rls-field-list__control", onClick: onClickControl, children: listControl.value ? (jsxRuntime.jsx("span", { className: "rls-field-list__control__description", children: listControl.value })) : (jsxRuntime.jsx("span", { className: "rls-field-list__control__placeholder", children: placeholder })) }), !hiddenIcon && listControl.value && (jsxRuntime.jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: onClickAction, children: jsxRuntime.jsx(RlsIcon, { value: "trash-2" }) }))] }) }), jsxRuntime.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }), jsxRuntime.jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
                     visible: listControl.visible,
                     hide: !listControl.visible,
                     higher: listControl.higher
@@ -1612,13 +2041,33 @@ function RlsFieldAutocomplete(props) {
 }
 
 function rangeFormatTemplate({ maxDate, minDate }) {
-    const minFormat = helpersDate.dateFormatTemplate(minDate, DATE_RANGE_FORMAT);
-    const maxFormat = helpersDate.dateFormatTemplate(maxDate, DATE_RANGE_FORMAT);
+    const minFormat = dateFormatTemplate(minDate, DATE_RANGE_FORMAT);
+    const maxFormat = dateFormatTemplate(maxDate, DATE_RANGE_FORMAT);
     return `${minFormat} - ${maxFormat}`;
 }
 
-const controlIsValid = (props) => {
-    const { state, validators } = props;
+function RlsModal({ children, visible, rlsTheme }) {
+    return ReactDOM.createPortal(jsxRuntime.jsxs("div", { className: renderClassStatus('rls-modal', { visible }), "rls-theme": rlsTheme, children: [jsxRuntime.jsx("div", { className: "rls-modal__component", children: children }), jsxRuntime.jsx("div", { className: "rls-modal__backdrop" })] }), document.body);
+}
+
+function itIsFormControlOptions(props) {
+    return (typeof props === 'object' && ('state' in props || 'validators' in props));
+}
+function createFormControlOptions(...argsProps) {
+    const [props, validators] = argsProps;
+    if (!props) {
+        return { state: props, validators };
+    }
+    if (!validators && itIsFormControlOptions(props)) {
+        return props;
+    }
+    return {
+        state: props,
+        validators
+    };
+}
+
+const controlIsValid = ({ state, validators }) => {
     return validators.reduce((errors, validator) => {
         const error = validator(state);
         if (error) {
@@ -1628,89 +2077,77 @@ const controlIsValid = (props) => {
     }, []);
 };
 
-function useControl(controlProps, controlValidators) {
-    const props = helpersForms.createFormControlProps(controlProps, controlValidators);
-    const [state, setCurrentState] = react.useState(props.state);
-    const [value, setValue] = react.useState(props.state);
-    const [touched, setTouched] = react.useState(props.touched || false);
-    const [dirty, setDirty] = react.useState(false);
-    const [focused, setFocused] = react.useState(false);
-    const [disabled, setDisabled] = react.useState(false);
-    const [initialValue] = react.useState(props.state);
-    const [validators, setValidators] = react.useState(props.validators);
-    const [subscribers] = react.useState(new rxjs.BehaviorSubject(props.state));
+function useControl(controlOptions, controlValidators) {
+    const { state, touched, validators } = createFormControlOptions(controlOptions, controlValidators);
+    const [controlState, setControlState] = react.useState({
+        dirty: false,
+        disabled: false,
+        focused: false,
+        state: state,
+        touched: !!touched,
+        validators: validators
+    });
+    const initialState = react.useRef(state);
     const elementRef = react.useRef(null);
-    const errors = (() => validators ? controlIsValid({ state, validators }) : [])();
-    const error = (() => errors[0])();
-    const valid = (() => errors.length === 0)();
-    react.useEffect(() => {
-        if (state !== null && state !== undefined) {
-            setValue(state);
-        }
-        subscribers.next(state);
-    }, [state]);
+    const errors = validators ? controlIsValid({ state, validators }) : [];
+    const valid = errors.length === 0;
     function focus() {
-        setFocused(true);
+        setControlState((state) => ({ ...state, focused: true }));
     }
     function blur() {
-        setFocused(false);
+        setControlState((state) => ({ ...state, focused: false, touched: true }));
     }
     function disable() {
-        setDisabled(true);
+        setControlState((state) => ({ ...state, disabled: true }));
     }
     function enable() {
-        setDisabled(false);
+        setControlState((state) => ({ ...state, disabled: false }));
     }
     function touch() {
-        setTouched(true);
-    }
-    function untouch() {
-        setTouched(false);
+        setControlState((state) => ({ ...state, touched: true }));
     }
     function setState(state) {
-        setDirty(true);
-        setCurrentState(state);
+        setControlState((currentState) => ({
+            ...currentState,
+            dirty: true,
+            state
+        }));
     }
-    function reset() {
-        setTouched(false);
-        setDirty(false);
-        setCurrentState(initialValue);
+    function setValidators(validators) {
+        setControlState((state) => ({ ...state, validators }));
     }
-    function subscribe(subscriber) {
-        const subscription = subscribers.subscribe(subscriber);
-        return () => subscription.unsubscribe();
+    function reset() {
+        setControlState((currentState) => ({
+            ...currentState,
+            dirty: false,
+            state: initialState.current,
+            touched: false
+        }));
     }
     return {
+        ...controlState,
         blur,
-        dirty,
         disable,
-        disabled,
         elementRef,
         enable,
-        enabled: !disabled,
-        error,
+        enabled: !controlState.disabled,
+        error: errors[0],
         errors,
         focus,
-        focused,
         invalid: !valid,
-        pristine: !dirty,
+        pristine: !controlState.dirty,
         reset,
         setState,
         setValidators,
-        state,
-        subscribe,
         touch,
-        touched,
-        unfocused: !focused,
-        untouch,
-        untouched: !touched,
+        unfocused: !controlState.focused,
+        untouched: !controlState.touched,
         valid,
-        value,
-        wrong: touched && !valid
+        wrong: controlState.touched && !valid
     };
 }
-function useReactControl(controlProps, controlValidators) {
-    return useControl(controlProps, controlValidators);
+function useReactControl(options, validators) {
+    return useControl(options, validators);
 }
 
 const FORMAT_DESCRIPTION = '{dw}, {mx} {dd} de {aa}';
@@ -1732,18 +2169,18 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
         formControl?.setState(dateCheck);
     }, []);
     react.useEffect(() => {
-        setValue((prevValue) => helpersAdvanced.itIsDefined(yearControl.state)
-            ? helpersDate.assignYearInDate(prevValue, yearControl.state)
+        setValue((prevValue) => itIsDefined(yearControl.state)
+            ? assignYearInDate(prevValue, yearControl.state)
             : prevValue);
     }, [yearControl.state]);
     react.useEffect(() => {
-        setValue((prevValue) => helpersAdvanced.itIsDefined(monthControl.state)
-            ? helpersDate.assignMonthInDate(prevValue, monthControl.state)
+        setValue((prevValue) => itIsDefined(monthControl.state)
+            ? assignMonthInDate(prevValue, monthControl.state)
             : prevValue);
     }, [monthControl.state]);
     react.useEffect(() => {
-        setValue((prevValue) => helpersAdvanced.itIsDefined(dayControl.state)
-            ? helpersDate.assignDayInDate(prevValue, dayControl.state)
+        setValue((prevValue) => itIsDefined(dayControl.state)
+            ? assignDayInDate(prevValue, dayControl.state)
             : prevValue);
     }, [dayControl.state]);
     function onVisibilityDay() {
@@ -1775,17 +2212,13 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
             onListener({ type: PickerListenerType.Select, value });
         }
     }
-    return (jsxRuntime.jsxs("div", { className: "rls-picker-date", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: "rls-picker-date__header", children: [jsxRuntime.jsx("div", { className: "rls-picker-date__title rls-picker-date__title--description", children: jsxRuntime.jsx("span", { onClick: onVisibilityDay, children: helpersDate.dateFormatTemplate(dateInitial, FORMAT_DESCRIPTION) }) }), jsxRuntime.jsx("div", { className: "rls-picker-date__title rls-picker-date__title--year", children: jsxRuntime.jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), jsxRuntime.jsx(RlsPickerMonthTitle, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityMonth })] }), jsxRuntime.jsxs("div", { className: renderClassStatus('rls-picker-date__component', {
+    return (jsxRuntime.jsxs("div", { className: "rls-picker-date", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: "rls-picker-date__header", children: [jsxRuntime.jsx("div", { className: "rls-picker-date__title rls-picker-date__title--description", children: jsxRuntime.jsx("span", { onClick: onVisibilityDay, children: dateFormatTemplate(dateInitial, FORMAT_DESCRIPTION) }) }), jsxRuntime.jsx("div", { className: "rls-picker-date__title rls-picker-date__title--year", children: jsxRuntime.jsx("span", { onClick: onVisibilityYear, children: yearControl.state }) }), jsxRuntime.jsx(RlsPickerMonthTitle, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityMonth })] }), jsxRuntime.jsxs("div", { className: renderClassStatus('rls-picker-date__component', {
                     day: visibility === 'DAY',
                     month: visibility === 'MONTH',
                     year: visibility === 'YEAR'
                 }), children: [jsxRuntime.jsx(RlsPickerDay, { formControl: dayControl, date: dateInitial, month: monthControl.state, year: yearControl.state, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntime.jsx(RlsPickerMonth, { formControl: monthControl, date: dateInitial, year: yearControl.state, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntime.jsx(RlsPickerYear, { formControl: yearControl, date: dateInitial, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), jsxRuntime.jsx("div", { className: renderClassStatus('rls-picker-date__footer', { automatic }), children: jsxRuntime.jsxs("div", { className: "rls-picker-date__actions", children: [jsxRuntime.jsx("div", { className: "rls-picker-date__actions--cancel", children: jsxRuntime.jsx(RlsButton, { type: "ghost", onClick: onCancel, children: reactI18n('dateActionCancel') }) }), jsxRuntime.jsx("div", { className: "rls-picker-date__actions--today", children: jsxRuntime.jsx(RlsButton, { type: "ghost", onClick: onToday, disabled: dateOutRange({ date: today, maxDate, minDate }), children: reactI18n('dateActionToday') }) }), jsxRuntime.jsx("div", { className: "rls-picker-date__actions--ok", children: jsxRuntime.jsx(RlsButton, { type: "raised", onClick: onSelect, children: reactI18n('dateActionSelect') }) })] }) })] }));
 }
 
-function RlsModal({ children, visible, rlsTheme }) {
-    return ReactDOM.createPortal(jsxRuntime.jsxs("div", { className: renderClassStatus('rls-modal', { visible }), "rls-theme": rlsTheme, children: [jsxRuntime.jsx("div", { className: "rls-modal__component", children: children }), jsxRuntime.jsx("div", { className: "rls-modal__backdrop" })] }), document.body);
-}
-
 function RlsFieldDate({ children, date, disabled, formControl, maxDate, minDate, onValue, placeholder, rlsTheme }) {
     const today = new Date(); // Initial current date in component
     const [value, setValue] = react.useState();
@@ -1813,29 +2246,25 @@ function RlsFieldDate({ children, date, disabled, formControl, maxDate, minDate,
     }
     function onClean() {
         if (value) {
+            formControl?.touch();
             onChange(undefined);
-            if (formControl && !formControl.touched) {
-                formControl.touch();
-            }
         }
         else {
             setModalIsVisible(true);
         }
     }
-    return (jsxRuntime.jsxs("div", { className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), children: [children && jsxRuntime.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntime.jsx("div", { className: "rls-field-box__component", children: jsxRuntime.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntime.jsx("input", { className: "rls-field-date__control", type: "text", value: value ? helpersDate.dateFormatTemplate(value, DATE_RANGE_FORMAT) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntime.jsx("button", { className: "rls-field-date__action", onClick: onClean, disabled: disabled, children: jsxRuntime.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), formControl?.touched && formControl?.error && (jsxRuntime.jsx("div", { className: "rls-field-box__error", children: jsxRuntime.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }), jsxRuntime.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntime.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value, type }) => {
+    return (jsxRuntime.jsxs("div", { className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), children: [children && jsxRuntime.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntime.jsx("div", { className: "rls-field-box__component", children: jsxRuntime.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntime.jsx("input", { className: "rls-field-date__control", type: "text", value: value ? dateFormatTemplate(value, DATE_RANGE_FORMAT) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntime.jsx("button", { className: "rls-field-date__action", onClick: onClean, disabled: disabled, children: jsxRuntime.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), jsxRuntime.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })] }), jsxRuntime.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntime.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value, type }) => {
                         if (type !== PickerListenerType.Cancel) {
                             onChange(value, true);
                         }
+                        formControl?.touch();
                         setModalIsVisible(false);
-                        if (!formControl?.touched) {
-                            formControl?.touch();
-                        }
                     } }) })] }));
 }
 
 function RlsPickerDateRange({ automatic, date: datePicker, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
-    const dateInitial = helpersDate.normalizeMinTime(datePicker || new Date());
-    const rangeInitial = formControl?.state || helpersDate.DateRange.now();
+    const dateInitial = normalizeMinTime(datePicker || new Date());
+    const rangeInitial = formControl?.state || DateRange.now();
     const yearControl = useReactControl(dateInitial.getFullYear());
     const monthControl = useReactControl(dateInitial.getMonth());
     const dayControl = useReactControl(rangeInitial);
@@ -1845,14 +2274,14 @@ function RlsPickerDateRange({ automatic, date: datePicker, disabled, formControl
     react.useEffect(() => {
         setDate((prevValue) => {
             return typeof yearControl.state === 'number'
-                ? helpersDate.assignYearInDate(prevValue, yearControl.state)
+                ? assignYearInDate(prevValue, yearControl.state)
                 : prevValue;
         });
     }, [yearControl.state]);
     react.useEffect(() => {
         setDate((prevValue) => {
             return typeof monthControl.state === 'number'
-                ? helpersDate.assignMonthInDate(prevValue, monthControl.state)
+                ? assignMonthInDate(prevValue, monthControl.state)
                 : prevValue;
         });
     }, [monthControl.state]);
@@ -1892,7 +2321,7 @@ function RlsPickerDateRange({ automatic, date: datePicker, disabled, formControl
 }
 
 function RlsFieldDateRange({ children, date: datePicker, disabled, formControl, maxDate, minDate, placeholder, rlsTheme }) {
-    const currentRange = formControl?.state || helpersDate.DateRange.now();
+    const currentRange = formControl?.state || DateRange.now();
     const currentDate = datePicker || new Date();
     const [value, setValue] = react.useState(currentRange);
     const [modalIsVisible, setModalIsVisible] = react.useState(false);
@@ -1908,7 +2337,7 @@ function RlsFieldDateRange({ children, date: datePicker, disabled, formControl,
             setModalIsVisible(true);
         }
     }
-    return (jsxRuntime.jsxs("div", { className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), children: [children && jsxRuntime.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntime.jsx("div", { className: "rls-field-box__component", children: jsxRuntime.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntime.jsx("input", { className: "rls-field-date-range__control", type: "text", value: value ? rangeFormatTemplate(value) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntime.jsx("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: disabled, children: jsxRuntime.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) })] }), jsxRuntime.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntime.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value }) => {
+    return (jsxRuntime.jsxs("div", { className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), children: [children && jsxRuntime.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntime.jsx("div", { className: "rls-field-box__component", children: jsxRuntime.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntime.jsx("input", { className: "rls-field-date-range__control", type: "text", value: value ? rangeFormatTemplate(value) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntime.jsx("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: disabled, children: jsxRuntime.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), jsxRuntime.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })] }), jsxRuntime.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntime.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value }) => {
                         if (value) {
                             setValue(value);
                         }
@@ -2037,7 +2466,7 @@ function RlsFieldSelectTemplate({ suggestions, children, disabled, formControl,
     });
     return (jsxRuntime.jsxs("div", { ref: listControl.boxContentRef, className: renderClassStatus('rls-field-box', { focused: listControl.focused, disabled }, 'rls-field-list rls-field-select'), "rls-theme": rlsTheme, children: [children && jsxRuntime.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntime.jsx("div", { className: "rls-field-box__component", children: jsxRuntime.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntime.jsx("input", { ref: listControl.inputRef, className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: listControl.value, onFocus: onFocusInput, onBlur: onBlurInput, onClick: onClickInput, onKeyDown: onKeydownInput }), jsxRuntime.jsx("button", { className: renderClassStatus('rls-field-list__action', {
                                 visible: listControl.visible
-                            }), disabled: disabled, onClick: onClickAction, children: jsxRuntime.jsx(RlsIcon, { value: "arrow-ios-down" }) })] }) }), formControl?.wrong && (jsxRuntime.jsx("div", { className: "rls-field-box__error", children: jsxRuntime.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl?.error?.message }) })), jsxRuntime.jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
+                            }), disabled: disabled, onClick: onClickAction, children: jsxRuntime.jsx(RlsIcon, { value: "arrow-ios-down" }) })] }) }), jsxRuntime.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }), jsxRuntime.jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
                     visible: listControl.visible,
                     hide: !listControl.visible,
                     higher: listControl.higher
@@ -2151,11 +2580,13 @@ exports.RlsInput = RlsInput;
 exports.RlsInputMoney = RlsInputMoney;
 exports.RlsInputNumber = RlsInputNumber;
 exports.RlsInputPassword = RlsInputPassword;
+exports.RlsInputSearch = RlsInputSearch;
 exports.RlsInputText = RlsInputText;
 exports.RlsLabel = RlsLabel;
 exports.RlsLabelCheckBox = RlsLabelCheckBox;
 exports.RlsLabelRadioButton = RlsLabelRadioButton;
 exports.RlsLabelSwitch = RlsLabelSwitch;
+exports.RlsMessageFormError = RlsMessageFormError;
 exports.RlsMessageIcon = RlsMessageIcon;
 exports.RlsModal = RlsModal;
 exports.RlsPagination = RlsPagination;
@@ -2170,7 +2601,6 @@ exports.RlsPoster = RlsPoster;
 exports.RlsProgressBar = RlsProgressBar;
 exports.RlsProgressCircular = RlsProgressCircular;
 exports.RlsRadioButton = RlsRadioButton;
-exports.RlsSearchInput = RlsSearchInput;
 exports.RlsSkeleton = RlsSkeleton;
 exports.RlsSkeletonText = RlsSkeletonText;
 exports.RlsSnackbar = RlsSnackbar;