@rolster/react-components 18.13.4 → 18.14.0

package/dist/cjs/index.js

@@ -3,10 +3,10 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var helpersAdvanced = require('@rolster/helpers-advanced');
-var helpersDate = require('@rolster/helpers-date');
 var helpersString = require('@rolster/helpers-string');
-var i18n = require('@rolster/i18n');
+var helpersDate = require('@rolster/helpers-date');
 var ReactDOM = require('react-dom');
+var i18n = require('@rolster/i18n');
 var helpersForms = require('@rolster/helpers-forms');
 require('uuid');
 var rxjs = require('rxjs');
@@ -75,14 +75,7 @@ function RlsCheckBoxControl({ formControl, disabled, rlsTheme }) {
 function RlsInput({ children, disabled, formControl, placeholder, type, value, onValue }) {
     const [focused, setFocused] = react.useState(false);
     function onChange(event) {
-        switch (type) {
-            case 'number':
-                setState(+event.target.value);
-                break;
-            default:
-                setState(event.target.value);
-                break;
-        }
+        setState(type === 'number' ? +event.target.value : event.target.value);
     }
     function setState(value) {
         formControl?.setState(value);
@@ -256,7 +249,43 @@ 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 RlsCheckBoxLabel({ children, disabled, extended, formControl, rlsTheme }) {
+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 }) }))] }));
+}
+
+function RlsFieldNumber({ children, disabled, formControl, placeholder, rlsTheme, value, onValue }) {
+    return (jsxRuntime.jsxs("div", { className: renderClassStatus('rls-field-box', {
+            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 }) }))] }));
+}
+
+function RlsFieldPassword({ children, disabled, formControl, placeholder, rlsTheme }) {
+    const [password, setPassword] = react.useState(true);
+    function onToggleInput() {
+        setPassword(!password);
+    }
+    return (jsxRuntime.jsxs("div", { className: renderClassStatus(' rls-field-box', {
+            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 }) }))] }));
+}
+
+function RlsFieldText({ children, disabled, formControl, placeholder, rlsTheme, value, onValue }) {
+    return (jsxRuntime.jsxs("div", { className: renderClassStatus('rls-field-box', {
+            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 }) }))] }));
+}
+
+function RlsLabelCheckBox({ children, disabled, extended, formControl, rlsTheme }) {
     const [checked, setChecked] = react.useState(formControl?.value || false);
     react.useEffect(() => {
         setChecked(formControl?.state || false);
@@ -269,217 +298,462 @@ function RlsCheckBoxLabel({ children, disabled, extended, formControl, rlsTheme
             setChecked(!checked);
         }
     }
-    return (jsxRuntime.jsxs("div", { className: renderClassStatus('rls-checkbox-label', {
+    return (jsxRuntime.jsxs("div", { className: renderClassStatus('rls-label-checkbox', {
             disabled,
             extended
-        }), "rls-theme": rlsTheme, children: [jsxRuntime.jsx("div", { className: "rls-checkbox-label__component", onClick: onToggle, children: jsxRuntime.jsx(RlsCheckBox, { checked: checked, disabled: disabled }) }), jsxRuntime.jsx("label", { className: "rls-checkbox-label__text", children: children })] }));
+        }), "rls-theme": rlsTheme, children: [jsxRuntime.jsx("div", { className: "rls-label-checkbox__component", onClick: onToggle, children: jsxRuntime.jsx(RlsCheckBox, { checked: checked, disabled: disabled }) }), jsxRuntime.jsx("label", { className: "rls-label-checkbox__text", children: children })] }));
 }
 
-function dateIsOutRangeMin(props) {
-    const { date, minDate } = props;
-    return !!minDate && helpersDate.dateIsBefore(helpersDate.normalizeMinTime(minDate), date);
-}
-function dateIsOutRangeMax(props) {
-    const { date, maxDate } = props;
-    return !!maxDate && helpersDate.dateIsAfter(helpersDate.normalizeMaxTime(maxDate), date);
-}
-function dateOutRange(props) {
-    return dateIsOutRangeMin(props) || dateIsOutRangeMax(props);
-}
-function checkDateRange(props) {
-    const { date, maxDate, minDate } = props;
-    return minDate && dateIsOutRangeMax(props)
-        ? minDate
-        : maxDate && dateIsOutRangeMax(props)
-            ? maxDate
-            : date;
-}
-
-const DAYS_WEEK = 7;
-const COUNT_YEAR_RANGE = 4;
-
-function createDayState(props, today, value) {
-    const { date, day, month, year } = props;
-    const dateValue = value && new Date(year, month, value);
-    return {
-        disabled: dayIsOutside(props, value || 0),
-        focused: !!value && day === value,
-        forbidden: !value,
-        selected: !!dateValue && helpersDate.dateIsEqualsWeight(date, dateValue),
-        today: !!dateValue && helpersDate.dateIsEqualsWeight(today, dateValue),
-        value
-    };
-}
-function createFirstWeek$1(props, date, today) {
-    const days = [];
-    let day = 1;
-    for (let start = 0; start < date.getDay(); start++) {
-        days.push(createDayState(props, today));
-    }
-    for (let end = date.getDay(); end < 7; end++) {
-        days.push(createDayState(props, today, day));
-        day++;
-    }
-    return { days };
-}
-function createDaysPending$1(props, today, days) {
-    const daysPending = [];
-    const length = 7 - days;
-    for (let index = 0; index < length; index++) {
-        daysPending.push(createDayState(props, today));
-    }
-    return daysPending;
-}
-function createNextWeeks$1(props, date, today) {
-    const daysMonth = helpersDate.getDaysOfMonth(date.getFullYear(), date.getMonth());
-    const weeks = [];
-    let days = [];
-    let countDays = 1;
-    let day = DAYS_WEEK - date.getDay() + 1;
-    do {
-        days.push(createDayState(props, today, day));
-        day++;
-        countDays++;
-        if (countDays > DAYS_WEEK) {
-            weeks.push({ days });
-            days = [];
-            countDays = 1;
-        }
-    } while (day <= daysMonth);
-    if (days.length && days.length < DAYS_WEEK) {
-        weeks.push({
-            days: [...days, ...createDaysPending$1(props, today, days.length)]
-        });
-    }
-    return weeks;
-}
-function dayIsOutsideMin(props, day) {
-    const { month, year, minDate } = props;
-    return minDate
-        ? helpersDate.getDateWeight(new Date(year, month, day)) < helpersDate.getDateWeight(minDate)
-        : false;
-}
-function dayIsOutsideMax(props, day) {
-    const { month, year, maxDate } = props;
-    return maxDate
-        ? helpersDate.getDateWeight(new Date(year, month, day)) > helpersDate.getDateWeight(maxDate)
-        : false;
-}
-function dayIsOutside(props, day) {
-    return dayIsOutsideMin(props, day) || dayIsOutsideMax(props, day);
-}
-function checkDayPicker(props) {
-    const { day, maxDate, minDate } = props;
-    return minDate && dayIsOutsideMin(props, day)
-        ? minDate.getDate()
-        : maxDate && dayIsOutsideMax(props, day)
-            ? maxDate.getDate()
-            : undefined;
-}
-function createDayPicker(props) {
-    const date = new Date(props.year, props.month, 1);
-    const today = new Date();
-    const firstWeek = createFirstWeek$1(props, date, today);
-    const nextWeeks = createNextWeeks$1(props, date, today);
-    return [firstWeek, ...nextWeeks];
+function RlsLabelRadioButton({ children, disabled, extended, formControl, rlsTheme, value }) {
+    const [checked, setChecked] = react.useState(formControl?.state || false);
+    react.useEffect(() => {
+        setChecked(formControl?.state === value);
+    }, [formControl?.state]);
+    function onSelect() {
+        if (formControl) {
+            formControl?.setState(value);
+        }
+    }
+    return (jsxRuntime.jsxs("div", { className: renderClassStatus('rls-label-radiobutton', {
+            disabled,
+            extended
+        }), "rls-theme": rlsTheme, children: [jsxRuntime.jsx("div", { className: "rls-label-radiobutton__component", onClick: onSelect, children: jsxRuntime.jsx(RlsRadioButton, { checked: checked, disabled: disabled }) }), jsxRuntime.jsx("label", { className: "rls-label-radiobutton__text", children: children })] }));
 }
 
-function dateIsSelected(base, date, day) {
-    return (date.getFullYear() === base.getFullYear() &&
-        date.getMonth() === base.getMonth() &&
-        day === date.getDate());
-}
-function sourceIsSelected({ sourceDate }, base, day) {
-    return dateIsSelected(base, sourceDate, day);
-}
-function rangeIsSelected({ range }, base, day) {
-    return (dateIsSelected(base, range.minDate, day) ||
-        dateIsSelected(base, range.maxDate, day));
-}
-function dayIsRange({ range }, base, day) {
-    return helpersDate.dateIsBetween(range.minDate, range.maxDate, helpersDate.assignDayInDate(base, day));
-}
-function createDayRangeState(props, base, day) {
-    return {
-        disabled: dayRangeIsOutside(props, day || 0),
-        end: day ? rangeIsSelected(props, base, day) : false,
-        forbidden: !day,
-        ranged: day ? dayIsRange(props, base, day) : false,
-        source: day ? sourceIsSelected(props, base, day) : false,
-        value: day
-    };
-}
-function createFirstWeek(props, base) {
-    const days = [];
-    let day = 1;
-    for (let start = 0; start < base.getDay(); start++) {
-        days.push(createDayRangeState(props, base));
-    }
-    for (let end = base.getDay(); end < 7; end++) {
-        days.push(createDayRangeState(props, base, day));
-        day++;
-    }
-    return { days };
-}
-function createDaysPending(props, base, days) {
-    const daysPending = [];
-    const length = 7 - days;
-    for (let index = 0; index < length; index++) {
-        daysPending.push(createDayRangeState(props, base));
-    }
-    return daysPending;
-}
-function createNextWeeks(props, base) {
-    const weeks = [];
-    const { date } = props;
-    const dayCount = helpersDate.getDaysOfMonth(date.getFullYear(), date.getMonth());
-    let days = [];
-    let countDays = 1;
-    let day = DAYS_WEEK - base.getDay() + 1;
-    do {
-        days.push(createDayRangeState(props, date, day));
-        day++;
-        countDays++;
-        if (countDays > 7) {
-            weeks.push({ days });
-            days = [];
-            countDays = 1;
-        }
-    } while (day <= dayCount);
-    if (days.length && days.length < DAYS_WEEK) {
-        weeks.push({
-            days: [...days, ...createDaysPending(props, base, days.length)]
-        });
-    }
-    return weeks;
-}
-function dayRangeIsOutsideMin(props, day) {
-    const { date, minDate } = props;
-    return minDate
-        ? helpersDate.getDateWeight(helpersDate.assignDayInDate(date, day)) < helpersDate.getDateWeight(minDate)
-        : false;
-}
-function dayRangeIsOutsideMax(props, day) {
-    const { date, maxDate } = props;
-    return maxDate
-        ? helpersDate.getDateWeight(helpersDate.assignDayInDate(date, day)) > helpersDate.getDateWeight(maxDate)
-        : false;
-}
-function dayRangeIsOutside(props, day) {
-    return dayRangeIsOutsideMin(props, day) || dayRangeIsOutsideMax(props, day);
-}
-function createDayRangePicker(props) {
-    const date = new Date(props.date.getFullYear(), props.date.getMonth(), 1);
-    const firstWeek = createFirstWeek(props, date);
-    const nextWeeks = createNextWeeks(props, date);
-    return [firstWeek, ...nextWeeks];
+function RlsLabelSwitch({ children, disabled, extended, formControl, rlsTheme }) {
+    const [checked, setChecked] = react.useState(formControl?.value || false);
+    react.useEffect(() => {
+        setChecked(formControl?.state || false);
+    }, [formControl?.state]);
+    function onToggle() {
+        if (formControl) {
+            formControl?.setState(!formControl.state);
+        }
+        else {
+            setChecked(!checked);
+        }
+    }
+    return (jsxRuntime.jsxs("div", { className: renderClassStatus('rls-label-switch', { disabled, extended }), "rls-theme": rlsTheme, children: [jsxRuntime.jsx("div", { className: "rls-label-switch__component", onClick: onToggle, children: jsxRuntime.jsx(RlsSwitch, { checked: checked, disabled: disabled }) }), jsxRuntime.jsx("label", { className: "rls-label-switch__text", children: children })] }));
 }
 
-function createMonthState(props, value) {
-    const { date, month, year } = props;
-    return {
-        disabled: monthIsOutside(props, value),
-        focused: value === month,
+const DEFAULT_COUNT_ELEMENT = 20;
+const MIN_NUMBER_PAGE = 1;
+const FIRST_PAGE = 0;
+const DEFAULT_MAX_VISIBLE = 4;
+function RlsPagination({ elements, count: defaultCount, filter, onElements, onPagination }) {
+    const count = defaultCount || DEFAULT_COUNT_ELEMENT;
+    const [collection, setCollection] = react.useState([]);
+    const [index, setIndex] = react.useState(0);
+    const [maxPage, setMaxPage] = react.useState(calculateMaxPage(elements, count));
+    const [paginations, setPaginations] = react.useState([]);
+    const [currentPagination, setCurrentPagination] = react.useState();
+    const [description, setDescription] = react.useState('');
+    const [firstPage, setFirstPage] = react.useState(true);
+    const [lastPage, setLastPage] = react.useState(false);
+    react.useEffect(() => {
+        refreshFromElements(elements);
+    }, [elements]);
+    react.useEffect(() => {
+        const isFirstPage = currentPagination?.value === FIRST_PAGE;
+        const isLastPage = currentPagination?.value === maxPage - 1;
+        setFirstPage(isFirstPage);
+        setLastPage(isLastPage);
+        if (onPagination) {
+            onPagination({ firstPage: isFirstPage, lastPage: isLastPage });
+        }
+    }, [currentPagination]);
+    react.useEffect(() => {
+        refreshFromFilter(filter);
+    }, [filter]);
+    function onChangeElements(elements) {
+        if (onElements) {
+            onElements(elements);
+        }
+    }
+    function calculateMaxPage(collection, count) {
+        return collection.length ? Math.ceil(collection.length / count) : 0;
+    }
+    function onSelectPagination(pagination) {
+        const { value } = pagination;
+        pagination.active = true;
+        setIndex(value);
+        setCurrentPagination(pagination);
+        refreshFromChanged(clonePage({ index: value }));
+    }
+    function goPagination(pagination) {
+        if (currentPagination) {
+            currentPagination.active = false;
+        }
+        onSelectPagination(pagination);
+    }
+    function goPreviousPagination() {
+        if (currentPagination) {
+            const { prev, value } = currentPagination;
+            if (prev) {
+                onSelectPagination(prev);
+                currentPagination.active = false;
+            }
+            else {
+                const prevIndex = value - MIN_NUMBER_PAGE;
+                if (prevIndex >= FIRST_PAGE) {
+                    refreshFromChanged(clonePageFromIndex(prevIndex));
+                }
+            }
+        }
+    }
+    function goFirstPagination() {
+        if (collection.length) {
+            refreshFromChanged(clonePageFromIndex(FIRST_PAGE));
+        }
+    }
+    function goNextPagination() {
+        if (currentPagination) {
+            const { next, value } = currentPagination;
+            if (next) {
+                onSelectPagination(next);
+                currentPagination.active = false;
+            }
+            else {
+                const nextIndex = value + 1;
+                if (nextIndex <= maxPage) {
+                    refreshFromChanged(clonePageFromIndex(nextIndex));
+                }
+            }
+        }
+    }
+    function goLastPagination() {
+        if (collection.length) {
+            refreshFromChanged(clonePageFromIndex(maxPage - MIN_NUMBER_PAGE));
+        }
+    }
+    function createPageCollection(props) {
+        const { collection, count, index } = props;
+        if (collection.length) {
+            const finish = (index + MIN_NUMBER_PAGE) * count;
+            const start = index * count;
+            return collection.slice(start, finish);
+        }
+        return [];
+    }
+    function refreshFromElements(elements) {
+        elements.length
+            ? refreshFromChanged(refreshPage(elements, filter))
+            : rebootPagination();
+    }
+    function refreshFromFilter(filter) {
+        refreshFromChanged(refreshPage(elements, filter));
+    }
+    function refreshFromChanged(page) {
+        refreshPaginations(page);
+        refreshDescription(page);
+        onChangeElements(createPageCollection(page));
+    }
+    function refreshCollection(elements, filter) {
+        const collection = filter
+            ? elements.filter((element) => helpersString.hasPattern(JSON.stringify(element), filter))
+            : elements;
+        setCollection(collection);
+        return collection;
+    }
+    function refreshMaxPage(collection, count) {
+        const maxPage = calculateMaxPage(collection, count);
+        setMaxPage(maxPage);
+        return maxPage;
+    }
+    function refreshIndex(collection, currentMaxPage) {
+        const maxPage = currentMaxPage || refreshMaxPage(collection, count);
+        if (index < maxPage || index === FIRST_PAGE) {
+            return index;
+        }
+        const newIndex = maxPage - 1;
+        setIndex(newIndex);
+        return newIndex;
+    }
+    function refreshDescription(page) {
+        const { collection, count, index } = page;
+        const totalCount = elements.length;
+        const start = index * count + MIN_NUMBER_PAGE;
+        let end = (index + MIN_NUMBER_PAGE) * count;
+        if (end > collection.length) {
+            end = collection.length;
+        }
+        setDescription(`${start} - ${end} de ${totalCount}`);
+    }
+    function refreshPaginations({ index, maxPage }) {
+        let maxPageVisible = index + DEFAULT_MAX_VISIBLE;
+        if (maxPageVisible > maxPage) {
+            maxPageVisible = maxPage;
+        }
+        let minIndexPage = maxPageVisible - DEFAULT_MAX_VISIBLE;
+        if (minIndexPage < 0) {
+            minIndexPage = 0;
+        }
+        if (minIndexPage > index) {
+            minIndexPage = index;
+        }
+        let prevPagination = undefined;
+        const paginations = [];
+        for (let i = minIndexPage; i < maxPageVisible; i++) {
+            const pagination = createPagination(i, index);
+            paginations.push(pagination);
+            pagination.prev = prevPagination;
+            if (prevPagination) {
+                prevPagination.next = pagination;
+            }
+            prevPagination = pagination;
+        }
+        setPaginations(paginations);
+    }
+    function clonePage(pagePartial) {
+        return {
+            collection: pagePartial.collection || collection,
+            index: typeof pagePartial.index === 'number' ? pagePartial.index : index,
+            count: pagePartial.count || count,
+            maxPage: typeof pagePartial.maxPage === 'number' ? pagePartial.maxPage : maxPage
+        };
+    }
+    function clonePageFromIndex(index) {
+        return clonePage({ index });
+    }
+    function refreshPage(elements, filter) {
+        const collection = refreshCollection(elements, filter);
+        const maxPage = refreshMaxPage(collection, count);
+        const index = refreshIndex(collection, maxPage);
+        return clonePage({ collection, index, maxPage });
+    }
+    function createPagination(value, index) {
+        const active = value === index;
+        const pagination = {
+            label: (value + 1).toString(),
+            value,
+            active
+        };
+        if (active) {
+            setCurrentPagination(pagination);
+        }
+        return pagination;
+    }
+    function rebootPagination() {
+        setCollection([]);
+        setMaxPage(0);
+        setIndex(0);
+        setPaginations([]);
+        onChangeElements([]);
+    }
+    return (jsxRuntime.jsxs("div", { className: "rls-pagination", children: [jsxRuntime.jsxs("div", { className: "rls-pagination__actions", children: [jsxRuntime.jsx("button", { className: "rls-pagination__action", onClick: goFirstPagination, disabled: firstPage, children: jsxRuntime.jsx(RlsIcon, { value: "arrowhead-left" }) }), jsxRuntime.jsx("button", { className: "rls-pagination__action", onClick: goPreviousPagination, disabled: firstPage, children: jsxRuntime.jsx(RlsIcon, { value: "arrow-ios-left" }) })] }), jsxRuntime.jsx("div", { className: "rls-pagination__pages", children: paginations.map((page, index) => {
+                    return (jsxRuntime.jsx("div", { className: renderClassStatus('rls-pagination__page', {
+                            active: page.active
+                        }), onClick: () => {
+                            goPagination(page);
+                        }, children: page.label }, index));
+                }) }), 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" }) })] })] }));
+}
+
+function dateIsOutRangeMin(props) {
+    const { date, minDate } = props;
+    return !!minDate && helpersDate.dateIsBefore(helpersDate.normalizeMinTime(minDate), date);
+}
+function dateIsOutRangeMax(props) {
+    const { date, maxDate } = props;
+    return !!maxDate && helpersDate.dateIsAfter(helpersDate.normalizeMaxTime(maxDate), date);
+}
+function dateOutRange(props) {
+    return dateIsOutRangeMin(props) || dateIsOutRangeMax(props);
+}
+function checkDateRange(props) {
+    const { date, maxDate, minDate } = props;
+    return minDate && dateIsOutRangeMax(props)
+        ? minDate
+        : maxDate && dateIsOutRangeMax(props)
+            ? maxDate
+            : date;
+}
+
+const DAYS_WEEK = 7;
+const COUNT_YEAR_RANGE = 4;
+
+function createDayState(props, today, value) {
+    const { date, day, month, year } = props;
+    const dateValue = value && new Date(year, month, value);
+    return {
+        disabled: dayIsOutside(props, value || 0),
+        focused: !!value && day === value,
+        forbidden: !value,
+        selected: !!dateValue && helpersDate.dateIsEqualsWeight(date, dateValue),
+        today: !!dateValue && helpersDate.dateIsEqualsWeight(today, dateValue),
+        value
+    };
+}
+function createFirstWeek$1(props, date, today) {
+    const days = [];
+    let day = 1;
+    for (let start = 0; start < date.getDay(); start++) {
+        days.push(createDayState(props, today));
+    }
+    for (let end = date.getDay(); end < 7; end++) {
+        days.push(createDayState(props, today, day));
+        day++;
+    }
+    return { days };
+}
+function createDaysPending$1(props, today, days) {
+    const daysPending = [];
+    const length = 7 - days;
+    for (let index = 0; index < length; index++) {
+        daysPending.push(createDayState(props, today));
+    }
+    return daysPending;
+}
+function createNextWeeks$1(props, date, today) {
+    const daysMonth = helpersDate.getDaysOfMonth(date.getFullYear(), date.getMonth());
+    const weeks = [];
+    let days = [];
+    let countDays = 1;
+    let day = DAYS_WEEK - date.getDay() + 1;
+    do {
+        days.push(createDayState(props, today, day));
+        day++;
+        countDays++;
+        if (countDays > DAYS_WEEK) {
+            weeks.push({ days });
+            days = [];
+            countDays = 1;
+        }
+    } while (day <= daysMonth);
+    if (days.length && days.length < DAYS_WEEK) {
+        weeks.push({
+            days: [...days, ...createDaysPending$1(props, today, days.length)]
+        });
+    }
+    return weeks;
+}
+function dayIsOutsideMin(props, day) {
+    const { month, year, minDate } = props;
+    return minDate
+        ? helpersDate.getDateWeight(new Date(year, month, day)) < helpersDate.getDateWeight(minDate)
+        : false;
+}
+function dayIsOutsideMax(props, day) {
+    const { month, year, maxDate } = props;
+    return maxDate
+        ? helpersDate.getDateWeight(new Date(year, month, day)) > helpersDate.getDateWeight(maxDate)
+        : false;
+}
+function dayIsOutside(props, day) {
+    return dayIsOutsideMin(props, day) || dayIsOutsideMax(props, day);
+}
+function checkDayPicker(props) {
+    const { day, maxDate, minDate } = props;
+    return minDate && dayIsOutsideMin(props, day)
+        ? minDate.getDate()
+        : maxDate && dayIsOutsideMax(props, day)
+            ? maxDate.getDate()
+            : undefined;
+}
+function createDayPicker(props) {
+    const date = new Date(props.year, props.month, 1);
+    const today = new Date();
+    const firstWeek = createFirstWeek$1(props, date, today);
+    const nextWeeks = createNextWeeks$1(props, date, today);
+    return [firstWeek, ...nextWeeks];
+}
+
+function dateIsSelected(base, date, day) {
+    return (date.getFullYear() === base.getFullYear() &&
+        date.getMonth() === base.getMonth() &&
+        day === date.getDate());
+}
+function sourceIsSelected({ sourceDate }, base, day) {
+    return dateIsSelected(base, sourceDate, day);
+}
+function rangeIsSelected({ range }, base, day) {
+    return (dateIsSelected(base, range.minDate, day) ||
+        dateIsSelected(base, range.maxDate, day));
+}
+function dayIsRange({ range }, base, day) {
+    return helpersDate.dateIsBetween(range.minDate, range.maxDate, helpersDate.assignDayInDate(base, day));
+}
+function createDayRangeState(props, base, day) {
+    return {
+        disabled: dayRangeIsOutside(props, day || 0),
+        end: day ? rangeIsSelected(props, base, day) : false,
+        forbidden: !day,
+        ranged: day ? dayIsRange(props, base, day) : false,
+        source: day ? sourceIsSelected(props, base, day) : false,
+        value: day
+    };
+}
+function createFirstWeek(props, base) {
+    const days = [];
+    let day = 1;
+    for (let start = 0; start < base.getDay(); start++) {
+        days.push(createDayRangeState(props, base));
+    }
+    for (let end = base.getDay(); end < 7; end++) {
+        days.push(createDayRangeState(props, base, day));
+        day++;
+    }
+    return { days };
+}
+function createDaysPending(props, base, days) {
+    const daysPending = [];
+    const length = 7 - days;
+    for (let index = 0; index < length; index++) {
+        daysPending.push(createDayRangeState(props, base));
+    }
+    return daysPending;
+}
+function createNextWeeks(props, base) {
+    const weeks = [];
+    const { date } = props;
+    const dayCount = helpersDate.getDaysOfMonth(date.getFullYear(), date.getMonth());
+    let days = [];
+    let countDays = 1;
+    let day = DAYS_WEEK - base.getDay() + 1;
+    do {
+        days.push(createDayRangeState(props, date, day));
+        day++;
+        countDays++;
+        if (countDays > 7) {
+            weeks.push({ days });
+            days = [];
+            countDays = 1;
+        }
+    } while (day <= dayCount);
+    if (days.length && days.length < DAYS_WEEK) {
+        weeks.push({
+            days: [...days, ...createDaysPending(props, base, days.length)]
+        });
+    }
+    return weeks;
+}
+function dayRangeIsOutsideMin(props, day) {
+    const { date, minDate } = props;
+    return minDate
+        ? helpersDate.getDateWeight(helpersDate.assignDayInDate(date, day)) < helpersDate.getDateWeight(minDate)
+        : false;
+}
+function dayRangeIsOutsideMax(props, day) {
+    const { date, maxDate } = props;
+    return maxDate
+        ? helpersDate.getDateWeight(helpersDate.assignDayInDate(date, day)) > helpersDate.getDateWeight(maxDate)
+        : false;
+}
+function dayRangeIsOutside(props, day) {
+    return dayRangeIsOutsideMin(props, day) || dayRangeIsOutsideMax(props, day);
+}
+function createDayRangePicker(props) {
+    const date = new Date(props.date.getFullYear(), props.date.getMonth(), 1);
+    const firstWeek = createFirstWeek(props, date);
+    const nextWeeks = createNextWeeks(props, date);
+    return [firstWeek, ...nextWeeks];
+}
+
+function createMonthState(props, value) {
+    const { date, month, year } = props;
+    return {
+        disabled: monthIsOutside(props, value),
+        focused: value === month,
         label: helpersDate.MONTH_NAMES()[value],
         selected: date.getFullYear() === year && value === date.getMonth(),
         value
@@ -503,712 +777,427 @@ function monthIsOutside(props, month) {
 function checkMonthPicker(props) {
     const { maxDate, minDate, month } = props;
     return minDate && monthIsOutsideMin(props, month)
-        ? minDate.getMonth()
-        : maxDate && monthIsOutsideMax(props, month)
-            ? maxDate.getMonth()
-            : undefined;
-}
-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)
-    ];
-}
-function monthIsLimitMin(props) {
-    const { month, date, minDate } = props;
-    if (helpersAdvanced.itIsDefined(month) && date) {
-        const minYear = minDate ? minDate.getFullYear() : 0;
-        const minMonth = minDate ? minDate.getMonth() : 0;
-        return date.getFullYear() === minYear && month <= minMonth;
-    }
-    return false;
-}
-function monthIsLimitMax(props) {
-    const { month, date, maxDate } = props;
-    if (helpersAdvanced.itIsDefined(month) && date) {
-        const maxYear = maxDate ? maxDate.getFullYear() : 10000;
-        const maxMonth = maxDate ? maxDate.getMonth() : 11;
-        return date.getFullYear() === maxYear && month >= maxMonth;
-    }
-    return false;
-}
-function monthLimitTemplate(props) {
-    return {
-        limitNext: monthIsLimitMax(props),
-        limitPrevious: monthIsLimitMin(props)
-    };
-}
-
-var PickerListenerType;
-(function (PickerListenerType) {
-    PickerListenerType["Select"] = "PickerSelect";
-    PickerListenerType["Now"] = "PickerNow";
-    PickerListenerType["Cancel"] = "PickerCancel";
-})(PickerListenerType || (PickerListenerType = {}));
-
-function createYear(props, value) {
-    const { date, year } = props;
-    return {
-        disabled: !value,
-        focused: value === year,
-        selected: value === date.getFullYear(),
-        value
-    };
-}
-function yearIsOutlineMin(props) {
-    const { year, minDate } = props;
-    return minDate ? year < minDate.getFullYear() : false;
-}
-function yearIsOutlineMax(props) {
-    const { year, maxDate } = props;
-    return maxDate ? year > maxDate.getFullYear() : false;
-}
-function checkYearPicker(props) {
-    const { maxDate, minDate } = props;
-    return minDate && yearIsOutlineMin(props)
-        ? minDate.getFullYear()
-        : maxDate && yearIsOutlineMax(props)
-            ? maxDate.getFullYear()
-            : undefined;
-}
-function createYearPicker(props) {
-    const { year, maxDate, minDate } = props;
-    const prevYears = [];
-    const nextYears = [];
-    let minRange = year;
-    let maxRange = year;
-    const minYear = minDate?.getFullYear() || 0;
-    const maxYear = maxDate?.getFullYear() || 10000;
-    for (let index = 0; index < COUNT_YEAR_RANGE; index++) {
-        const prevValue = year - COUNT_YEAR_RANGE + index;
-        const nextValue = year + index + 1;
-        const prevYear = prevValue >= minYear ? prevValue : undefined;
-        const nextYear = nextValue <= maxYear ? nextValue : undefined;
-        const prevState = createYear(props, prevYear);
-        const nextState = createYear(props, nextYear);
-        prevYears.push(prevState);
-        nextYears.push(nextState);
-        if (!!prevState.value && minRange > prevState.value) {
-            minRange = prevState.value;
-        }
-        if (!!nextState.value && maxRange < nextState.value) {
-            maxRange = nextState.value;
-        }
-    }
-    const yearCenter = createYear(props, year);
-    return {
-        canPrevious: minYear < minRange,
-        canNext: maxYear > maxRange,
-        maxRange,
-        minRange,
-        years: [...prevYears, yearCenter, ...nextYears]
-    };
-}
-
-function createEmptyStore() {
-    return {
-        coincidences: undefined,
-        pattern: '',
-        previous: null
-    };
-}
-function searchForPattern(props) {
-    const { pattern, store } = props;
-    if (!store?.pattern) {
-        return null;
-    }
-    let newStore = store;
-    let search = false;
-    while (!search && newStore) {
-        search = helpersString.hasPattern(pattern || '', newStore.pattern, true);
-        if (!search) {
-            newStore = newStore.previous;
-        }
-    }
-    return newStore || createEmptyStore();
-}
-function createStoreAutocomplete(props) {
-    const { pattern, suggestions, reboot } = props;
-    if (!pattern) {
-        return { collection: suggestions, store: createEmptyStore() };
-    }
-    const store = reboot ? createEmptyStore() : searchForPattern(props);
-    const elements = store?.coincidences || suggestions;
-    const coincidences = elements.filter((element) => element.hasCoincidence(pattern));
-    return {
-        collection: coincidences,
-        store: {
-            coincidences,
-            pattern,
-            previous: store
-        }
-    };
-}
-
-const classElement = '.rls-list-field__element';
-const POSITION_INITIAL = 0;
-function locationListIsBottom(contentElement, listElement) {
-    if (contentElement && listElement) {
-        const { top, height } = contentElement.getBoundingClientRect();
-        const { clientHeight } = listElement;
-        return top + height + clientHeight < window.innerHeight;
-    }
-    return true;
-}
-function navigationInputDown(props) {
-    const { contentElement, listElement } = props;
-    if (!locationListIsBottom(contentElement, listElement)) {
-        return undefined;
-    }
-    const elements = listElement?.querySelectorAll(classElement);
-    if (elements?.length) {
-        elements.item(0).focus();
-        setTimeout(() => {
-            listElement?.scroll({ top: 0, behavior: 'smooth' });
-        }, 100);
-    }
-    return POSITION_INITIAL;
-}
-function navigationInputUp(props) {
-    const { contentElement, listElement } = props;
-    if (locationListIsBottom(contentElement, listElement)) {
-        return undefined;
-    }
-    const elements = listElement?.querySelectorAll(classElement);
-    if (!elements?.length) {
-        return POSITION_INITIAL;
-    }
-    const position = elements.length - 1;
-    const element = elements.item(position);
-    element?.focus();
-    setTimeout(() => {
-        listElement?.scroll({
-            top: element?.offsetTop + element?.offsetLeft,
-            behavior: 'smooth'
-        });
-    }, 100);
-    return position;
-}
-function navigationElementDown(props) {
-    const { contentElement, inputElement, listElement, position } = props;
-    const elements = listElement?.querySelectorAll(classElement);
-    const newPosition = position + 1;
-    if (newPosition < (elements?.length || 0)) {
-        elements?.item(newPosition)?.focus();
-        return newPosition;
-    }
-    if (!locationListIsBottom(contentElement, listElement)) {
-        inputElement?.focus();
-    }
-    return position;
+        ? minDate.getMonth()
+        : maxDate && monthIsOutsideMax(props, month)
+            ? maxDate.getMonth()
+            : undefined;
 }
-function navigationElementUp(props) {
-    const { contentElement, inputElement, listElement, position } = props;
-    if (position > 0) {
-        const elements = listElement?.querySelectorAll(classElement);
-        const newPosition = position - 1;
-        elements?.item(newPosition)?.focus();
-        return newPosition;
-    }
-    if (locationListIsBottom(contentElement, listElement)) {
-        inputElement?.focus();
-    }
-    return POSITION_INITIAL;
+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)
+    ];
 }
-function listNavigationInput(props) {
-    switch (props.event.code) {
-        case 'ArrowDown':
-            return navigationInputDown(props);
-        case 'ArrowUp':
-            return navigationInputUp(props);
-        default:
-            return undefined;
+function monthIsLimitMin(props) {
+    const { month, date, minDate } = props;
+    if (helpersAdvanced.itIsDefined(month) && date) {
+        const minYear = minDate ? minDate.getFullYear() : 0;
+        const minMonth = minDate ? minDate.getMonth() : 0;
+        return date.getFullYear() === minYear && month <= minMonth;
     }
+    return false;
 }
-function listNavigationElement(props) {
-    const { event } = props;
-    switch (event.code) {
-        case 'ArrowDown':
-            return navigationElementDown(props);
-        case 'ArrowUp':
-            return navigationElementUp(props);
-        default:
-            return POSITION_INITIAL;
-    }
-}
-
-class ListCollection {
-    constructor(value) {
-        this.value = value;
-    }
-    find(element) {
-        return this.value.find((current) => current.compareTo(element));
+function monthIsLimitMax(props) {
+    const { month, date, maxDate } = props;
+    if (helpersAdvanced.itIsDefined(month) && date) {
+        const maxYear = maxDate ? maxDate.getFullYear() : 10000;
+        const maxMonth = maxDate ? maxDate.getMonth() : 11;
+        return date.getFullYear() === maxYear && month >= maxMonth;
     }
+    return false;
+}
+function monthLimitTemplate(props) {
+    return {
+        limitNext: monthIsLimitMax(props),
+        limitPrevious: monthIsLimitMin(props)
+    };
 }
 
-function RlsDayPicker({ date, disabled: disabledPicker, formControl, maxDate, month, minDate, onValue, rlsTheme, year }) {
-    const currentDate = date || new Date(); // Initial date
-    const [weeks, setWeeks] = react.useState([]);
-    const [value, setValue] = react.useState(formControl?.state || currentDate.getDate());
-    react.useEffect(() => {
-        const props = createPickerProps();
-        const day = checkDayPicker(props);
-        day ? setDayValue(day) : setWeeks(createDayPicker(props));
-    }, [date, month, year, value, minDate, maxDate]);
-    react.useEffect(() => {
-        const day = checkDayPicker(createPickerProps());
-        day
-            ? formControl?.setState(day)
-            : setValue(formControl?.state || currentDate.getDate());
-    }, [formControl?.state]);
-    function createPickerProps() {
-        return {
-            date: currentDate,
-            day: formControl?.state || value,
-            month: helpersAdvanced.itIsDefined(month) ? month : currentDate.getMonth(),
-            year: year || currentDate.getFullYear(),
-            minDate,
-            maxDate
-        };
-    }
-    function setDayValue(value) {
-        formControl ? formControl.setState(value) : setValue(value);
-    }
-    function onChange(value) {
-        setDayValue(value);
-        if (onValue) {
-            onValue(value);
-        }
-    }
-    return (jsxRuntime.jsxs("div", { className: "rls-day-picker", "rls-theme": rlsTheme, children: [jsxRuntime.jsx("div", { className: "rls-day-picker__header", children: helpersDate.DAY_LABELS().map((title, index) => (jsxRuntime.jsx("label", { className: "rls-day-picker__label", children: title }, index))) }), jsxRuntime.jsx("div", { className: "rls-day-picker__component", children: weeks.map(({ days }, index) => (jsxRuntime.jsx("div", { className: "rls-day-picker__week", children: days.map(({ value, disabled, focused, forbidden, selected, today }, index) => (jsxRuntime.jsx("div", { className: renderClassStatus('rls-day-picker__day', {
-                            disabled: disabled || disabledPicker,
-                            focused,
-                            forbidden,
-                            selected,
-                            today
-                        }), onClick: value && !disabledPicker ? () => onChange(value) : undefined, children: jsxRuntime.jsx("span", { className: "rls-day-picker__day__span", children: value || '??' }) }, index))) }, index))) })] }));
-}
-
-const DATE_RANGE_FORMAT = '{dd}/{mx}/{aa}';
-
-function RlsDayRangePicker({ date, disabled: disabledPicker, formControl, maxDate, minDate, rlsTheme }) {
-    const currentRange = formControl?.state || helpersDate.DateRange.now();
-    const currentDate = helpersDate.normalizeMinTime(date || currentRange.minDate);
-    const sourceDate = react.useRef(currentRange.minDate);
-    const [weeks, setWeeks] = react.useState([]);
-    const [range, setRange] = react.useState(currentRange);
-    react.useEffect(() => {
-        setWeeks(createDayRangePicker({
-            date: currentDate,
-            range,
-            sourceDate: sourceDate.current,
-            minDate,
-            maxDate
-        }));
-    }, [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);
-        sourceDate.current = date;
-        setRange(range);
-        formControl?.setState(range);
-    }
-    return (jsxRuntime.jsxs("div", { className: "rls-day-range-picker", "rls-theme": rlsTheme, children: [jsxRuntime.jsx("div", { className: "rls-day-range-picker__title", children: helpersDate.dateFormatTemplate(sourceDate.current, DATE_RANGE_FORMAT) }), jsxRuntime.jsx("div", { className: "rls-day-range-picker__header", children: helpersDate.DAY_LABELS().map((title, index) => (jsxRuntime.jsx("label", { className: "rls-day-range-picker__label", children: title }, index))) }), jsxRuntime.jsx("div", { className: "rls-day-range-picker__component", children: weeks.map(({ days }, index) => (jsxRuntime.jsx("div", { className: "rls-day-range-picker__week", children: days.map(({ disabled, end, forbidden, source, ranged, value }, index) => (jsxRuntime.jsx("div", { className: renderClassStatus('rls-day-range-picker__day', {
-                            disabled: disabled || disabledPicker,
-                            end,
-                            forbidden,
-                            ranged,
-                            source
-                        }), onClick: value && !disabledPicker ? () => onChange(value) : undefined, children: jsxRuntime.jsx("span", { className: "rls-day-range-picker__day__span", children: value || '??' }) }, index))) }, index))) })] }));
-}
-
-function RlsMoneyField({ children, decimals, disabled, formControl, placeholder, symbol, rlsTheme, value, onValue }) {
-    return (jsxRuntime.jsxs("div", { className: renderClassStatus('rls-box-field', {
-            focused: formControl?.focused,
-            error: formControl?.wrong,
-            disabled: formControl?.disabled || disabled
-        }, 'rls-money-field'), "rls-theme": rlsTheme, children: [children && jsxRuntime.jsx("label", { className: "rls-box-field__label", children: children }), jsxRuntime.jsx("div", { className: "rls-box-field__component", children: jsxRuntime.jsx("div", { className: "rls-box-field__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-box-field__error", children: jsxRuntime.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }));
-}
-
-function RlsMonthPicker({ date, disabled: disabledPicker, formControl, maxDate, minDate, onValue, rlsTheme, year }) {
-    const currentDate = date || new Date();
-    const [months, setMonths] = react.useState([]);
-    const [value, setValue] = react.useState(formControl?.state || currentDate.getMonth());
-    react.useEffect(() => {
-        const props = createPickerProps(); // MonthPickerProps
-        const month = checkMonthPicker(props);
-        month ? setMonthValue(month) : setMonths(createMonthPicker(props));
-    }, [date, year, value, minDate, maxDate]);
-    react.useEffect(() => {
-        const month = checkMonthPicker(createPickerProps());
-        helpersAdvanced.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,
-            year: year || currentDate.getFullYear(),
-            minDate,
-            maxDate
-        };
-    }
-    function setMonthValue(value) {
-        formControl ? formControl.setState(value) : setValue(value);
-    }
-    function onChange(value) {
-        setMonthValue(value);
-        if (onValue) {
-            onValue(value);
-        }
-    }
-    return (jsxRuntime.jsx("div", { className: "rls-month-picker", "rls-theme": rlsTheme, children: months.map(({ label, value, disabled, focused, selected }, index) => (jsxRuntime.jsx("div", { className: renderClassStatus('rls-month-picker__component', {
-                disabled: disabled || disabledPicker,
-                focused,
-                selected
-            }), onClick: !(disabled || disabledPicker) ? () => onChange(value) : undefined, children: jsxRuntime.jsx("span", { className: "rls-month-picker__span", children: label }) }, index))) }));
-}
+var PickerListenerType;
+(function (PickerListenerType) {
+    PickerListenerType["Select"] = "PickerSelect";
+    PickerListenerType["Now"] = "PickerNow";
+    PickerListenerType["Cancel"] = "PickerCancel";
+})(PickerListenerType || (PickerListenerType = {}));
 
-function RlsMonthTitlePicker({ monthControl, type, yearControl, date, disabled, maxDate, minDate, onClick }) {
-    const { limitNext, limitPrevious } = monthLimitTemplate({
-        date,
-        maxDate,
-        minDate,
-        month: monthControl.state
-    });
-    const monthName = helpersDate.MONTH_NAMES()[monthControl.state || 0];
-    function onPreviousMonth() {
-        if (helpersAdvanced.itIsDefined(monthControl.state) && helpersAdvanced.itIsDefined(yearControl.state)) {
-            if (monthControl.state > helpersDate.Month.January) {
-                monthControl.setState(monthControl.state - 1);
-            }
-            else {
-                monthControl.setState(helpersDate.Month.December);
-                yearControl.setState(yearControl.state - 1);
-            }
-        }
-    }
-    function onPreviousYear() {
-        if (helpersAdvanced.itIsDefined(yearControl.state)) {
-            yearControl.setState(yearControl.state - 1);
-        }
-    }
-    function onPrevious() {
-        type === 'month' ? onPreviousMonth() : onPreviousYear();
-    }
-    function onNextMonth() {
-        if (helpersAdvanced.itIsDefined(monthControl.state) && helpersAdvanced.itIsDefined(yearControl.state)) {
-            if (monthControl.state < helpersDate.Month.December) {
-                monthControl.setState(monthControl.state + 1);
-            }
-            else {
-                monthControl.setState(helpersDate.Month.January);
-                yearControl.setState(yearControl.state + 1);
-            }
-        }
-    }
-    function onNextYear() {
-        if (helpersAdvanced.itIsDefined(yearControl.state)) {
-            yearControl.setState(yearControl.state + 1);
-        }
-    }
-    function onNext() {
-        type === 'month' ? onNextMonth() : onNextYear();
-    }
-    return (jsxRuntime.jsxs("div", { className: "rls-month-title-picker", children: [jsxRuntime.jsx(RlsButtonAction, { icon: "arrow-ios-left", onClick: onPrevious, disabled: limitPrevious || disabled }), jsxRuntime.jsx("span", { onClick: onClick, children: monthName }), jsxRuntime.jsx(RlsButtonAction, { icon: "arrow-ios-right", onClick: onNext, disabled: limitNext || disabled })] }));
+function createYear(props, value) {
+    const { date, year } = props;
+    return {
+        disabled: !value,
+        focused: value === year,
+        selected: value === date.getFullYear(),
+        value
+    };
+}
+function yearIsOutlineMin(props) {
+    const { year, minDate } = props;
+    return minDate ? year < minDate.getFullYear() : false;
+}
+function yearIsOutlineMax(props) {
+    const { year, maxDate } = props;
+    return maxDate ? year > maxDate.getFullYear() : false;
+}
+function checkYearPicker(props) {
+    const { maxDate, minDate } = props;
+    return minDate && yearIsOutlineMin(props)
+        ? minDate.getFullYear()
+        : maxDate && yearIsOutlineMax(props)
+            ? maxDate.getFullYear()
+            : undefined;
+}
+function createYearPicker(props) {
+    const { year, maxDate, minDate } = props;
+    const prevYears = [];
+    const nextYears = [];
+    let minRange = year;
+    let maxRange = year;
+    const minYear = minDate?.getFullYear() || 0;
+    const maxYear = maxDate?.getFullYear() || 10000;
+    for (let index = 0; index < COUNT_YEAR_RANGE; index++) {
+        const prevValue = year - COUNT_YEAR_RANGE + index;
+        const nextValue = year + index + 1;
+        const prevYear = prevValue >= minYear ? prevValue : undefined;
+        const nextYear = nextValue <= maxYear ? nextValue : undefined;
+        const prevState = createYear(props, prevYear);
+        const nextState = createYear(props, nextYear);
+        prevYears.push(prevState);
+        nextYears.push(nextState);
+        if (!!prevState.value && minRange > prevState.value) {
+            minRange = prevState.value;
+        }
+        if (!!nextState.value && maxRange < nextState.value) {
+            maxRange = nextState.value;
+        }
+    }
+    const yearCenter = createYear(props, year);
+    return {
+        canPrevious: minYear < minRange,
+        canNext: maxYear > maxRange,
+        maxRange,
+        minRange,
+        years: [...prevYears, yearCenter, ...nextYears]
+    };
 }
 
-function RlsNumberField({ children, disabled, formControl, placeholder, rlsTheme, value, onValue }) {
-    return (jsxRuntime.jsxs("div", { className: renderClassStatus('rls-box-field', {
-            focused: formControl?.focused,
-            error: formControl?.wrong,
-            disabled: formControl?.disabled || disabled
-        }, 'rls-number-field'), "rls-theme": rlsTheme, children: [children && jsxRuntime.jsx("label", { className: "rls-box-field__label", children: children }), jsxRuntime.jsx("div", { className: "rls-box-field__component", children: jsxRuntime.jsx("div", { className: "rls-box-field__body", children: jsxRuntime.jsx(RlsInputNumber, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), formControl?.touched && formControl?.error && (jsxRuntime.jsx("div", { className: "rls-box-field__error", children: jsxRuntime.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }));
+function createEmptyStore() {
+    return {
+        coincidences: undefined,
+        pattern: '',
+        previous: null
+    };
+}
+function searchForPattern(props) {
+    const { pattern, store } = props;
+    if (!store?.pattern) {
+        return null;
+    }
+    let newStore = store;
+    let search = false;
+    while (!search && newStore) {
+        search = helpersString.hasPattern(pattern || '', newStore.pattern, true);
+        if (!search) {
+            newStore = newStore.previous;
+        }
+    }
+    return newStore || createEmptyStore();
+}
+function createStoreAutocomplete(props) {
+    const { pattern, suggestions, reboot } = props;
+    if (!pattern) {
+        return { collection: suggestions, store: createEmptyStore() };
+    }
+    const store = reboot ? createEmptyStore() : searchForPattern(props);
+    const elements = store?.coincidences || suggestions;
+    const coincidences = elements.filter((element) => element.hasCoincidence(pattern));
+    return {
+        collection: coincidences,
+        store: {
+            coincidences,
+            pattern,
+            previous: store
+        }
+    };
 }
 
-const DEFAULT_COUNT_ELEMENT = 20;
-const MIN_NUMBER_PAGE = 1;
-const FIRST_PAGE = 0;
-const DEFAULT_MAX_VISIBLE = 4;
-function RlsPagination({ elements, count: defaultCount, filter, onElements, onPagination }) {
-    const count = defaultCount || DEFAULT_COUNT_ELEMENT;
-    const [collection, setCollection] = react.useState([]);
-    const [index, setIndex] = react.useState(0);
-    const [maxPage, setMaxPage] = react.useState(calculateMaxPage(elements, count));
-    const [paginations, setPaginations] = react.useState([]);
-    const [currentPagination, setCurrentPagination] = react.useState();
-    const [description, setDescription] = react.useState('');
-    const [firstPage, setFirstPage] = react.useState(true);
-    const [lastPage, setLastPage] = react.useState(false);
-    react.useEffect(() => {
-        refreshFromElements(elements);
-    }, [elements]);
-    react.useEffect(() => {
-        const isFirstPage = currentPagination?.value === FIRST_PAGE;
-        const isLastPage = currentPagination?.value === maxPage - 1;
-        setFirstPage(isFirstPage);
-        setLastPage(isLastPage);
-        if (onPagination) {
-            onPagination({ firstPage: isFirstPage, lastPage: isLastPage });
-        }
-    }, [currentPagination]);
-    react.useEffect(() => {
-        refreshFromFilter(filter);
-    }, [filter]);
-    function onChangeElements(elements) {
-        if (onElements) {
-            onElements(elements);
-        }
-    }
-    function calculateMaxPage(collection, count) {
-        return collection.length ? Math.ceil(collection.length / count) : 0;
-    }
-    function onSelectPagination(pagination) {
-        const { value } = pagination;
-        pagination.active = true;
-        setIndex(value);
-        setCurrentPagination(pagination);
-        refreshFromChanged(clonePage({ index: value }));
-    }
-    function goPagination(pagination) {
-        if (currentPagination) {
-            currentPagination.active = false;
-        }
-        onSelectPagination(pagination);
-    }
-    function goPreviousPagination() {
-        if (currentPagination) {
-            const { prev, value } = currentPagination;
-            if (prev) {
-                onSelectPagination(prev);
-                currentPagination.active = false;
-            }
-            else {
-                const prevIndex = value - MIN_NUMBER_PAGE;
-                if (prevIndex >= FIRST_PAGE) {
-                    refreshFromChanged(clonePageFromIndex(prevIndex));
-                }
-            }
-        }
-    }
-    function goFirstPagination() {
-        if (collection.length) {
-            refreshFromChanged(clonePageFromIndex(FIRST_PAGE));
-        }
-    }
-    function goNextPagination() {
-        if (currentPagination) {
-            const { next, value } = currentPagination;
-            if (next) {
-                onSelectPagination(next);
-                currentPagination.active = false;
-            }
-            else {
-                const nextIndex = value + 1;
-                if (nextIndex <= maxPage) {
-                    refreshFromChanged(clonePageFromIndex(nextIndex));
-                }
-            }
-        }
-    }
-    function goLastPagination() {
-        if (collection.length) {
-            refreshFromChanged(clonePageFromIndex(maxPage - MIN_NUMBER_PAGE));
-        }
-    }
-    function createPageCollection(props) {
-        const { collection, count, index } = props;
-        if (collection.length) {
-            const finish = (index + MIN_NUMBER_PAGE) * count;
-            const start = index * count;
-            return collection.slice(start, finish);
-        }
-        return [];
-    }
-    function refreshFromElements(elements) {
-        elements.length
-            ? refreshFromChanged(refreshPage(elements, filter))
-            : rebootPagination();
-    }
-    function refreshFromFilter(filter) {
-        refreshFromChanged(refreshPage(elements, filter));
-    }
-    function refreshFromChanged(page) {
-        refreshPaginations(page);
-        refreshDescription(page);
-        onChangeElements(createPageCollection(page));
-    }
-    function refreshCollection(elements, filter) {
-        const collection = filter
-            ? elements.filter((element) => helpersString.hasPattern(JSON.stringify(element), filter))
-            : elements;
-        setCollection(collection);
-        return collection;
-    }
-    function refreshMaxPage(collection, count) {
-        const maxPage = calculateMaxPage(collection, count);
-        setMaxPage(maxPage);
-        return maxPage;
-    }
-    function refreshIndex(collection, currentMaxPage) {
-        const maxPage = currentMaxPage || refreshMaxPage(collection, count);
-        if (index < maxPage || index === FIRST_PAGE) {
-            return index;
-        }
-        const newIndex = maxPage - 1;
-        setIndex(newIndex);
-        return newIndex;
-    }
-    function refreshDescription(page) {
-        const { collection, count, index } = page;
-        const totalCount = elements.length;
-        const start = index * count + MIN_NUMBER_PAGE;
-        let end = (index + MIN_NUMBER_PAGE) * count;
-        if (end > collection.length) {
-            end = collection.length;
-        }
-        setDescription(`${start} - ${end} de ${totalCount}`);
-    }
-    function refreshPaginations({ index, maxPage }) {
-        let maxPageVisible = index + DEFAULT_MAX_VISIBLE;
-        if (maxPageVisible > maxPage) {
-            maxPageVisible = maxPage;
-        }
-        let minIndexPage = maxPageVisible - DEFAULT_MAX_VISIBLE;
-        if (minIndexPage < 0) {
-            minIndexPage = 0;
-        }
-        if (minIndexPage > index) {
-            minIndexPage = index;
-        }
-        let prevPagination = undefined;
-        const paginations = [];
-        for (let i = minIndexPage; i < maxPageVisible; i++) {
-            const pagination = createPagination(i, index);
-            paginations.push(pagination);
-            pagination.prev = prevPagination;
-            if (prevPagination) {
-                prevPagination.next = pagination;
-            }
-            prevPagination = pagination;
-        }
-        setPaginations(paginations);
-    }
-    function clonePage(pagePartial) {
+const classElement = '.rls-list-field__element';
+const POSITION_INITIAL = 0;
+function locationListIsBottom(contentElement, listElement) {
+    if (contentElement && listElement) {
+        const { top, height } = contentElement.getBoundingClientRect();
+        const { clientHeight } = listElement;
+        return top + height + clientHeight < window.innerHeight;
+    }
+    return true;
+}
+function navigationInputDown(props) {
+    const { contentElement, listElement } = props;
+    if (!locationListIsBottom(contentElement, listElement)) {
+        return undefined;
+    }
+    const elements = listElement?.querySelectorAll(classElement);
+    if (elements?.length) {
+        elements.item(0).focus();
+        setTimeout(() => {
+            listElement?.scroll({ top: 0, behavior: 'smooth' });
+        }, 100);
+    }
+    return POSITION_INITIAL;
+}
+function navigationInputUp(props) {
+    const { contentElement, listElement } = props;
+    if (locationListIsBottom(contentElement, listElement)) {
+        return undefined;
+    }
+    const elements = listElement?.querySelectorAll(classElement);
+    if (!elements?.length) {
+        return POSITION_INITIAL;
+    }
+    const position = elements.length - 1;
+    const element = elements.item(position);
+    element?.focus();
+    setTimeout(() => {
+        listElement?.scroll({
+            top: element?.offsetTop + element?.offsetLeft,
+            behavior: 'smooth'
+        });
+    }, 100);
+    return position;
+}
+function navigationElementDown(props) {
+    const { contentElement, inputElement, listElement, position } = props;
+    const elements = listElement?.querySelectorAll(classElement);
+    const newPosition = position + 1;
+    if (newPosition < (elements?.length || 0)) {
+        elements?.item(newPosition)?.focus();
+        return newPosition;
+    }
+    if (!locationListIsBottom(contentElement, listElement)) {
+        inputElement?.focus();
+    }
+    return position;
+}
+function navigationElementUp(props) {
+    const { contentElement, inputElement, listElement, position } = props;
+    if (position > 0) {
+        const elements = listElement?.querySelectorAll(classElement);
+        const newPosition = position - 1;
+        elements?.item(newPosition)?.focus();
+        return newPosition;
+    }
+    if (locationListIsBottom(contentElement, listElement)) {
+        inputElement?.focus();
+    }
+    return POSITION_INITIAL;
+}
+function listNavigationInput(props) {
+    switch (props.event.code) {
+        case 'ArrowDown':
+            return navigationInputDown(props);
+        case 'ArrowUp':
+            return navigationInputUp(props);
+        default:
+            return undefined;
+    }
+}
+function listNavigationElement(props) {
+    const { event } = props;
+    switch (event.code) {
+        case 'ArrowDown':
+            return navigationElementDown(props);
+        case 'ArrowUp':
+            return navigationElementUp(props);
+        default:
+            return POSITION_INITIAL;
+    }
+}
+
+class ListCollection {
+    constructor(value) {
+        this.value = value;
+    }
+    find(element) {
+        return this.value.find((current) => current.compareTo(element));
+    }
+}
+
+function RlsPickerDay({ date, disabled: disabledPicker, formControl, maxDate, month, minDate, onValue, rlsTheme, year }) {
+    const currentDate = date || new Date(); // Initial date
+    const [weeks, setWeeks] = react.useState([]);
+    const [value, setValue] = react.useState(formControl?.state || currentDate.getDate());
+    react.useEffect(() => {
+        const props = createPickerProps();
+        const day = checkDayPicker(props);
+        day ? setDayValue(day) : setWeeks(createDayPicker(props));
+    }, [date, month, year, value, minDate, maxDate]);
+    react.useEffect(() => {
+        const day = checkDayPicker(createPickerProps());
+        day
+            ? formControl?.setState(day)
+            : setValue(formControl?.state || currentDate.getDate());
+    }, [formControl?.state]);
+    function createPickerProps() {
         return {
-            collection: pagePartial.collection || collection,
-            index: typeof pagePartial.index === 'number' ? pagePartial.index : index,
-            count: pagePartial.count || count,
-            maxPage: typeof pagePartial.maxPage === 'number' ? pagePartial.maxPage : maxPage
+            date: currentDate,
+            day: formControl?.state || value,
+            month: helpersAdvanced.itIsDefined(month) ? month : currentDate.getMonth(),
+            year: year || currentDate.getFullYear(),
+            minDate,
+            maxDate
         };
     }
-    function clonePageFromIndex(index) {
-        return clonePage({ index });
-    }
-    function refreshPage(elements, filter) {
-        const collection = refreshCollection(elements, filter);
-        const maxPage = refreshMaxPage(collection, count);
-        const index = refreshIndex(collection, maxPage);
-        return clonePage({ collection, index, maxPage });
+    function setDayValue(value) {
+        formControl ? formControl.setState(value) : setValue(value);
     }
-    function createPagination(value, index) {
-        const active = value === index;
-        const pagination = {
-            label: (value + 1).toString(),
-            value,
-            active
-        };
-        if (active) {
-            setCurrentPagination(pagination);
+    function onChange(value) {
+        setDayValue(value);
+        if (onValue) {
+            onValue(value);
         }
-        return pagination;
-    }
-    function rebootPagination() {
-        setCollection([]);
-        setMaxPage(0);
-        setIndex(0);
-        setPaginations([]);
-        onChangeElements([]);
     }
-    return (jsxRuntime.jsxs("div", { className: "rls-pagination", children: [jsxRuntime.jsxs("div", { className: "rls-pagination__actions", children: [jsxRuntime.jsx("button", { className: "rls-pagination__action", onClick: goFirstPagination, disabled: firstPage, children: jsxRuntime.jsx(RlsIcon, { value: "arrowhead-left" }) }), jsxRuntime.jsx("button", { className: "rls-pagination__action", onClick: goPreviousPagination, disabled: firstPage, children: jsxRuntime.jsx(RlsIcon, { value: "arrow-ios-left" }) })] }), jsxRuntime.jsx("div", { className: "rls-pagination__pages", children: paginations.map((page, index) => {
-                    return (jsxRuntime.jsx("div", { className: renderClassStatus('rls-pagination__page', {
-                            active: page.active
-                        }), onClick: () => {
-                            goPagination(page);
-                        }, children: page.label }, index));
-                }) }), 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" }) })] })] }));
+    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', {
+                            disabled: disabled || disabledPicker,
+                            focused,
+                            forbidden,
+                            selected,
+                            today
+                        }), onClick: value && !disabledPicker ? () => onChange(value) : undefined, children: jsxRuntime.jsx("span", { className: "rls-picker-day__element__span", children: value || '??' }) }, index))) }, index))) })] }));
 }
 
-function RlsPasswordField({ children, disabled, formControl, placeholder, rlsTheme }) {
-    const [password, setPassword] = react.useState(true);
-    function onToggleInput() {
-        setPassword(!password);
+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 sourceDate = react.useRef(currentRange.minDate);
+    const [weeks, setWeeks] = react.useState([]);
+    const [range, setRange] = react.useState(currentRange);
+    react.useEffect(() => {
+        setWeeks(createDayRangePicker({
+            date: currentDate,
+            range,
+            sourceDate: sourceDate.current,
+            minDate,
+            maxDate
+        }));
+    }, [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);
+        sourceDate.current = date;
+        setRange(range);
+        formControl?.setState(range);
     }
-    return (jsxRuntime.jsxs("div", { className: renderClassStatus(' rls-box-field', {
-            focused: formControl?.focused,
-            error: formControl?.wrong,
-            disabled: formControl?.disabled || disabled
-        }, 'rls-password-field'), "rls-theme": rlsTheme, children: [children && jsxRuntime.jsx("label", { className: "rls-box-field__label", children: children }), jsxRuntime.jsx("div", { className: "rls-box-field__component", children: jsxRuntime.jsxs("div", { className: "rls-box-field__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-box-field__error", children: jsxRuntime.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }));
+    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', {
+                            disabled: disabled || disabledPicker,
+                            end,
+                            forbidden,
+                            ranged,
+                            source
+                        }), onClick: value && !disabledPicker ? () => onChange(value) : undefined, children: jsxRuntime.jsx("span", { className: "rls-picker-day-range__element__span", children: value || '??' }) }, index))) }, index))) })] }));
 }
 
-function RlsRadioButtonLabel({ children, disabled, extended, formControl, rlsTheme, value }) {
-    const [checked, setChecked] = react.useState(formControl?.state || false);
+function RlsPickerMonth({ date, disabled: disabledPicker, formControl, maxDate, minDate, onValue, rlsTheme, year }) {
+    const currentDate = date || new Date();
+    const [months, setMonths] = react.useState([]);
+    const [value, setValue] = react.useState(formControl?.state || currentDate.getMonth());
     react.useEffect(() => {
-        setChecked(formControl?.state === value);
+        const props = createPickerProps(); // MonthPickerProps
+        const month = checkMonthPicker(props);
+        month ? setMonthValue(month) : setMonths(createMonthPicker(props));
+    }, [date, year, value, minDate, maxDate]);
+    react.useEffect(() => {
+        const month = checkMonthPicker(createPickerProps());
+        helpersAdvanced.itIsDefined(month)
+            ? formControl?.setState(month)
+            : setValue(formControl?.state || currentDate.getMonth());
     }, [formControl?.state]);
-    function onSelect() {
-        if (formControl) {
-            formControl?.setState(value);
+    function createPickerProps() {
+        return {
+            date: currentDate,
+            month: helpersAdvanced.itIsDefined(formControl?.state) ? formControl?.state : value,
+            year: year || currentDate.getFullYear(),
+            minDate,
+            maxDate
+        };
+    }
+    function setMonthValue(value) {
+        formControl ? formControl.setState(value) : setValue(value);
+    }
+    function onChange(value) {
+        setMonthValue(value);
+        if (onValue) {
+            onValue(value);
+        }
+    }
+    return (jsxRuntime.jsx("div", { className: "rls-picker-month", "rls-theme": rlsTheme, children: months.map(({ label, value, disabled, focused, selected }, index) => (jsxRuntime.jsx("div", { className: renderClassStatus('rls-picker-month__component', {
+                disabled: disabled || disabledPicker,
+                focused,
+                selected
+            }), onClick: !(disabled || disabledPicker) ? () => onChange(value) : undefined, children: jsxRuntime.jsx("span", { className: "rls-picker-month__span", children: label }) }, index))) }));
+}
+
+function RlsPickerMonthTitle({ monthControl, type, yearControl, date, disabled, maxDate, minDate, onClick }) {
+    const { limitNext, limitPrevious } = monthLimitTemplate({
+        date,
+        maxDate,
+        minDate,
+        month: monthControl.state
+    });
+    const monthName = helpersDate.MONTH_NAMES()[monthControl.state || 0];
+    function onPreviousMonth() {
+        if (helpersAdvanced.itIsDefined(monthControl.state) && helpersAdvanced.itIsDefined(yearControl.state)) {
+            if (monthControl.state > helpersDate.Month.January) {
+                monthControl.setState(monthControl.state - 1);
+            }
+            else {
+                monthControl.setState(helpersDate.Month.December);
+                yearControl.setState(yearControl.state - 1);
+            }
         }
     }
-    return (jsxRuntime.jsxs("div", { className: renderClassStatus('rls-radiobutton-label', {
-            disabled,
-            extended
-        }), "rls-theme": rlsTheme, children: [jsxRuntime.jsx("div", { className: "rls-radiobutton-label__component", onClick: onSelect, children: jsxRuntime.jsx(RlsRadioButton, { checked: checked, disabled: disabled }) }), jsxRuntime.jsx("label", { className: "rls-radiobutton-label__text", children: children })] }));
-}
-
-function RlsSwitchLabel({ children, disabled, extended, formControl, rlsTheme }) {
-    const [checked, setChecked] = react.useState(formControl?.value || false);
-    react.useEffect(() => {
-        setChecked(formControl?.state || false);
-    }, [formControl?.state]);
-    function onToggle() {
-        if (formControl) {
-            formControl?.setState(!formControl.state);
+    function onPreviousYear() {
+        if (helpersAdvanced.itIsDefined(yearControl.state)) {
+            yearControl.setState(yearControl.state - 1);
         }
-        else {
-            setChecked(!checked);
+    }
+    function onPrevious() {
+        type === 'month' ? onPreviousMonth() : onPreviousYear();
+    }
+    function onNextMonth() {
+        if (helpersAdvanced.itIsDefined(monthControl.state) && helpersAdvanced.itIsDefined(yearControl.state)) {
+            if (monthControl.state < helpersDate.Month.December) {
+                monthControl.setState(monthControl.state + 1);
+            }
+            else {
+                monthControl.setState(helpersDate.Month.January);
+                yearControl.setState(yearControl.state + 1);
+            }
         }
     }
-    return (jsxRuntime.jsxs("div", { className: renderClassStatus('rls-switch-label', { disabled, extended }), "rls-theme": rlsTheme, children: [jsxRuntime.jsx("div", { className: "rls-switch-label__component", onClick: onToggle, children: jsxRuntime.jsx(RlsSwitch, { checked: checked, disabled: disabled }) }), jsxRuntime.jsx("label", { className: "rls-switch-label__text", children: children })] }));
-}
-
-function RlsTextField({ children, disabled, formControl, placeholder, rlsTheme, value, onValue }) {
-    return (jsxRuntime.jsxs("div", { className: renderClassStatus('rls-box-field', {
-            focused: formControl?.focused,
-            error: formControl?.wrong,
-            disabled: formControl?.disabled || disabled
-        }, 'rls-text-field'), "rls-theme": rlsTheme, children: [children && jsxRuntime.jsx("label", { className: "rls-box-field__label", children: children }), jsxRuntime.jsx("div", { className: "rls-box-field__component", children: jsxRuntime.jsx("div", { className: "rls-box-field__body", children: jsxRuntime.jsx(RlsInputText, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), formControl?.touched && formControl?.error && (jsxRuntime.jsx("div", { className: "rls-box-field__error", children: jsxRuntime.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }));
-}
-
-function RlsToolbar({ actions, children, subtitle }) {
-    return (jsxRuntime.jsxs("div", { className: "rls-toolbar", children: [jsxRuntime.jsxs("div", { className: "rls-toolbar__description", children: [children && jsxRuntime.jsx("label", { className: "rls-toolbar__title", children: children }), subtitle && (jsxRuntime.jsx("label", { className: "rls-toolbar__subtitle smalltext-semibold", children: subtitle }))] }), actions && (jsxRuntime.jsx("div", { className: "rls-toolbar__actions", children: actions.map((action, index) => (jsxRuntime.jsx("div", { children: action }, index))) }))] }));
+    function onNextYear() {
+        if (helpersAdvanced.itIsDefined(yearControl.state)) {
+            yearControl.setState(yearControl.state + 1);
+        }
+    }
+    function onNext() {
+        type === 'month' ? onNextMonth() : onNextYear();
+    }
+    return (jsxRuntime.jsxs("div", { className: "rls-picker-month-title", children: [jsxRuntime.jsx(RlsButtonAction, { icon: "arrow-ios-left", onClick: onPrevious, disabled: limitPrevious || disabled }), jsxRuntime.jsx("span", { onClick: onClick, children: monthName }), jsxRuntime.jsx(RlsButtonAction, { icon: "arrow-ios-right", onClick: onNext, disabled: limitNext || disabled })] }));
 }
 
-function RlsYearPicker({ date, disabled: disabledPicker, formControl, maxDate, minDate, onValue, rlsTheme }) {
+function RlsPickerYear({ date, disabled: disabledPicker, formControl, maxDate, minDate, onValue, rlsTheme }) {
     const currentDate = date || new Date();
     const [value, setValue] = react.useState(formControl?.state || currentDate.getFullYear());
     const [year, setYear] = react.useState(formControl?.state || currentDate.getFullYear());
@@ -1250,11 +1239,19 @@ function RlsYearPicker({ date, disabled: disabledPicker, formControl, maxDate, m
             onValue(value);
         }
     }
-    return (jsxRuntime.jsxs("div", { className: "rls-year-picker", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: "rls-year-picker__header", children: [jsxRuntime.jsx("div", { className: "rls-year-picker__action rls-year-picker__action--prev", children: jsxRuntime.jsx(RlsButtonAction, { icon: "arrow-ios-left", onClick: onClickPrev, disabled: !template.canPrevious || disabledPicker }) }), jsxRuntime.jsxs("label", { className: "rls-title-bold", children: [template.minRange, " - ", template.maxRange] }), jsxRuntime.jsx("div", { className: "rls-year-picker__action rls-year-picker__action--next", children: jsxRuntime.jsx(RlsButtonAction, { icon: "arrow-ios-right", onClick: onClickNext, disabled: !template.canNext || disabledPicker }) })] }), jsxRuntime.jsx("div", { className: "rls-year-picker__component", children: template.years.map(({ value, disabled, focused, selected }, index) => (jsxRuntime.jsx("div", { className: renderClassStatus('rls-year-picker__year', {
+    return (jsxRuntime.jsxs("div", { className: "rls-picker-year", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: "rls-picker-year__header", children: [jsxRuntime.jsx("div", { className: "rls-picker-year__action rls-picker-year__action--prev", children: jsxRuntime.jsx(RlsButtonAction, { icon: "arrow-ios-left", onClick: onClickPrev, disabled: !template.canPrevious || disabledPicker }) }), jsxRuntime.jsxs("label", { className: "rls-title-bold", children: [template.minRange, " - ", template.maxRange] }), jsxRuntime.jsx("div", { className: "rls-picker-year__action rls-picker-year__action--next", children: jsxRuntime.jsx(RlsButtonAction, { icon: "arrow-ios-right", onClick: onClickNext, disabled: !template.canNext || disabledPicker }) })] }), jsxRuntime.jsx("div", { className: "rls-picker-year__component", children: template.years.map(({ value, disabled, focused, selected }, index) => (jsxRuntime.jsx("div", { className: renderClassStatus('rls-picker-year__year', {
                         disabled: disabled || disabledPicker,
                         focused,
                         selected
-                    }), onClick: value && !disabledPicker ? () => onChange(value) : undefined, children: jsxRuntime.jsx("span", { className: "rls-year-picker__year__span rls-body1-medium", children: value || '????' }) }, index))) })] }));
+                    }), onClick: value && !disabledPicker ? () => onChange(value) : undefined, children: jsxRuntime.jsx("span", { className: "rls-picker-year__year__span rls-body1-medium", children: value || '????' }) }, index))) })] }));
+}
+
+function RlsToolbar({ actions, children, subtitle }) {
+    return (jsxRuntime.jsxs("div", { className: "rls-toolbar", children: [jsxRuntime.jsxs("div", { className: "rls-toolbar__description", children: [children && jsxRuntime.jsx("label", { className: "rls-toolbar__title", children: children }), subtitle && (jsxRuntime.jsx("label", { className: "rls-toolbar__subtitle smalltext-semibold", children: subtitle }))] }), actions && (jsxRuntime.jsx("div", { className: "rls-toolbar__actions", children: actions.map((action, index) => (jsxRuntime.jsx("div", { children: action }, index))) }))] }));
+}
+
+function RlsCard({ children, outline, rlsTheme }) {
+    return (jsxRuntime.jsx("div", { className: renderClassStatus('rls-card', { outline }), "rls-theme": rlsTheme, children: jsxRuntime.jsx("div", { className: "rls-card__content", children: children }) }));
 }
 
 const reactI18n = i18n.i18n({
@@ -1278,6 +1275,87 @@ const reactI18n = i18n.i18n({
     }
 });
 
+class ConfirmationResult extends helpersAdvanced.PartialSealed {
+    static approved() {
+        return new ConfirmationResult('approved');
+    }
+    static reject() {
+        return new ConfirmationResult('reject');
+    }
+}
+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" })] }));
+}
+function useConfirmationService() {
+    const [config, setConfig] = react.useState({});
+    const [visible, setVisible] = react.useState(false);
+    const rlsConfirmation = ReactDOM.createPortal(jsxRuntime.jsx(RlsConfirmation, { ...config, visible: visible }), document.body);
+    function confirmation(config) {
+        return new Promise((resolve) => {
+            const { content, rlsTheme, subtitle, title, approved, reject } = config;
+            setConfig({
+                content,
+                rlsTheme,
+                subtitle,
+                title,
+                approved: {
+                    label: approved || reactI18n('confirmationActionApproved'),
+                    onClick: () => {
+                        setVisible(false);
+                        resolve(ConfirmationResult.approved());
+                    }
+                },
+                reject: reject
+                    ? {
+                        label: reject,
+                        onClick: () => {
+                            setVisible(false);
+                            resolve(ConfirmationResult.reject());
+                        }
+                    }
+                    : undefined
+            });
+            setVisible(true);
+        });
+    }
+    return {
+        RlsConfirmation: rlsConfirmation,
+        confirmation
+    };
+}
+
+function RlsDatatableHeader({ children }) {
+    return jsxRuntime.jsx("tr", { className: "rls-datatable__header", children: children });
+}
+function RlsDatatableTitle({ children, className, control }) {
+    return (jsxRuntime.jsx("th", { className: renderClassStatus('rls-datatable__title', { control }, className).trim(), children: children }));
+}
+function RlsDatatableData({ children, className, error }) {
+    return (jsxRuntime.jsx("tr", { className: renderClassStatus('rls-datatable__data', { error }, className).trim(), children: children }));
+}
+function RlsDatatableCell({ children, className, control, overflow }) {
+    return (jsxRuntime.jsx("th", { className: renderClassStatus('rls-datatable__cell', { control, overflow }, className).trim(), children: children }));
+}
+function RlsDatatableTotals({ children, className, error }) {
+    return (jsxRuntime.jsx("div", { className: renderClassStatus('rls-datatable__totals', { error }, className).trim(), children: children }));
+}
+function RlsDatatableInfo({ children, className, control, overflow }) {
+    return (jsxRuntime.jsx("div", { className: renderClassStatus('rls-datatable__info', { control, overflow }, className).trim(), children: children }));
+}
+function RlsDatatable({ children, datatable, footer, header, rlsTheme, summary }) {
+    return (jsxRuntime.jsxs("div", { className: renderClassStatus('rls-datatable', {
+            scrolleable: datatable?.scrolleable
+        }), "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("table", { children: [header && jsxRuntime.jsx("thead", { className: "rls-datatable__thead", children: header }), jsxRuntime.jsx("tbody", { ref: datatable?.bodyRef, className: "rls-datatable__tbody", children: children })] }), summary && jsxRuntime.jsx("div", { className: "rls-datatable__tsummary", children: summary }), footer && jsxRuntime.jsx("div", { className: "rls-datatable__tfooter", children: footer })] }));
+}
+
 function useDatatable() {
     const [scrolleable, setScrolleable] = react.useState(false);
     const bodyRef = react.useRef(null);
@@ -1368,44 +1446,66 @@ function useListControl({ suggestions, formControl }) {
 
 const DURATION_ANIMATION$1 = 240;
 const MAX_ELEMENTS = 6;
-function useAutocompleteField({ disabled, formControl, onSelect, onValue, suggestions }) {
+function useFieldAutocomplete({ disabled, formControl, onSelect, onValue, suggestions }) {
     const [pattern, setPattern] = react.useState('');
     const [coincidences, setCoincidences] = react.useState([]);
-    const [store, setStore] = react.useState({
+    const currentStore = react.useRef({
         pattern: '',
         coincidences: [],
         previous: null
     });
     const listControl = useListControl({ suggestions, formControl });
     const { collection, inputRef, navigationElement, navigationInput, setFocused, setValue, setVisible } = listControl;
+    const initializedState = react.useRef(false);
+    const initializedCollection = react.useRef(false);
     const changeInternal = react.useRef(false);
-    react.useEffect(() => filterSuggestions(pattern, true), [suggestions]);
-    react.useEffect(() => filterSuggestions(pattern), [pattern]);
     react.useEffect(() => {
+        refreshCoincidences(pattern, true);
+    }, [suggestions]);
+    react.useEffect(() => {
+        refreshCoincidences(pattern);
+    }, [pattern]);
+    react.useEffect(() => {
+        if (!initializedState.current || !initializedCollection.current) {
+            initializedState.current = true;
+            return;
+        }
         if (changeInternal.current) {
             changeInternal.current = false;
+            return;
         }
-        else {
-            resetState(formControl?.state);
-        }
+        refresh(collection, formControl?.state);
     }, [formControl?.state]);
-    react.useEffect(() => resetCollection(collection, formControl?.state), [collection]);
+    react.useEffect(() => {
+        if (!initializedCollection.current || !initializedState.current) {
+            initializedCollection.current = true;
+            return;
+        }
+        refresh(collection, formControl?.state);
+    }, [collection]);
+    function refresh(collection, state) {
+        if (!state) {
+            return setValue('');
+        }
+        const element = collection.find(state);
+        if (element) {
+            return setValue(element.description);
+        }
+        setValue('');
+        setFormState(undefined);
+    }
     function setFormState(value) {
         if (formControl) {
             changeInternal.current = true;
             formControl.setState(value);
         }
     }
-    function resetCollection(collection, state) {
-        setValue(state ? collection.find(state)?.description || '' : '');
-    }
-    function resetState(state) {
-        resetCollection(collection, state);
-    }
     function onClickControl() {
         if (!disabled) {
             setVisible(true);
-            setTimeout(() => inputRef?.current?.focus(), DURATION_ANIMATION$1);
+            setTimeout(() => {
+                inputRef?.current?.focus();
+            }, DURATION_ANIMATION$1);
         }
     }
     function onFocusInput() {
@@ -1459,15 +1559,15 @@ function useAutocompleteField({ disabled, formControl, onSelect, onValue, sugges
             onValue(value);
         }
     }
-    function filterSuggestions(pattern, reboot = false) {
-        const result = createStoreAutocomplete({
+    function refreshCoincidences(pattern, reboot = false) {
+        const { collection, store } = createStoreAutocomplete({
             pattern,
             suggestions,
             reboot,
-            store
+            store: currentStore.current
         });
-        setCoincidences(result.collection.slice(0, MAX_ELEMENTS));
-        setStore(result.store);
+        currentStore.current = store;
+        setCoincidences(collection.slice(0, MAX_ELEMENTS));
     }
     return {
         coincidences,
@@ -1485,115 +1585,30 @@ function useAutocompleteField({ disabled, formControl, onSelect, onValue, sugges
     };
 }
 
-function RlsAutocompleteFieldTemplate({ suggestions, children, disabled, formControl, hiddenIcon, placeholder, searching, rlsTheme, onSearch, onSelect, onValue, render }) {
-    const { coincidences, listControl, pattern, onBlurInput, onClickAction, onClickBackdrop, onClickControl, onClickElement, onFocusInput, onKeydownElement, onKeydownInput, setPattern } = useAutocompleteField({
+function RlsFieldAutocompleteTemplate({ suggestions, children, disabled, formControl, hiddenIcon, placeholder, searching, rlsTheme, onSearch, onSelect, onValue, render }) {
+    const { coincidences, listControl, pattern, onBlurInput, onClickAction, onClickBackdrop, onClickControl, onClickElement, onFocusInput, onKeydownElement, onKeydownInput, setPattern } = useFieldAutocomplete({
         suggestions,
         disabled,
         formControl,
         onSelect,
         onValue
     });
-    return (jsxRuntime.jsxs("div", { ref: listControl.boxContentRef, className: renderClassStatus('rls-box-field', {
+    return (jsxRuntime.jsxs("div", { ref: listControl.boxContentRef, className: renderClassStatus('rls-field-box', {
             disabled,
             focused: listControl.focused,
             selected: !!listControl.value
-        }, 'rls-autocomplete-field rls-list-field'), "rls-theme": rlsTheme, children: [children && jsxRuntime.jsx("label", { className: "rls-box-field__label", children: children }), jsxRuntime.jsx("div", { className: "rls-box-field__component", children: jsxRuntime.jsxs("div", { className: "rls-box-field__body", children: [jsxRuntime.jsx("label", { className: "rls-list-field__control", onClick: onClickControl, children: listControl.value ? (jsxRuntime.jsx("span", { className: "rls-list-field__control__description", children: listControl.value })) : (jsxRuntime.jsx("span", { className: "rls-list-field__control__placeholder", children: placeholder })) }), !hiddenIcon && listControl.value && (jsxRuntime.jsx("button", { className: "rls-list-field__action", disabled: disabled, onClick: onClickAction, children: jsxRuntime.jsx(RlsIcon, { value: "trash-2" }) }))] }) }), formControl?.touched && formControl?.error && (jsxRuntime.jsx("div", { className: "rls-box-field__error", children: jsxRuntime.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) })), jsxRuntime.jsxs("div", { className: renderClassStatus('rls-list-field__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" }) }))] }) }), 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', {
                     visible: listControl.visible,
                     hide: !listControl.visible,
                     higher: listControl.higher
-                }), children: [jsxRuntime.jsx("div", { className: "rls-list-field__suggestions__body", children: jsxRuntime.jsxs("ul", { ref: listControl.listRef, className: "rls-list-field__ul", children: [jsxRuntime.jsxs("div", { className: "rls-list-field__ul__search", children: [jsxRuntime.jsx("input", { ref: listControl.inputRef, className: "rls-list-field__ul__control", type: "text", placeholder: reactI18n('listInputPlaceholder'), value: pattern, onChange: ({ target: { value } }) => {
+                }), children: [jsxRuntime.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntime.jsxs("ul", { ref: listControl.listRef, className: "rls-field-list__ul", children: [jsxRuntime.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntime.jsx("input", { ref: listControl.inputRef, className: "rls-field-list__ul__control", type: "text", placeholder: reactI18n('listInputPlaceholder'), value: pattern, onChange: ({ target: { value } }) => {
                                                 setPattern(value);
                                             }, disabled: disabled || searching, onFocus: onFocusInput, onBlur: onBlurInput, onKeyDown: onKeydownInput }), onSearch && (jsxRuntime.jsx("button", { disabled: disabled || searching, onClick: () => {
                                                 onSearch(pattern);
-                                            }, children: jsxRuntime.jsx(RlsIcon, { value: "search" }) }))] }), searching && jsxRuntime.jsx(RlsProgressBar, { indeterminate: true }), coincidences.map((element, index) => (jsxRuntime.jsx("li", { className: "rls-list-field__element", tabIndex: -1, onClick: onClickElement(element), onKeyDown: onKeydownElement(element), children: render(element) }, index))), !coincidences.length && (jsxRuntime.jsx("li", { className: "rls-list-field__empty", children: jsxRuntime.jsxs("div", { className: "rls-list-field__empty__description", children: [jsxRuntime.jsx("label", { className: "rls-label-bold truncate", children: reactI18n('listEmptyTitle') }), jsxRuntime.jsx("p", { className: "rls-caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), jsxRuntime.jsx("div", { className: "rls-list-field__backdrop", onClick: onClickBackdrop })] })] }));
-}
-function RlsAutocompleteField(props) {
-    return (jsxRuntime.jsx(RlsAutocompleteFieldTemplate, { ...props, render: (element) => (jsxRuntime.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title })) }));
-}
-
-function RlsCard({ children, outline, rlsTheme }) {
-    return (jsxRuntime.jsx("div", { className: renderClassStatus('rls-card', { outline }), "rls-theme": rlsTheme, children: jsxRuntime.jsx("div", { className: "rls-card__content", children: children }) }));
-}
-
-class ConfirmationResult extends helpersAdvanced.PartialSealed {
-    static approved() {
-        return new ConfirmationResult('approved');
-    }
-    static reject() {
-        return new ConfirmationResult('reject');
-    }
-}
-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" })] }));
-}
-function useConfirmationService() {
-    const [config, setConfig] = react.useState({});
-    const [visible, setVisible] = react.useState(false);
-    const rlsConfirmation = ReactDOM.createPortal(jsxRuntime.jsx(RlsConfirmation, { ...config, visible: visible }), document.body);
-    function confirmation(config) {
-        return new Promise((resolve) => {
-            const { content, rlsTheme, subtitle, title, approved, reject } = config;
-            setConfig({
-                content,
-                rlsTheme,
-                subtitle,
-                title,
-                approved: {
-                    label: approved || reactI18n('confirmationActionApproved'),
-                    onClick: () => {
-                        setVisible(false);
-                        resolve(ConfirmationResult.approved());
-                    }
-                },
-                reject: reject
-                    ? {
-                        label: reject,
-                        onClick: () => {
-                            setVisible(false);
-                            resolve(ConfirmationResult.reject());
-                        }
-                    }
-                    : undefined
-            });
-            setVisible(true);
-        });
-    }
-    return {
-        RlsConfirmation: rlsConfirmation,
-        confirmation
-    };
-}
-
-function RlsDatatableHeader({ children }) {
-    return jsxRuntime.jsx("tr", { className: "rls-datatable__header", children: children });
-}
-function RlsDatatableTitle({ children, className, control }) {
-    return (jsxRuntime.jsx("th", { className: renderClassStatus('rls-datatable__title', { control }, className).trim(), children: children }));
-}
-function RlsDatatableData({ children, className, error }) {
-    return (jsxRuntime.jsx("tr", { className: renderClassStatus('rls-datatable__data', { error }, className).trim(), children: children }));
-}
-function RlsDatatableCell({ children, className, control, overflow }) {
-    return (jsxRuntime.jsx("th", { className: renderClassStatus('rls-datatable__cell', { control, overflow }, className).trim(), children: children }));
-}
-function RlsDatatableTotals({ children, className, error }) {
-    return (jsxRuntime.jsx("div", { className: renderClassStatus('rls-datatable__totals', { error }, className).trim(), children: children }));
+                                            }, children: jsxRuntime.jsx(RlsIcon, { value: "search" }) }))] }), searching && jsxRuntime.jsx(RlsProgressBar, { indeterminate: true }), coincidences.map((element, index) => (jsxRuntime.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: onClickElement(element), onKeyDown: onKeydownElement(element), children: render(element) }, index))), !coincidences.length && (jsxRuntime.jsx("li", { className: "rls-field-list__empty", children: jsxRuntime.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntime.jsx("label", { className: "rls-label-bold truncate", children: reactI18n('listEmptyTitle') }), jsxRuntime.jsx("p", { className: "rls-caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), jsxRuntime.jsx("div", { className: "rls-field-list__backdrop", onClick: onClickBackdrop })] })] }));
 }
-function RlsDatatableInfo({ children, className, control, overflow }) {
-    return (jsxRuntime.jsx("div", { className: renderClassStatus('rls-datatable__info', { control, overflow }, className).trim(), children: children }));
-}
-function RlsDatatable({ children, datatable, footer, header, rlsTheme, summary }) {
-    return (jsxRuntime.jsxs("div", { className: renderClassStatus('rls-datatable', {
-            scrolleable: datatable?.scrolleable
-        }), "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("table", { children: [header && jsxRuntime.jsx("thead", { className: "rls-datatable__thead", children: header }), jsxRuntime.jsx("tbody", { ref: datatable?.bodyRef, className: "rls-datatable__tbody", children: children })] }), summary && jsxRuntime.jsx("div", { className: "rls-datatable__tsummary", children: summary }), footer && jsxRuntime.jsx("div", { className: "rls-datatable__tfooter", children: footer })] }));
+function RlsFieldAutocomplete(props) {
+    return (jsxRuntime.jsx(RlsFieldAutocompleteTemplate, { ...props, render: (element) => (jsxRuntime.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title })) }));
 }
 
 function rangeFormatTemplate({ maxDate, minDate }) {
@@ -1699,7 +1714,7 @@ function useReactControl(controlProps, controlValidators) {
 }
 
 const FORMAT_DESCRIPTION = '{dw}, {mx} {dd} de {aa}';
-function RlsDatePicker({ automatic, date, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
+function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
     const today = new Date(); // Initial current date in component
     const dateInitial = formControl?.state || date || today;
     const yearControl = useReactControl(dateInitial.getFullYear());
@@ -1760,18 +1775,18 @@ function RlsDatePicker({ automatic, date, disabled, formControl, maxDate, minDat
             onListener({ type: PickerListenerType.Select, value });
         }
     }
-    return (jsxRuntime.jsxs("div", { className: "rls-date-picker", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: "rls-date-picker__header", children: [jsxRuntime.jsx("div", { className: "rls-date-picker__title rls-date-picker__title--description", children: jsxRuntime.jsx("span", { onClick: onVisibilityDay, children: helpersDate.dateFormatTemplate(dateInitial, FORMAT_DESCRIPTION) }) }), jsxRuntime.jsx("div", { className: "rls-date-picker__title rls-date-picker__title--year", children: jsxRuntime.jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), jsxRuntime.jsx(RlsMonthTitlePicker, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityMonth })] }), jsxRuntime.jsxs("div", { className: renderClassStatus('rls-date-picker__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: 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', {
                     day: visibility === 'DAY',
                     month: visibility === 'MONTH',
                     year: visibility === 'YEAR'
-                }), children: [jsxRuntime.jsx(RlsDayPicker, { formControl: dayControl, date: dateInitial, month: monthControl.state, year: yearControl.state, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntime.jsx(RlsMonthPicker, { formControl: monthControl, date: dateInitial, year: yearControl.state, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntime.jsx(RlsYearPicker, { formControl: yearControl, date: dateInitial, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), jsxRuntime.jsx("div", { className: renderClassStatus('rls-date-picker__footer', { automatic }), children: jsxRuntime.jsxs("div", { className: "rls-date-picker__actions", children: [jsxRuntime.jsx("div", { className: "rls-date-picker__actions--cancel", children: jsxRuntime.jsx(RlsButton, { type: "ghost", onClick: onCancel, children: reactI18n('dateActionCancel') }) }), jsxRuntime.jsx("div", { className: "rls-date-picker__actions--today", children: jsxRuntime.jsx(RlsButton, { type: "ghost", onClick: onToday, disabled: dateOutRange({ date: today, maxDate, minDate }), children: reactI18n('dateActionToday') }) }), jsxRuntime.jsx("div", { className: "rls-date-picker__actions--ok", children: jsxRuntime.jsx(RlsButton, { type: "raised", onClick: onSelect, children: reactI18n('dateActionSelect') }) })] }) })] }));
+                }), 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 RlsDateField({ children, date, disabled, formControl, maxDate, minDate, onValue, placeholder, rlsTheme }) {
+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();
     const [modalIsVisible, setModalIsVisible] = react.useState(false);
@@ -1807,7 +1822,7 @@ function RlsDateField({ children, date, disabled, formControl, maxDate, minDate,
             setModalIsVisible(true);
         }
     }
-    return (jsxRuntime.jsxs("div", { className: "rls-date-field", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: renderClassStatus('rls-box-field', { disabled }), children: [children && jsxRuntime.jsx("label", { className: "rls-box-field__label", children: children }), jsxRuntime.jsx("div", { className: "rls-box-field__component", children: jsxRuntime.jsxs("div", { className: "rls-box-field__body", children: [jsxRuntime.jsx("input", { className: "rls-date-field__control", type: "text", value: value ? helpersDate.dateFormatTemplate(value, DATE_RANGE_FORMAT) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntime.jsx("button", { className: "rls-date-field__action", onClick: onClean, disabled: disabled, children: jsxRuntime.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), formControl?.touched && formControl?.error && (jsxRuntime.jsx("div", { className: "rls-box-field__error", children: jsxRuntime.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }), jsxRuntime.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntime.jsx(RlsDatePicker, { 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 ? 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 }) => {
                         if (type !== PickerListenerType.Cancel) {
                             onChange(value, true);
                         }
@@ -1818,7 +1833,7 @@ function RlsDateField({ children, date, disabled, formControl, maxDate, minDate,
                     } }) })] }));
 }
 
-function RlsDateRangePicker({ automatic, date: datePicker, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
+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 yearControl = useReactControl(dateInitial.getFullYear());
@@ -1867,16 +1882,16 @@ function RlsDateRangePicker({ automatic, date: datePicker, disabled, formControl
             onListener({ type: PickerListenerType.Select, value });
         }
     }
-    return (jsxRuntime.jsxs("div", { className: "rls-date-range-picker", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: "rls-date-range-picker__header", children: [jsxRuntime.jsx("div", { className: "rls-date-range-picker__title rls-date-range-picker__title--description", children: jsxRuntime.jsx("span", { onClick: onVisibilityDay, children: rangeFormatTemplate(value) }) }), jsxRuntime.jsx("div", { className: "rls-date-range-picker__title rls-date-range-picker__title--year", children: jsxRuntime.jsx("span", { onClick: onVisibilityYear, children: yearControl.state }) }), jsxRuntime.jsx(RlsMonthTitlePicker, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: visibility === 'MONTH' ? 'year' : 'month', onClick: onVisibilityMonth })] }), jsxRuntime.jsxs("div", { className: renderClassStatus('rls-date-range-picker__component', {
+    return (jsxRuntime.jsxs("div", { className: "rls-picker-date-range", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: "rls-picker-date-range__header", children: [jsxRuntime.jsx("div", { className: "rls-picker-date-range__title rls-picker-date-range__title--description", children: jsxRuntime.jsx("span", { onClick: onVisibilityDay, children: rangeFormatTemplate(value) }) }), jsxRuntime.jsx("div", { className: "rls-picker-date-range__title rls-picker-date-range__title--year", children: jsxRuntime.jsx("span", { onClick: onVisibilityYear, children: yearControl.state }) }), jsxRuntime.jsx(RlsPickerMonthTitle, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: visibility === 'MONTH' ? 'year' : 'month', onClick: onVisibilityMonth })] }), jsxRuntime.jsxs("div", { className: renderClassStatus('rls-picker-date-range__component', {
                     day: visibility === 'DAY',
                     month: visibility === 'MONTH',
                     year: visibility === 'YEAR'
-                }), children: [jsxRuntime.jsx(RlsDayRangePicker, { formControl: dayControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntime.jsx(RlsMonthPicker, { formControl: monthControl, year: yearControl.state, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntime.jsx(RlsYearPicker, { formControl: yearControl, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), jsxRuntime.jsx("div", { className: renderClassStatus('rls-date-range-picker__footer', {
+                }), children: [jsxRuntime.jsx(RlsPickerDayRange, { formControl: dayControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntime.jsx(RlsPickerMonth, { formControl: monthControl, year: yearControl.state, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntime.jsx(RlsPickerYear, { formControl: yearControl, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), jsxRuntime.jsx("div", { className: renderClassStatus('rls-picker-date-range__footer', {
                     automatic
-                }), children: jsxRuntime.jsxs("div", { className: "rls-date-range-picker__actions", children: [jsxRuntime.jsx("div", { className: "rls-date-range-picker__actions--cancel", children: jsxRuntime.jsx(RlsButton, { type: "ghost", onClick: onCancel, children: reactI18n('dateActionCancel') }) }), jsxRuntime.jsx("div", { className: "rls-date-range-picker__actions--ok", children: jsxRuntime.jsx(RlsButton, { type: "raised", onClick: onSelect, children: reactI18n('dateActionSelect') }) })] }) })] }));
+                }), children: jsxRuntime.jsxs("div", { className: "rls-picker-date-range__actions", children: [jsxRuntime.jsx("div", { className: "rls-picker-date-range__actions--cancel", children: jsxRuntime.jsx(RlsButton, { type: "ghost", onClick: onCancel, children: reactI18n('dateActionCancel') }) }), jsxRuntime.jsx("div", { className: "rls-picker-date-range__actions--ok", children: jsxRuntime.jsx(RlsButton, { type: "raised", onClick: onSelect, children: reactI18n('dateActionSelect') }) })] }) })] }));
 }
 
-function RlsDateRangeField({ children, date: datePicker, disabled, formControl, maxDate, minDate, placeholder, rlsTheme }) {
+function RlsFieldDateRange({ children, date: datePicker, disabled, formControl, maxDate, minDate, placeholder, rlsTheme }) {
     const currentRange = formControl?.state || helpersDate.DateRange.now();
     const currentDate = datePicker || new Date();
     const [value, setValue] = react.useState(currentRange);
@@ -1893,7 +1908,7 @@ function RlsDateRangeField({ children, date: datePicker, disabled, formControl,
             setModalIsVisible(true);
         }
     }
-    return (jsxRuntime.jsxs("div", { className: "rls-date-field", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: renderClassStatus('rls-box-field', { disabled }), children: [children && jsxRuntime.jsx("label", { className: "rls-box-field__label", children: children }), jsxRuntime.jsx("div", { className: "rls-box-field__component", children: jsxRuntime.jsxs("div", { className: "rls-box-field__body", children: [jsxRuntime.jsx("input", { className: "rls-date-field__control", type: "text", value: value ? rangeFormatTemplate(value) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntime.jsx("button", { className: "rls-date-field__action", onClick: onClickAction, disabled: disabled, children: jsxRuntime.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) })] }), jsxRuntime.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntime.jsx(RlsDateRangePicker, { 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(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);
                         }
@@ -1901,35 +1916,47 @@ function RlsDateRangeField({ children, date: datePicker, disabled, formControl,
                     } }) })] }));
 }
 
-function RlsFormNavigation({ children, visible, rlsTheme }) {
-    return (jsxRuntime.jsx("div", { className: renderClassStatus('rls-form-navigation', { visible }), "rls-theme": rlsTheme, children: jsxRuntime.jsx("div", { className: "rls-form-navigation__body", children: children }) }));
-}
-
-function useSelectField({ suggestions, formControl, onSelect, onValue }) {
+function useFieldSelect({ suggestions, formControl, onSelect, onValue }) {
     const listControl = useListControl({ suggestions, formControl });
     const { collection, inputRef, visible, navigationElement, navigationInput, setFocused, setValue, setVisible } = listControl;
+    const initializedState = react.useRef(false);
+    const initializedCollection = react.useRef(false);
     const changeInternal = react.useRef(false);
     react.useEffect(() => {
+        if (!initializedState.current || !initializedCollection.current) {
+            initializedState.current = true;
+            return;
+        }
         if (changeInternal.current) {
             changeInternal.current = false;
+            return;
         }
-        else {
-            resetState(formControl?.state);
-        }
+        refresh(collection, formControl?.state);
     }, [formControl?.state]);
-    react.useEffect(() => resetCollection(collection, formControl?.state), [collection]);
+    react.useEffect(() => {
+        if (!initializedCollection.current || !initializedState.current) {
+            initializedCollection.current = true;
+            return;
+        }
+        refresh(collection, formControl?.state);
+    }, [collection]);
+    function refresh(collection, state) {
+        if (!state) {
+            return setValue('');
+        }
+        const element = collection.find(state);
+        if (element) {
+            return setValue(element.description);
+        }
+        setValue('');
+        setFormState(undefined);
+    }
     function setFormState(value) {
         if (formControl) {
             changeInternal.current = true;
             formControl.setState(value);
         }
     }
-    function resetCollection(collection, state) {
-        setValue(state ? collection.find(state)?.description || '' : '');
-    }
-    function resetState(state) {
-        resetCollection(collection, state);
-    }
     function onFocusInput() {
         setFocused(true);
     }
@@ -1955,9 +1982,8 @@ function useSelectField({ suggestions, formControl, onSelect, onValue }) {
         }
     }
     function onClickAction() {
-        const newVisible = !visible;
-        setVisible(newVisible);
-        if (newVisible) {
+        setVisible(!visible);
+        if (!visible) {
             inputRef?.current?.focus();
         }
     }
@@ -2001,24 +2027,28 @@ function useSelectField({ suggestions, formControl, onSelect, onValue }) {
     };
 }
 
-function RlsSelectFieldTemplate({ suggestions, children, disabled, formControl, placeholder, rlsTheme, onSelect, onValue, render }) {
-    const { listControl, onBlurInput, onClickAction, onClickBackdrop, onClickElement, onClickInput, onFocusInput, onKeydownElement, onKeydownInput } = useSelectField({
+function RlsFieldSelectTemplate({ suggestions, children, disabled, formControl, placeholder, rlsTheme, onSelect, onValue, render }) {
+    const { listControl, onBlurInput, onClickAction, onClickBackdrop, onClickElement, onClickInput, onFocusInput, onKeydownElement, onKeydownInput } = useFieldSelect({
         suggestions,
         disabled,
         formControl,
         onSelect,
         onValue
     });
-    return (jsxRuntime.jsxs("div", { ref: listControl.boxContentRef, className: renderClassStatus('rls-box-field', { focused: listControl.focused, disabled }, 'rls-select-field rls-list-field'), "rls-theme": rlsTheme, children: [children && jsxRuntime.jsx("label", { className: "rls-box-field__label", children: children }), jsxRuntime.jsx("div", { className: "rls-box-field__component", children: jsxRuntime.jsxs("div", { className: "rls-box-field__body", children: [jsxRuntime.jsx("input", { ref: listControl.inputRef, className: "rls-list-field__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: listControl.value, onFocus: onFocusInput, onBlur: onBlurInput, onClick: onClickInput, onKeyDown: onKeydownInput }), jsxRuntime.jsx("button", { className: renderClassStatus('rls-list-field__action', {
+    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?.touched && formControl?.error && (jsxRuntime.jsx("div", { className: "rls-box-field__error", children: jsxRuntime.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) })), jsxRuntime.jsxs("div", { className: renderClassStatus('rls-list-field__suggestions', {
+                            }), 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', {
                     visible: listControl.visible,
                     hide: !listControl.visible,
                     higher: listControl.higher
-                }), children: [jsxRuntime.jsx("div", { className: "rls-list-field__suggestions__body", children: jsxRuntime.jsxs("ul", { ref: listControl.listRef, className: "rls-list-field__ul", children: [suggestions.map((element, index) => (jsxRuntime.jsx("li", { className: "rls-list-field__element", tabIndex: -1, onClick: onClickElement(element), onKeyDown: onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (jsxRuntime.jsx("li", { className: "rls-list-field__empty", children: jsxRuntime.jsxs("div", { className: "rls-list-field__empty__description", children: [jsxRuntime.jsx("label", { className: "rls-label-bold truncate", children: reactI18n('listEmptyTitle') }), jsxRuntime.jsx("p", { className: "rls-caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), jsxRuntime.jsx("div", { className: "rls-list-field__backdrop", onClick: onClickBackdrop })] })] }));
+                }), children: [jsxRuntime.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntime.jsxs("ul", { ref: listControl.listRef, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (jsxRuntime.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: onClickElement(element), onKeyDown: onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (jsxRuntime.jsx("li", { className: "rls-field-list__empty", children: jsxRuntime.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntime.jsx("label", { className: "rls-label-bold truncate", children: reactI18n('listEmptyTitle') }), jsxRuntime.jsx("p", { className: "rls-caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), jsxRuntime.jsx("div", { className: "rls-field-list__backdrop", onClick: onClickBackdrop })] })] }));
 }
-function RlsSelectField(props) {
-    return (jsxRuntime.jsx(RlsSelectFieldTemplate, { ...props, render: (element) => (jsxRuntime.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title })) }));
+function RlsFieldSelect(props) {
+    return (jsxRuntime.jsx(RlsFieldSelectTemplate, { ...props, render: (element) => (jsxRuntime.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title })) }));
+}
+
+function RlsFormNavigation({ children, visible, rlsTheme }) {
+    return (jsxRuntime.jsx("div", { className: renderClassStatus('rls-form-navigation', { visible }), "rls-theme": rlsTheme, children: jsxRuntime.jsx("div", { className: "rls-form-navigation__body", children: children }) }));
 }
 
 const DURATION_ANIMATION = 240;
@@ -2085,8 +2115,6 @@ function RlsApplication({ children }) {
 exports.ConfirmationResult = ConfirmationResult;
 exports.RlsAmount = RlsAmount;
 exports.RlsApplication = RlsApplication;
-exports.RlsAutocompleteField = RlsAutocompleteField;
-exports.RlsAutocompleteFieldTemplate = RlsAutocompleteFieldTemplate;
 exports.RlsAvatar = RlsAvatar;
 exports.RlsBadge = RlsBadge;
 exports.RlsBallot = RlsBallot;
@@ -2098,7 +2126,6 @@ exports.RlsButtonToggle = RlsButtonToggle;
 exports.RlsCard = RlsCard;
 exports.RlsCheckBox = RlsCheckBox;
 exports.RlsCheckBoxControl = RlsCheckBoxControl;
-exports.RlsCheckBoxLabel = RlsCheckBoxLabel;
 exports.RlsConfirmation = RlsConfirmation;
 exports.RlsContext = RlsContext;
 exports.RlsDatatable = RlsDatatable;
@@ -2108,12 +2135,16 @@ exports.RlsDatatableHeader = RlsDatatableHeader;
 exports.RlsDatatableInfo = RlsDatatableInfo;
 exports.RlsDatatableTitle = RlsDatatableTitle;
 exports.RlsDatatableTotals = RlsDatatableTotals;
-exports.RlsDateField = RlsDateField;
-exports.RlsDatePicker = RlsDatePicker;
-exports.RlsDateRangeField = RlsDateRangeField;
-exports.RlsDateRangePicker = RlsDateRangePicker;
-exports.RlsDayPicker = RlsDayPicker;
-exports.RlsDayRangePicker = RlsDayRangePicker;
+exports.RlsFieldAutocomplete = RlsFieldAutocomplete;
+exports.RlsFieldAutocompleteTemplate = RlsFieldAutocompleteTemplate;
+exports.RlsFieldDate = RlsFieldDate;
+exports.RlsFieldDateRange = RlsFieldDateRange;
+exports.RlsFieldMoney = RlsFieldMoney;
+exports.RlsFieldNumber = RlsFieldNumber;
+exports.RlsFieldPassword = RlsFieldPassword;
+exports.RlsFieldSelect = RlsFieldSelect;
+exports.RlsFieldSelectTemplate = RlsFieldSelectTemplate;
+exports.RlsFieldText = RlsFieldText;
 exports.RlsFormNavigation = RlsFormNavigation;
 exports.RlsIcon = RlsIcon;
 exports.RlsInput = RlsInput;
@@ -2122,32 +2153,31 @@ exports.RlsInputNumber = RlsInputNumber;
 exports.RlsInputPassword = RlsInputPassword;
 exports.RlsInputText = RlsInputText;
 exports.RlsLabel = RlsLabel;
+exports.RlsLabelCheckBox = RlsLabelCheckBox;
+exports.RlsLabelRadioButton = RlsLabelRadioButton;
+exports.RlsLabelSwitch = RlsLabelSwitch;
 exports.RlsMessageIcon = RlsMessageIcon;
 exports.RlsModal = RlsModal;
-exports.RlsMoneyField = RlsMoneyField;
-exports.RlsMonthPicker = RlsMonthPicker;
-exports.RlsMonthTitlePicker = RlsMonthTitlePicker;
-exports.RlsNumberField = RlsNumberField;
 exports.RlsPagination = RlsPagination;
-exports.RlsPasswordField = RlsPasswordField;
+exports.RlsPickerDate = RlsPickerDate;
+exports.RlsPickerDateRange = RlsPickerDateRange;
+exports.RlsPickerDay = RlsPickerDay;
+exports.RlsPickerDayRange = RlsPickerDayRange;
+exports.RlsPickerMonth = RlsPickerMonth;
+exports.RlsPickerMonthTitle = RlsPickerMonthTitle;
+exports.RlsPickerYear = RlsPickerYear;
 exports.RlsPoster = RlsPoster;
 exports.RlsProgressBar = RlsProgressBar;
 exports.RlsProgressCircular = RlsProgressCircular;
 exports.RlsRadioButton = RlsRadioButton;
-exports.RlsRadioButtonLabel = RlsRadioButtonLabel;
 exports.RlsSearchInput = RlsSearchInput;
-exports.RlsSelectField = RlsSelectField;
-exports.RlsSelectFieldTemplate = RlsSelectFieldTemplate;
 exports.RlsSkeleton = RlsSkeleton;
 exports.RlsSkeletonText = RlsSkeletonText;
 exports.RlsSnackbar = RlsSnackbar;
 exports.RlsSwitch = RlsSwitch;
 exports.RlsSwitchControl = RlsSwitchControl;
-exports.RlsSwitchLabel = RlsSwitchLabel;
 exports.RlsTabularText = RlsTabularText;
-exports.RlsTextField = RlsTextField;
 exports.RlsToolbar = RlsToolbar;
-exports.RlsYearPicker = RlsYearPicker;
 exports.rangeFormatTemplate = rangeFormatTemplate;
 exports.renderClassStatus = renderClassStatus;
 exports.useConfirmationService = useConfirmationService;