@rolster/react-components 18.13.5 → 18.14.1

package/dist/es/index.js

@@ -1,10 +1,10 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, createContext } from 'react';
 import { currencyFormat, itIsDefined, PartialSealed } from '@rolster/helpers-advanced';
-import { dateIsBefore, normalizeMinTime, dateIsAfter, normalizeMaxTime, getDaysOfMonth, getDateWeight, dateIsEqualsWeight, dateIsBetween, assignDayInDate, Month, MONTH_NAMES, DAY_LABELS, DateRange, dateFormatTemplate, assignYearInDate, assignMonthInDate } from '@rolster/helpers-date';
 import { hasPattern } from '@rolster/helpers-string';
-import { i18n } from '@rolster/i18n';
+import { dateIsBefore, normalizeMinTime, dateIsAfter, normalizeMaxTime, getDaysOfMonth, getDateWeight, dateIsEqualsWeight, dateIsBetween, assignDayInDate, Month, MONTH_NAMES, DAY_LABELS, DateRange, dateFormatTemplate, assignYearInDate, assignMonthInDate } from '@rolster/helpers-date';
 import ReactDOM from 'react-dom';
+import { i18n } from '@rolster/i18n';
 import { createFormControlProps } from '@rolster/helpers-forms';
 import 'uuid';
 import { BehaviorSubject } from 'rxjs';
@@ -73,14 +73,7 @@ function RlsCheckBoxControl({ formControl, disabled, rlsTheme }) {
 function RlsInput({ children, disabled, formControl, placeholder, type, value, onValue }) {
     const [focused, setFocused] = 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);
@@ -254,7 +247,47 @@ function RlsButtonToggle({ onAction, options, type, automatic, disabled, rlsThem
                 }), children: jsx("ul", { children: options.map((action, index) => (jsx("li", { className: "truncate", onClick: () => onSelectAction(action), children: action.label }, index))) }) })] }));
 }
 
-function RlsCheckBoxLabel({ children, disabled, extended, formControl, rlsTheme }) {
+function RlsMessageFormError({ className, formControl }) {
+    return (jsx(Fragment, { children: formControl?.wrong && (jsx("div", { className: className, children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl?.error?.message }) })) }));
+}
+
+function RlsFieldMoney({ children, decimals, disabled, formControl, placeholder, symbol, rlsTheme, value, onValue }) {
+    return (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 && jsx("label", { className: "rls-field-box__label", children: children }), jsx("div", { className: "rls-field-box__component", children: jsx("div", { className: "rls-field-box__body", children: jsx(RlsInputMoney, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, symbol: symbol, decimals: decimals, onValue: onValue }) }) }), jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })] }));
+}
+
+function RlsFieldNumber({ children, disabled, formControl, placeholder, rlsTheme, value, onValue }) {
+    return (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 && jsx("label", { className: "rls-field-box__label", children: children }), jsx("div", { className: "rls-field-box__component", children: jsx("div", { className: "rls-field-box__body", children: jsx(RlsInputNumber, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })] }));
+}
+
+function RlsFieldPassword({ children, disabled, formControl, placeholder, rlsTheme }) {
+    const [password, setPassword] = useState(true);
+    function onToggleInput() {
+        setPassword(!password);
+    }
+    return (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 && jsx("label", { className: "rls-field-box__label", children: children }), jsx("div", { className: "rls-field-box__component", children: jsxs("div", { className: "rls-field-box__body", children: [jsx(RlsInputPassword, { formControl: formControl, disabled: disabled, placeholder: placeholder, type: password ? 'password' : 'text' }), jsx(RlsButtonAction, { icon: password ? 'eye' : 'eye-off', onClick: onToggleInput })] }) }), jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })] }));
+}
+
+function RlsFieldText({ children, disabled, formControl, placeholder, rlsTheme, value, onValue }) {
+    return (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 && jsx("label", { className: "rls-field-box__label", children: children }), jsx("div", { className: "rls-field-box__component", children: jsx("div", { className: "rls-field-box__body", children: jsx(RlsInputText, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })] }));
+}
+
+function RlsLabelCheckBox({ children, disabled, extended, formControl, rlsTheme }) {
     const [checked, setChecked] = useState(formControl?.value || false);
     useEffect(() => {
         setChecked(formControl?.state || false);
@@ -267,946 +300,906 @@ function RlsCheckBoxLabel({ children, disabled, extended, formControl, rlsTheme
             setChecked(!checked);
         }
     }
-    return (jsxs("div", { className: renderClassStatus('rls-checkbox-label', {
+    return (jsxs("div", { className: renderClassStatus('rls-label-checkbox', {
             disabled,
             extended
-        }), "rls-theme": rlsTheme, children: [jsx("div", { className: "rls-checkbox-label__component", onClick: onToggle, children: jsx(RlsCheckBox, { checked: checked, disabled: disabled }) }), jsx("label", { className: "rls-checkbox-label__text", children: children })] }));
-}
-
-function dateIsOutRangeMin(props) {
-    const { date, minDate } = props;
-    return !!minDate && dateIsBefore(normalizeMinTime(minDate), date);
-}
-function dateIsOutRangeMax(props) {
-    const { date, maxDate } = props;
-    return !!maxDate && dateIsAfter(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;
+        }), "rls-theme": rlsTheme, children: [jsx("div", { className: "rls-label-checkbox__component", onClick: onToggle, children: jsx(RlsCheckBox, { checked: checked, disabled: disabled }) }), jsx("label", { className: "rls-label-checkbox__text", children: children })] }));
 }
 
-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 && dateIsEqualsWeight(date, dateValue),
-        today: !!dateValue && 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 = 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
-        ? getDateWeight(new Date(year, month, day)) < getDateWeight(minDate)
-        : false;
-}
-function dayIsOutsideMax(props, day) {
-    const { month, year, maxDate } = props;
-    return maxDate
-        ? getDateWeight(new Date(year, month, day)) > 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] = useState(formControl?.state || false);
+    useEffect(() => {
+        setChecked(formControl?.state === value);
+    }, [formControl?.state]);
+    function onSelect() {
+        if (formControl) {
+            formControl?.setState(value);
+        }
+    }
+    return (jsxs("div", { className: renderClassStatus('rls-label-radiobutton', {
+            disabled,
+            extended
+        }), "rls-theme": rlsTheme, children: [jsx("div", { className: "rls-label-radiobutton__component", onClick: onSelect, children: jsx(RlsRadioButton, { checked: checked, disabled: disabled }) }), 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 dateIsBetween(range.minDate, range.maxDate, 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 = 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
-        ? getDateWeight(assignDayInDate(date, day)) < getDateWeight(minDate)
-        : false;
-}
-function dayRangeIsOutsideMax(props, day) {
-    const { date, maxDate } = props;
-    return maxDate
-        ? getDateWeight(assignDayInDate(date, day)) > 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] = useState(formControl?.value || false);
+    useEffect(() => {
+        setChecked(formControl?.state || false);
+    }, [formControl?.state]);
+    function onToggle() {
+        if (formControl) {
+            formControl?.setState(!formControl.state);
+        }
+        else {
+            setChecked(!checked);
+        }
+    }
+    return (jsxs("div", { className: renderClassStatus('rls-label-switch', { disabled, extended }), "rls-theme": rlsTheme, children: [jsx("div", { className: "rls-label-switch__component", onClick: onToggle, children: jsx(RlsSwitch, { checked: checked, disabled: disabled }) }), 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,
-        label: MONTH_NAMES()[value],
-        selected: date.getFullYear() === year && value === date.getMonth(),
+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] = useState([]);
+    const [index, setIndex] = useState(0);
+    const [maxPage, setMaxPage] = useState(calculateMaxPage(elements, count));
+    const [paginations, setPaginations] = useState([]);
+    const [currentPagination, setCurrentPagination] = useState();
+    const [description, setDescription] = useState('');
+    const [firstPage, setFirstPage] = useState(true);
+    const [lastPage, setLastPage] = useState(false);
+    useEffect(() => {
+        refreshFromElements(elements);
+    }, [elements]);
+    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]);
+    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) => 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 (jsxs("div", { className: "rls-pagination", children: [jsxs("div", { className: "rls-pagination__actions", children: [jsx("button", { className: "rls-pagination__action", onClick: goFirstPagination, disabled: firstPage, children: jsx(RlsIcon, { value: "arrowhead-left" }) }), jsx("button", { className: "rls-pagination__action", onClick: goPreviousPagination, disabled: firstPage, children: jsx(RlsIcon, { value: "arrow-ios-left" }) })] }), jsx("div", { className: "rls-pagination__pages", children: paginations.map((page, index) => {
+                    return (jsx("div", { className: renderClassStatus('rls-pagination__page', {
+                            active: page.active
+                        }), onClick: () => {
+                            goPagination(page);
+                        }, children: page.label }, index));
+                }) }), jsx("div", { className: "rls-pagination__description", children: description }), jsxs("div", { className: "rls-pagination__actions", children: [jsx("button", { className: "rls-pagination__action", onClick: goNextPagination, disabled: lastPage, children: jsx(RlsIcon, { value: "arrow-ios-right" }) }), jsx("button", { className: "rls-pagination__action", onClick: goLastPagination, disabled: lastPage, children: jsx(RlsIcon, { value: "arrowhead-right" }) })] })] }));
+}
+
+function dateIsOutRangeMin(props) {
+    const { date, minDate } = props;
+    return !!minDate && dateIsBefore(normalizeMinTime(minDate), date);
+}
+function dateIsOutRangeMax(props) {
+    const { date, maxDate } = props;
+    return !!maxDate && dateIsAfter(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 && dateIsEqualsWeight(date, dateValue),
+        today: !!dateValue && dateIsEqualsWeight(today, dateValue),
         value
     };
 }
-function monthIsOutsideMin(props, month) {
-    const { year, minDate } = props;
+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 = 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
-        ? minDate.getFullYear() === year && month < minDate.getMonth()
+        ? getDateWeight(new Date(year, month, day)) < getDateWeight(minDate)
         : false;
 }
-function monthIsOutsideMax(props, month) {
-    const { year, maxDate } = props;
+function dayIsOutsideMax(props, day) {
+    const { month, year, maxDate } = props;
     return maxDate
-        ? maxDate.getFullYear() === year && month > maxDate.getMonth()
+        ? getDateWeight(new Date(year, month, day)) > getDateWeight(maxDate)
         : false;
 }
-function monthIsOutside(props, month) {
-    return monthIsOutsideMin(props, month) || monthIsOutsideMax(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, Month.January),
-        createMonthState(props, Month.February),
-        createMonthState(props, Month.March),
-        createMonthState(props, Month.April),
-        createMonthState(props, Month.May),
-        createMonthState(props, Month.June),
-        createMonthState(props, Month.July),
-        createMonthState(props, Month.August),
-        createMonthState(props, Month.September),
-        createMonthState(props, Month.October),
-        createMonthState(props, Month.November),
-        createMonthState(props, Month.December)
-    ];
-}
-function monthIsLimitMin(props) {
-    const { month, date, minDate } = props;
-    if (itIsDefined(month) && date) {
-        const minYear = minDate ? minDate.getFullYear() : 0;
-        const minMonth = minDate ? minDate.getMonth() : 0;
-        return date.getFullYear() === minYear && month <= minMonth;
-    }
-    return false;
+function dayIsOutside(props, day) {
+    return dayIsOutsideMin(props, day) || dayIsOutsideMax(props, day);
 }
-function monthIsLimitMax(props) {
-    const { month, date, maxDate } = props;
-    if (itIsDefined(month) && date) {
-        const maxYear = maxDate ? maxDate.getFullYear() : 10000;
-        const maxMonth = maxDate ? maxDate.getMonth() : 11;
-        return date.getFullYear() === maxYear && month >= maxMonth;
-    }
-    return false;
+function checkDayPicker(props) {
+    const { day, maxDate, minDate } = props;
+    return minDate && dayIsOutsideMin(props, day)
+        ? minDate.getDate()
+        : maxDate && dayIsOutsideMax(props, day)
+            ? maxDate.getDate()
+            : undefined;
 }
-function monthLimitTemplate(props) {
-    return {
-        limitNext: monthIsLimitMax(props),
-        limitPrevious: monthIsLimitMin(props)
-    };
+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];
 }
 
-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 dateIsSelected(base, date, day) {
+    return (date.getFullYear() === base.getFullYear() &&
+        date.getMonth() === base.getMonth() &&
+        day === date.getDate());
 }
-function yearIsOutlineMin(props) {
-    const { year, minDate } = props;
-    return minDate ? year < minDate.getFullYear() : false;
+function sourceIsSelected({ sourceDate }, base, day) {
+    return dateIsSelected(base, sourceDate, day);
 }
-function yearIsOutlineMax(props) {
-    const { year, maxDate } = props;
-    return maxDate ? year > maxDate.getFullYear() : false;
+function rangeIsSelected({ range }, base, day) {
+    return (dateIsSelected(base, range.minDate, day) ||
+        dateIsSelected(base, range.maxDate, day));
 }
-function checkYearPicker(props) {
-    const { maxDate, minDate } = props;
-    return minDate && yearIsOutlineMin(props)
-        ? minDate.getFullYear()
-        : maxDate && yearIsOutlineMax(props)
-            ? maxDate.getFullYear()
-            : undefined;
+function dayIsRange({ range }, base, day) {
+    return dateIsBetween(range.minDate, range.maxDate, assignDayInDate(base, day));
 }
-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() {
+function createDayRangeState(props, base, day) {
     return {
-        coincidences: undefined,
-        pattern: '',
-        previous: null
+        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 searchForPattern(props) {
-    const { pattern, store } = props;
-    if (!store?.pattern) {
-        return null;
+function createFirstWeek(props, base) {
+    const days = [];
+    let day = 1;
+    for (let start = 0; start < base.getDay(); start++) {
+        days.push(createDayRangeState(props, base));
     }
-    let newStore = store;
-    let search = false;
-    while (!search && newStore) {
-        search = hasPattern(pattern || '', newStore.pattern, true);
-        if (!search) {
-            newStore = newStore.previous;
-        }
+    for (let end = base.getDay(); end < 7; end++) {
+        days.push(createDayRangeState(props, base, day));
+        day++;
     }
-    return newStore || createEmptyStore();
+    return { days };
 }
-function createStoreAutocomplete(props) {
-    const { pattern, suggestions, reboot } = props;
-    if (!pattern) {
-        return { collection: suggestions, store: createEmptyStore() };
+function createDaysPending(props, base, days) {
+    const daysPending = [];
+    const length = 7 - days;
+    for (let index = 0; index < length; index++) {
+        daysPending.push(createDayRangeState(props, base));
     }
-    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
+    return daysPending;
+}
+function createNextWeeks(props, base) {
+    const weeks = [];
+    const { date } = props;
+    const dayCount = 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
+        ? getDateWeight(assignDayInDate(date, day)) < getDateWeight(minDate)
+        : false;
+}
+function dayRangeIsOutsideMax(props, day) {
+    const { date, maxDate } = props;
+    return maxDate
+        ? getDateWeight(assignDayInDate(date, day)) > 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];
 }
 
-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 createMonthState(props, value) {
+    const { date, month, year } = props;
+    return {
+        disabled: monthIsOutside(props, value),
+        focused: value === month,
+        label: MONTH_NAMES()[value],
+        selected: date.getFullYear() === year && value === date.getMonth(),
+        value
+    };
 }
-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 monthIsOutsideMin(props, month) {
+    const { year, minDate } = props;
+    return minDate
+        ? minDate.getFullYear() === year && month < minDate.getMonth()
+        : false;
 }
-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 monthIsOutsideMax(props, month) {
+    const { year, maxDate } = props;
+    return maxDate
+        ? maxDate.getFullYear() === year && month > maxDate.getMonth()
+        : false;
 }
-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 monthIsOutside(props, month) {
+    return monthIsOutsideMin(props, month) || monthIsOutsideMax(props, month);
 }
-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 checkMonthPicker(props) {
+    const { maxDate, minDate, month } = props;
+    return minDate && monthIsOutsideMin(props, month)
+        ? minDate.getMonth()
+        : maxDate && monthIsOutsideMax(props, month)
+            ? maxDate.getMonth()
+            : undefined;
 }
-function listNavigationInput(props) {
-    switch (props.event.code) {
-        case 'ArrowDown':
-            return navigationInputDown(props);
-        case 'ArrowUp':
-            return navigationInputUp(props);
-        default:
-            return undefined;
-    }
+function createMonthPicker(props) {
+    return [
+        createMonthState(props, Month.January),
+        createMonthState(props, Month.February),
+        createMonthState(props, Month.March),
+        createMonthState(props, Month.April),
+        createMonthState(props, Month.May),
+        createMonthState(props, Month.June),
+        createMonthState(props, Month.July),
+        createMonthState(props, Month.August),
+        createMonthState(props, Month.September),
+        createMonthState(props, Month.October),
+        createMonthState(props, Month.November),
+        createMonthState(props, Month.December)
+    ];
 }
-function 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;
+function monthIsLimitMin(props) {
+    const { month, date, minDate } = props;
+    if (itIsDefined(month) && date) {
+        const minYear = minDate ? minDate.getFullYear() : 0;
+        const minMonth = minDate ? minDate.getMonth() : 0;
+        return date.getFullYear() === minYear && month <= minMonth;
     }
-    find(element) {
-        return this.value.find((current) => current.compareTo(element));
+    return false;
+}
+function monthIsLimitMax(props) {
+    const { month, date, maxDate } = props;
+    if (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] = useState([]);
-    const [value, setValue] = useState(formControl?.state || currentDate.getDate());
-    useEffect(() => {
-        const props = createPickerProps();
-        const day = checkDayPicker(props);
-        day ? setDayValue(day) : setWeeks(createDayPicker(props));
-    }, [date, month, year, value, minDate, maxDate]);
-    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: 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 (jsxs("div", { className: "rls-day-picker", "rls-theme": rlsTheme, children: [jsx("div", { className: "rls-day-picker__header", children: DAY_LABELS().map((title, index) => (jsx("label", { className: "rls-day-picker__label", children: title }, index))) }), jsx("div", { className: "rls-day-picker__component", children: weeks.map(({ days }, index) => (jsx("div", { className: "rls-day-picker__week", children: days.map(({ value, disabled, focused, forbidden, selected, today }, index) => (jsx("div", { className: renderClassStatus('rls-day-picker__day', {
-                            disabled: disabled || disabledPicker,
-                            focused,
-                            forbidden,
-                            selected,
-                            today
-                        }), onClick: value && !disabledPicker ? () => onChange(value) : undefined, children: 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 || DateRange.now();
-    const currentDate = normalizeMinTime(date || currentRange.minDate);
-    const sourceDate = useRef(currentRange.minDate);
-    const [weeks, setWeeks] = useState([]);
-    const [range, setRange] = useState(currentRange);
-    useEffect(() => {
-        setWeeks(createDayRangePicker({
-            date: currentDate,
-            range,
-            sourceDate: sourceDate.current,
-            minDate,
-            maxDate
-        }));
-    }, [range, date, minDate, maxDate]);
-    function onChange(value) {
-        const date = assignDayInDate(currentDate, value);
-        const range = dateIsBefore(date, sourceDate.current)
-            ? new DateRange(sourceDate.current, date)
-            : new DateRange(date, sourceDate.current);
-        sourceDate.current = date;
-        setRange(range);
-        formControl?.setState(range);
-    }
-    return (jsxs("div", { className: "rls-day-range-picker", "rls-theme": rlsTheme, children: [jsx("div", { className: "rls-day-range-picker__title", children: dateFormatTemplate(sourceDate.current, DATE_RANGE_FORMAT) }), jsx("div", { className: "rls-day-range-picker__header", children: DAY_LABELS().map((title, index) => (jsx("label", { className: "rls-day-range-picker__label", children: title }, index))) }), jsx("div", { className: "rls-day-range-picker__component", children: weeks.map(({ days }, index) => (jsx("div", { className: "rls-day-range-picker__week", children: days.map(({ disabled, end, forbidden, source, ranged, value }, index) => (jsx("div", { className: renderClassStatus('rls-day-range-picker__day', {
-                            disabled: disabled || disabledPicker,
-                            end,
-                            forbidden,
-                            ranged,
-                            source
-                        }), onClick: value && !disabledPicker ? () => onChange(value) : undefined, children: 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 (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 && jsx("label", { className: "rls-box-field__label", children: children }), jsx("div", { className: "rls-box-field__component", children: jsx("div", { className: "rls-box-field__body", children: jsx(RlsInputMoney, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, symbol: symbol, decimals: decimals, onValue: onValue }) }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-box-field__error", children: 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] = useState([]);
-    const [value, setValue] = useState(formControl?.state || currentDate.getMonth());
-    useEffect(() => {
-        const props = createPickerProps(); // MonthPickerProps
-        const month = checkMonthPicker(props);
-        month ? setMonthValue(month) : setMonths(createMonthPicker(props));
-    }, [date, year, value, minDate, maxDate]);
-    useEffect(() => {
-        const month = checkMonthPicker(createPickerProps());
-        itIsDefined(month)
-            ? formControl?.setState(month)
-            : setValue(formControl?.state || currentDate.getMonth());
-    }, [formControl?.state]);
-    function createPickerProps() {
-        return {
-            date: currentDate,
-            month: 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 (jsx("div", { className: "rls-month-picker", "rls-theme": rlsTheme, children: months.map(({ label, value, disabled, focused, selected }, index) => (jsx("div", { className: renderClassStatus('rls-month-picker__component', {
-                disabled: disabled || disabledPicker,
-                focused,
-                selected
-            }), onClick: !(disabled || disabledPicker) ? () => onChange(value) : undefined, children: jsx("span", { className: "rls-month-picker__span", children: label }) }, index))) }));
-}
-
-function RlsMonthTitlePicker({ monthControl, type, yearControl, date, disabled, maxDate, minDate, onClick }) {
-    const { limitNext, limitPrevious } = monthLimitTemplate({
-        date,
-        maxDate,
-        minDate,
-        month: monthControl.state
-    });
-    const monthName = MONTH_NAMES()[monthControl.state || 0];
-    function onPreviousMonth() {
-        if (itIsDefined(monthControl.state) && itIsDefined(yearControl.state)) {
-            if (monthControl.state > Month.January) {
-                monthControl.setState(monthControl.state - 1);
-            }
-            else {
-                monthControl.setState(Month.December);
-                yearControl.setState(yearControl.state - 1);
-            }
-        }
-    }
-    function onPreviousYear() {
-        if (itIsDefined(yearControl.state)) {
-            yearControl.setState(yearControl.state - 1);
-        }
-    }
-    function onPrevious() {
-        type === 'month' ? onPreviousMonth() : onPreviousYear();
-    }
-    function onNextMonth() {
-        if (itIsDefined(monthControl.state) && itIsDefined(yearControl.state)) {
-            if (monthControl.state < Month.December) {
-                monthControl.setState(monthControl.state + 1);
-            }
-            else {
-                monthControl.setState(Month.January);
-                yearControl.setState(yearControl.state + 1);
-            }
-        }
-    }
-    function onNextYear() {
-        if (itIsDefined(yearControl.state)) {
-            yearControl.setState(yearControl.state + 1);
-        }
-    }
-    function onNext() {
-        type === 'month' ? onNextMonth() : onNextYear();
-    }
-    return (jsxs("div", { className: "rls-month-title-picker", children: [jsx(RlsButtonAction, { icon: "arrow-ios-left", onClick: onPrevious, disabled: limitPrevious || disabled }), jsx("span", { onClick: onClick, children: monthName }), jsx(RlsButtonAction, { icon: "arrow-ios-right", onClick: onNext, disabled: limitNext || disabled })] }));
-}
-
-function RlsNumberField({ children, disabled, formControl, placeholder, rlsTheme, value, onValue }) {
-    return (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 && jsx("label", { className: "rls-box-field__label", children: children }), jsx("div", { className: "rls-box-field__component", children: jsx("div", { className: "rls-box-field__body", children: jsx(RlsInputNumber, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-box-field__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }));
+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]
+    };
 }
 
-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] = useState([]);
-    const [index, setIndex] = useState(0);
-    const [maxPage, setMaxPage] = useState(calculateMaxPage(elements, count));
-    const [paginations, setPaginations] = useState([]);
-    const [currentPagination, setCurrentPagination] = useState();
-    const [description, setDescription] = useState('');
-    const [firstPage, setFirstPage] = useState(true);
-    const [lastPage, setLastPage] = useState(false);
-    useEffect(() => {
-        refreshFromElements(elements);
-    }, [elements]);
-    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]);
-    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) => 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) {
+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 = 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;
+}
+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] = useState([]);
+    const [value, setValue] = useState(formControl?.state || currentDate.getDate());
+    useEffect(() => {
+        const props = createPickerProps();
+        const day = checkDayPicker(props);
+        day ? setDayValue(day) : setWeeks(createDayPicker(props));
+    }, [date, month, year, value, minDate, maxDate]);
+    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: 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 (jsxs("div", { className: "rls-pagination", children: [jsxs("div", { className: "rls-pagination__actions", children: [jsx("button", { className: "rls-pagination__action", onClick: goFirstPagination, disabled: firstPage, children: jsx(RlsIcon, { value: "arrowhead-left" }) }), jsx("button", { className: "rls-pagination__action", onClick: goPreviousPagination, disabled: firstPage, children: jsx(RlsIcon, { value: "arrow-ios-left" }) })] }), jsx("div", { className: "rls-pagination__pages", children: paginations.map((page, index) => {
-                    return (jsx("div", { className: renderClassStatus('rls-pagination__page', {
-                            active: page.active
-                        }), onClick: () => {
-                            goPagination(page);
-                        }, children: page.label }, index));
-                }) }), jsx("div", { className: "rls-pagination__description", children: description }), jsxs("div", { className: "rls-pagination__actions", children: [jsx("button", { className: "rls-pagination__action", onClick: goNextPagination, disabled: lastPage, children: jsx(RlsIcon, { value: "arrow-ios-right" }) }), jsx("button", { className: "rls-pagination__action", onClick: goLastPagination, disabled: lastPage, children: jsx(RlsIcon, { value: "arrowhead-right" }) })] })] }));
+    return (jsxs("div", { className: "rls-picker-day", "rls-theme": rlsTheme, children: [jsx("div", { className: "rls-picker-day__header", children: DAY_LABELS().map((title, index) => (jsx("label", { className: "rls-picker-day__label", children: title }, index))) }), jsx("div", { className: "rls-picker-day__component", children: weeks.map(({ days }, index) => (jsx("div", { className: "rls-picker-day__week", children: days.map(({ value, disabled, focused, forbidden, selected, today }, index) => (jsx("div", { className: renderClassStatus('rls-picker-day__element', {
+                            disabled: disabled || disabledPicker,
+                            focused,
+                            forbidden,
+                            selected,
+                            today
+                        }), onClick: value && !disabledPicker ? () => onChange(value) : undefined, children: jsx("span", { className: "rls-picker-day__element__span", children: value || '??' }) }, index))) }, index))) })] }));
 }
 
-function RlsPasswordField({ children, disabled, formControl, placeholder, rlsTheme }) {
-    const [password, setPassword] = 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 || DateRange.now();
+    const currentDate = normalizeMinTime(date || currentRange.minDate);
+    const sourceDate = useRef(currentRange.minDate);
+    const [weeks, setWeeks] = useState([]);
+    const [range, setRange] = useState(currentRange);
+    useEffect(() => {
+        setWeeks(createDayRangePicker({
+            date: currentDate,
+            range,
+            sourceDate: sourceDate.current,
+            minDate,
+            maxDate
+        }));
+    }, [range, date, minDate, maxDate]);
+    function onChange(value) {
+        const date = assignDayInDate(currentDate, value);
+        const range = dateIsBefore(date, sourceDate.current)
+            ? new DateRange(sourceDate.current, date)
+            : new DateRange(date, sourceDate.current);
+        sourceDate.current = date;
+        setRange(range);
+        formControl?.setState(range);
     }
-    return (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 && jsx("label", { className: "rls-box-field__label", children: children }), jsx("div", { className: "rls-box-field__component", children: jsxs("div", { className: "rls-box-field__body", children: [jsx(RlsInputPassword, { formControl: formControl, disabled: disabled, placeholder: placeholder, type: password ? 'password' : 'text' }), jsx(RlsButtonAction, { icon: password ? 'eye' : 'eye-off', onClick: onToggleInput })] }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-box-field__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }));
+    return (jsxs("div", { className: "rls-picker-day-range", "rls-theme": rlsTheme, children: [jsx("div", { className: "rls-picker-day-range__title", children: dateFormatTemplate(sourceDate.current, DATE_RANGE_FORMAT) }), jsx("div", { className: "rls-picker-day-range__header", children: DAY_LABELS().map((title, index) => (jsx("label", { className: "rls-picker-day-range__label", children: title }, index))) }), jsx("div", { className: "rls-picker-day-range__component", children: weeks.map(({ days }, index) => (jsx("div", { className: "rls-picker-day-range__week", children: days.map(({ disabled, end, forbidden, source, ranged, value }, index) => (jsx("div", { className: renderClassStatus('rls-picker-day-range__element', {
+                            disabled: disabled || disabledPicker,
+                            end,
+                            forbidden,
+                            ranged,
+                            source
+                        }), onClick: value && !disabledPicker ? () => onChange(value) : undefined, children: jsx("span", { className: "rls-picker-day-range__element__span", children: value || '??' }) }, index))) }, index))) })] }));
 }
 
-function RlsRadioButtonLabel({ children, disabled, extended, formControl, rlsTheme, value }) {
-    const [checked, setChecked] = useState(formControl?.state || false);
+function RlsPickerMonth({ date, disabled: disabledPicker, formControl, maxDate, minDate, onValue, rlsTheme, year }) {
+    const currentDate = date || new Date();
+    const [months, setMonths] = useState([]);
+    const [value, setValue] = useState(formControl?.state || currentDate.getMonth());
     useEffect(() => {
-        setChecked(formControl?.state === value);
+        const props = createPickerProps(); // MonthPickerProps
+        const month = checkMonthPicker(props);
+        month ? setMonthValue(month) : setMonths(createMonthPicker(props));
+    }, [date, year, value, minDate, maxDate]);
+    useEffect(() => {
+        const month = checkMonthPicker(createPickerProps());
+        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: 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 (jsxs("div", { className: renderClassStatus('rls-radiobutton-label', {
-            disabled,
-            extended
-        }), "rls-theme": rlsTheme, children: [jsx("div", { className: "rls-radiobutton-label__component", onClick: onSelect, children: jsx(RlsRadioButton, { checked: checked, disabled: disabled }) }), jsx("label", { className: "rls-radiobutton-label__text", children: children })] }));
+    return (jsx("div", { className: "rls-picker-month", "rls-theme": rlsTheme, children: months.map(({ label, value, disabled, focused, selected }, index) => (jsx("div", { className: renderClassStatus('rls-picker-month__component', {
+                disabled: disabled || disabledPicker,
+                focused,
+                selected
+            }), onClick: !(disabled || disabledPicker) ? () => onChange(value) : undefined, children: jsx("span", { className: "rls-picker-month__span", children: label }) }, index))) }));
 }
 
-function RlsSwitchLabel({ children, disabled, extended, formControl, rlsTheme }) {
-    const [checked, setChecked] = useState(formControl?.value || false);
-    useEffect(() => {
-        setChecked(formControl?.state || false);
-    }, [formControl?.state]);
-    function onToggle() {
-        if (formControl) {
-            formControl?.setState(!formControl.state);
+function RlsPickerMonthTitle({ monthControl, type, yearControl, date, disabled, maxDate, minDate, onClick }) {
+    const { limitNext, limitPrevious } = monthLimitTemplate({
+        date,
+        maxDate,
+        minDate,
+        month: monthControl.state
+    });
+    const monthName = MONTH_NAMES()[monthControl.state || 0];
+    function onPreviousMonth() {
+        if (itIsDefined(monthControl.state) && itIsDefined(yearControl.state)) {
+            if (monthControl.state > Month.January) {
+                monthControl.setState(monthControl.state - 1);
+            }
+            else {
+                monthControl.setState(Month.December);
+                yearControl.setState(yearControl.state - 1);
+            }
         }
-        else {
-            setChecked(!checked);
+    }
+    function onPreviousYear() {
+        if (itIsDefined(yearControl.state)) {
+            yearControl.setState(yearControl.state - 1);
         }
     }
-    return (jsxs("div", { className: renderClassStatus('rls-switch-label', { disabled, extended }), "rls-theme": rlsTheme, children: [jsx("div", { className: "rls-switch-label__component", onClick: onToggle, children: jsx(RlsSwitch, { checked: checked, disabled: disabled }) }), jsx("label", { className: "rls-switch-label__text", children: children })] }));
-}
-
-function RlsTextField({ children, disabled, formControl, placeholder, rlsTheme, value, onValue }) {
-    return (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 && jsx("label", { className: "rls-box-field__label", children: children }), jsx("div", { className: "rls-box-field__component", children: jsx("div", { className: "rls-box-field__body", children: jsx(RlsInputText, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-box-field__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }));
-}
-
-function RlsToolbar({ actions, children, subtitle }) {
-    return (jsxs("div", { className: "rls-toolbar", children: [jsxs("div", { className: "rls-toolbar__description", children: [children && jsx("label", { className: "rls-toolbar__title", children: children }), subtitle && (jsx("label", { className: "rls-toolbar__subtitle smalltext-semibold", children: subtitle }))] }), actions && (jsx("div", { className: "rls-toolbar__actions", children: actions.map((action, index) => (jsx("div", { children: action }, index))) }))] }));
+    function onPrevious() {
+        type === 'month' ? onPreviousMonth() : onPreviousYear();
+    }
+    function onNextMonth() {
+        if (itIsDefined(monthControl.state) && itIsDefined(yearControl.state)) {
+            if (monthControl.state < Month.December) {
+                monthControl.setState(monthControl.state + 1);
+            }
+            else {
+                monthControl.setState(Month.January);
+                yearControl.setState(yearControl.state + 1);
+            }
+        }
+    }
+    function onNextYear() {
+        if (itIsDefined(yearControl.state)) {
+            yearControl.setState(yearControl.state + 1);
+        }
+    }
+    function onNext() {
+        type === 'month' ? onNextMonth() : onNextYear();
+    }
+    return (jsxs("div", { className: "rls-picker-month-title", children: [jsx(RlsButtonAction, { icon: "arrow-ios-left", onClick: onPrevious, disabled: limitPrevious || disabled }), jsx("span", { onClick: onClick, children: monthName }), 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] = useState(formControl?.state || currentDate.getFullYear());
     const [year, setYear] = useState(formControl?.state || currentDate.getFullYear());
@@ -1248,11 +1241,19 @@ function RlsYearPicker({ date, disabled: disabledPicker, formControl, maxDate, m
             onValue(value);
         }
     }
-    return (jsxs("div", { className: "rls-year-picker", "rls-theme": rlsTheme, children: [jsxs("div", { className: "rls-year-picker__header", children: [jsx("div", { className: "rls-year-picker__action rls-year-picker__action--prev", children: jsx(RlsButtonAction, { icon: "arrow-ios-left", onClick: onClickPrev, disabled: !template.canPrevious || disabledPicker }) }), jsxs("label", { className: "rls-title-bold", children: [template.minRange, " - ", template.maxRange] }), jsx("div", { className: "rls-year-picker__action rls-year-picker__action--next", children: jsx(RlsButtonAction, { icon: "arrow-ios-right", onClick: onClickNext, disabled: !template.canNext || disabledPicker }) })] }), jsx("div", { className: "rls-year-picker__component", children: template.years.map(({ value, disabled, focused, selected }, index) => (jsx("div", { className: renderClassStatus('rls-year-picker__year', {
+    return (jsxs("div", { className: "rls-picker-year", "rls-theme": rlsTheme, children: [jsxs("div", { className: "rls-picker-year__header", children: [jsx("div", { className: "rls-picker-year__action rls-picker-year__action--prev", children: jsx(RlsButtonAction, { icon: "arrow-ios-left", onClick: onClickPrev, disabled: !template.canPrevious || disabledPicker }) }), jsxs("label", { className: "rls-title-bold", children: [template.minRange, " - ", template.maxRange] }), jsx("div", { className: "rls-picker-year__action rls-picker-year__action--next", children: jsx(RlsButtonAction, { icon: "arrow-ios-right", onClick: onClickNext, disabled: !template.canNext || disabledPicker }) })] }), jsx("div", { className: "rls-picker-year__component", children: template.years.map(({ value, disabled, focused, selected }, index) => (jsx("div", { className: renderClassStatus('rls-picker-year__year', {
                         disabled: disabled || disabledPicker,
                         focused,
                         selected
-                    }), onClick: value && !disabledPicker ? () => onChange(value) : undefined, children: jsx("span", { className: "rls-year-picker__year__span rls-body1-medium", children: value || '????' }) }, index))) })] }));
+                    }), onClick: value && !disabledPicker ? () => onChange(value) : undefined, children: jsx("span", { className: "rls-picker-year__year__span rls-body1-medium", children: value || '????' }) }, index))) })] }));
+}
+
+function RlsToolbar({ actions, children, subtitle }) {
+    return (jsxs("div", { className: "rls-toolbar", children: [jsxs("div", { className: "rls-toolbar__description", children: [children && jsx("label", { className: "rls-toolbar__title", children: children }), subtitle && (jsx("label", { className: "rls-toolbar__subtitle smalltext-semibold", children: subtitle }))] }), actions && (jsx("div", { className: "rls-toolbar__actions", children: actions.map((action, index) => (jsx("div", { children: action }, index))) }))] }));
+}
+
+function RlsCard({ children, outline, rlsTheme }) {
+    return (jsx("div", { className: renderClassStatus('rls-card', { outline }), "rls-theme": rlsTheme, children: jsx("div", { className: "rls-card__content", children: children }) }));
 }
 
 const reactI18n = i18n({
@@ -1276,6 +1277,87 @@ const reactI18n = i18n({
     }
 });
 
+class ConfirmationResult extends PartialSealed {
+    static approved() {
+        return new ConfirmationResult('approved');
+    }
+    static reject() {
+        return new ConfirmationResult('reject');
+    }
+}
+function RlsConfirmation({ approved, content, reject, rlsTheme, subtitle, title, visible }) {
+    return (jsxs("div", { className: renderClassStatus('rls-confirmation', { visible }), "rls-theme": rlsTheme, children: [jsxs("div", { className: "rls-confirmation__component", children: [jsxs("div", { className: "rls-confirmation__header", children: [title && (jsx("div", { className: "rls-confirmation__header__title", children: title })), subtitle && (jsx("div", { className: "rls-confirmation__header__subtitle", children: subtitle }))] }), jsx("div", { className: "rls-confirmation__body", children: content && (jsx("div", { className: "rls-confirmation__body__content", children: content })) }), (approved || reject) && (jsx("div", { className: "rls-confirmation__footer", children: jsxs("div", { className: "rls-confirmation__footer__actions", children: [approved && (jsx(RlsButton, { type: "raised", onClick: () => {
+                                        if (approved.onClick) {
+                                            approved.onClick();
+                                        }
+                                    }, children: approved.label })), reject && (jsx(RlsButton, { type: "outline", onClick: () => {
+                                        if (reject.onClick) {
+                                            reject.onClick();
+                                        }
+                                    }, children: reject.label }))] }) }))] }), jsx("div", { className: "rls-confirmation__backdrop" })] }));
+}
+function useConfirmationService() {
+    const [config, setConfig] = useState({});
+    const [visible, setVisible] = useState(false);
+    const rlsConfirmation = ReactDOM.createPortal(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 jsx("tr", { className: "rls-datatable__header", children: children });
+}
+function RlsDatatableTitle({ children, className, control }) {
+    return (jsx("th", { className: renderClassStatus('rls-datatable__title', { control }, className).trim(), children: children }));
+}
+function RlsDatatableData({ children, className, error }) {
+    return (jsx("tr", { className: renderClassStatus('rls-datatable__data', { error }, className).trim(), children: children }));
+}
+function RlsDatatableCell({ children, className, control, overflow }) {
+    return (jsx("th", { className: renderClassStatus('rls-datatable__cell', { control, overflow }, className).trim(), children: children }));
+}
+function RlsDatatableTotals({ children, className, error }) {
+    return (jsx("div", { className: renderClassStatus('rls-datatable__totals', { error }, className).trim(), children: children }));
+}
+function RlsDatatableInfo({ children, className, control, overflow }) {
+    return (jsx("div", { className: renderClassStatus('rls-datatable__info', { control, overflow }, className).trim(), children: children }));
+}
+function RlsDatatable({ children, datatable, footer, header, rlsTheme, summary }) {
+    return (jsxs("div", { className: renderClassStatus('rls-datatable', {
+            scrolleable: datatable?.scrolleable
+        }), "rls-theme": rlsTheme, children: [jsxs("table", { children: [header && jsx("thead", { className: "rls-datatable__thead", children: header }), jsx("tbody", { ref: datatable?.bodyRef, className: "rls-datatable__tbody", children: children })] }), summary && jsx("div", { className: "rls-datatable__tsummary", children: summary }), footer && jsx("div", { className: "rls-datatable__tfooter", children: footer })] }));
+}
+
 function useDatatable() {
     const [scrolleable, setScrolleable] = useState(false);
     const bodyRef = useRef(null);
@@ -1366,7 +1448,7 @@ 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] = useState('');
     const [coincidences, setCoincidences] = useState([]);
     const currentStore = useRef({
@@ -1505,115 +1587,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 (jsxs("div", { ref: listControl.boxContentRef, className: renderClassStatus('rls-box-field', {
+    return (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 && jsx("label", { className: "rls-box-field__label", children: children }), jsx("div", { className: "rls-box-field__component", children: jsxs("div", { className: "rls-box-field__body", children: [jsx("label", { className: "rls-list-field__control", onClick: onClickControl, children: listControl.value ? (jsx("span", { className: "rls-list-field__control__description", children: listControl.value })) : (jsx("span", { className: "rls-list-field__control__placeholder", children: placeholder })) }), !hiddenIcon && listControl.value && (jsx("button", { className: "rls-list-field__action", disabled: disabled, onClick: onClickAction, children: jsx(RlsIcon, { value: "trash-2" }) }))] }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-box-field__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) })), jsxs("div", { className: renderClassStatus('rls-list-field__suggestions', {
+        }, 'rls-field-list rls-field-autocomplete'), "rls-theme": rlsTheme, children: [children && jsx("label", { className: "rls-field-box__label", children: children }), jsx("div", { className: "rls-field-box__component", children: jsxs("div", { className: "rls-field-box__body", children: [jsx("label", { className: "rls-field-list__control", onClick: onClickControl, children: listControl.value ? (jsx("span", { className: "rls-field-list__control__description", children: listControl.value })) : (jsx("span", { className: "rls-field-list__control__placeholder", children: placeholder })) }), !hiddenIcon && listControl.value && (jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: onClickAction, children: jsx(RlsIcon, { value: "trash-2" }) }))] }) }), jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }), jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
                     visible: listControl.visible,
                     hide: !listControl.visible,
                     higher: listControl.higher
-                }), children: [jsx("div", { className: "rls-list-field__suggestions__body", children: jsxs("ul", { ref: listControl.listRef, className: "rls-list-field__ul", children: [jsxs("div", { className: "rls-list-field__ul__search", children: [jsx("input", { ref: listControl.inputRef, className: "rls-list-field__ul__control", type: "text", placeholder: reactI18n('listInputPlaceholder'), value: pattern, onChange: ({ target: { value } }) => {
+                }), children: [jsx("div", { className: "rls-field-list__suggestions__body", children: jsxs("ul", { ref: listControl.listRef, className: "rls-field-list__ul", children: [jsxs("div", { className: "rls-field-list__ul__search", children: [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 && (jsx("button", { disabled: disabled || searching, onClick: () => {
                                                 onSearch(pattern);
-                                            }, children: jsx(RlsIcon, { value: "search" }) }))] }), searching && jsx(RlsProgressBar, { indeterminate: true }), coincidences.map((element, index) => (jsx("li", { className: "rls-list-field__element", tabIndex: -1, onClick: onClickElement(element), onKeyDown: onKeydownElement(element), children: render(element) }, index))), !coincidences.length && (jsx("li", { className: "rls-list-field__empty", children: jsxs("div", { className: "rls-list-field__empty__description", children: [jsx("label", { className: "rls-label-bold truncate", children: reactI18n('listEmptyTitle') }), jsx("p", { className: "rls-caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), jsx("div", { className: "rls-list-field__backdrop", onClick: onClickBackdrop })] })] }));
-}
-function RlsAutocompleteField(props) {
-    return (jsx(RlsAutocompleteFieldTemplate, { ...props, render: (element) => (jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title })) }));
-}
-
-function RlsCard({ children, outline, rlsTheme }) {
-    return (jsx("div", { className: renderClassStatus('rls-card', { outline }), "rls-theme": rlsTheme, children: jsx("div", { className: "rls-card__content", children: children }) }));
-}
-
-class ConfirmationResult extends PartialSealed {
-    static approved() {
-        return new ConfirmationResult('approved');
-    }
-    static reject() {
-        return new ConfirmationResult('reject');
-    }
-}
-function RlsConfirmation({ approved, content, reject, rlsTheme, subtitle, title, visible }) {
-    return (jsxs("div", { className: renderClassStatus('rls-confirmation', { visible }), "rls-theme": rlsTheme, children: [jsxs("div", { className: "rls-confirmation__component", children: [jsxs("div", { className: "rls-confirmation__header", children: [title && (jsx("div", { className: "rls-confirmation__header__title", children: title })), subtitle && (jsx("div", { className: "rls-confirmation__header__subtitle", children: subtitle }))] }), jsx("div", { className: "rls-confirmation__body", children: content && (jsx("div", { className: "rls-confirmation__body__content", children: content })) }), (approved || reject) && (jsx("div", { className: "rls-confirmation__footer", children: jsxs("div", { className: "rls-confirmation__footer__actions", children: [approved && (jsx(RlsButton, { type: "raised", onClick: () => {
-                                        if (approved.onClick) {
-                                            approved.onClick();
-                                        }
-                                    }, children: approved.label })), reject && (jsx(RlsButton, { type: "outline", onClick: () => {
-                                        if (reject.onClick) {
-                                            reject.onClick();
-                                        }
-                                    }, children: reject.label }))] }) }))] }), jsx("div", { className: "rls-confirmation__backdrop" })] }));
-}
-function useConfirmationService() {
-    const [config, setConfig] = useState({});
-    const [visible, setVisible] = useState(false);
-    const rlsConfirmation = ReactDOM.createPortal(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 jsx("tr", { className: "rls-datatable__header", children: children });
-}
-function RlsDatatableTitle({ children, className, control }) {
-    return (jsx("th", { className: renderClassStatus('rls-datatable__title', { control }, className).trim(), children: children }));
+                                            }, children: jsx(RlsIcon, { value: "search" }) }))] }), searching && jsx(RlsProgressBar, { indeterminate: true }), coincidences.map((element, index) => (jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: onClickElement(element), onKeyDown: onKeydownElement(element), children: render(element) }, index))), !coincidences.length && (jsx("li", { className: "rls-field-list__empty", children: jsxs("div", { className: "rls-field-list__empty__description", children: [jsx("label", { className: "rls-label-bold truncate", children: reactI18n('listEmptyTitle') }), jsx("p", { className: "rls-caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), jsx("div", { className: "rls-field-list__backdrop", onClick: onClickBackdrop })] })] }));
 }
-function RlsDatatableData({ children, className, error }) {
-    return (jsx("tr", { className: renderClassStatus('rls-datatable__data', { error }, className).trim(), children: children }));
-}
-function RlsDatatableCell({ children, className, control, overflow }) {
-    return (jsx("th", { className: renderClassStatus('rls-datatable__cell', { control, overflow }, className).trim(), children: children }));
-}
-function RlsDatatableTotals({ children, className, error }) {
-    return (jsx("div", { className: renderClassStatus('rls-datatable__totals', { error }, className).trim(), children: children }));
-}
-function RlsDatatableInfo({ children, className, control, overflow }) {
-    return (jsx("div", { className: renderClassStatus('rls-datatable__info', { control, overflow }, className).trim(), children: children }));
-}
-function RlsDatatable({ children, datatable, footer, header, rlsTheme, summary }) {
-    return (jsxs("div", { className: renderClassStatus('rls-datatable', {
-            scrolleable: datatable?.scrolleable
-        }), "rls-theme": rlsTheme, children: [jsxs("table", { children: [header && jsx("thead", { className: "rls-datatable__thead", children: header }), jsx("tbody", { ref: datatable?.bodyRef, className: "rls-datatable__tbody", children: children })] }), summary && jsx("div", { className: "rls-datatable__tsummary", children: summary }), footer && jsx("div", { className: "rls-datatable__tfooter", children: footer })] }));
+function RlsFieldAutocomplete(props) {
+    return (jsx(RlsFieldAutocompleteTemplate, { ...props, render: (element) => (jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title })) }));
 }
 
 function rangeFormatTemplate({ maxDate, minDate }) {
@@ -1622,6 +1619,10 @@ function rangeFormatTemplate({ maxDate, minDate }) {
     return `${minFormat} - ${maxFormat}`;
 }
 
+function RlsModal({ children, visible, rlsTheme }) {
+    return ReactDOM.createPortal(jsxs("div", { className: renderClassStatus('rls-modal', { visible }), "rls-theme": rlsTheme, children: [jsx("div", { className: "rls-modal__component", children: children }), jsx("div", { className: "rls-modal__backdrop" })] }), document.body);
+}
+
 const controlIsValid = (props) => {
     const { state, validators } = props;
     return validators.reduce((errors, validator) => {
@@ -1719,7 +1720,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());
@@ -1780,18 +1781,14 @@ function RlsDatePicker({ automatic, date, disabled, formControl, maxDate, minDat
             onListener({ type: PickerListenerType.Select, value });
         }
     }
-    return (jsxs("div", { className: "rls-date-picker", "rls-theme": rlsTheme, children: [jsxs("div", { className: "rls-date-picker__header", children: [jsx("div", { className: "rls-date-picker__title rls-date-picker__title--description", children: jsx("span", { onClick: onVisibilityDay, children: dateFormatTemplate(dateInitial, FORMAT_DESCRIPTION) }) }), jsx("div", { className: "rls-date-picker__title rls-date-picker__title--year", children: jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), jsx(RlsMonthTitlePicker, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityMonth })] }), jsxs("div", { className: renderClassStatus('rls-date-picker__component', {
+    return (jsxs("div", { className: "rls-picker-date", "rls-theme": rlsTheme, children: [jsxs("div", { className: "rls-picker-date__header", children: [jsx("div", { className: "rls-picker-date__title rls-picker-date__title--description", children: jsx("span", { onClick: onVisibilityDay, children: dateFormatTemplate(dateInitial, FORMAT_DESCRIPTION) }) }), jsx("div", { className: "rls-picker-date__title rls-picker-date__title--year", children: jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), jsx(RlsPickerMonthTitle, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityMonth })] }), jsxs("div", { className: renderClassStatus('rls-picker-date__component', {
                     day: visibility === 'DAY',
                     month: visibility === 'MONTH',
                     year: visibility === 'YEAR'
-                }), children: [jsx(RlsDayPicker, { formControl: dayControl, date: dateInitial, month: monthControl.state, year: yearControl.state, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsx(RlsMonthPicker, { formControl: monthControl, date: dateInitial, year: yearControl.state, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsx(RlsYearPicker, { formControl: yearControl, date: dateInitial, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), jsx("div", { className: renderClassStatus('rls-date-picker__footer', { automatic }), children: jsxs("div", { className: "rls-date-picker__actions", children: [jsx("div", { className: "rls-date-picker__actions--cancel", children: jsx(RlsButton, { type: "ghost", onClick: onCancel, children: reactI18n('dateActionCancel') }) }), jsx("div", { className: "rls-date-picker__actions--today", children: jsx(RlsButton, { type: "ghost", onClick: onToday, disabled: dateOutRange({ date: today, maxDate, minDate }), children: reactI18n('dateActionToday') }) }), jsx("div", { className: "rls-date-picker__actions--ok", children: jsx(RlsButton, { type: "raised", onClick: onSelect, children: reactI18n('dateActionSelect') }) })] }) })] }));
-}
-
-function RlsModal({ children, visible, rlsTheme }) {
-    return ReactDOM.createPortal(jsxs("div", { className: renderClassStatus('rls-modal', { visible }), "rls-theme": rlsTheme, children: [jsx("div", { className: "rls-modal__component", children: children }), jsx("div", { className: "rls-modal__backdrop" })] }), document.body);
+                }), children: [jsx(RlsPickerDay, { formControl: dayControl, date: dateInitial, month: monthControl.state, year: yearControl.state, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsx(RlsPickerMonth, { formControl: monthControl, date: dateInitial, year: yearControl.state, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsx(RlsPickerYear, { formControl: yearControl, date: dateInitial, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), jsx("div", { className: renderClassStatus('rls-picker-date__footer', { automatic }), children: jsxs("div", { className: "rls-picker-date__actions", children: [jsx("div", { className: "rls-picker-date__actions--cancel", children: jsx(RlsButton, { type: "ghost", onClick: onCancel, children: reactI18n('dateActionCancel') }) }), jsx("div", { className: "rls-picker-date__actions--today", children: jsx(RlsButton, { type: "ghost", onClick: onToday, disabled: dateOutRange({ date: today, maxDate, minDate }), children: reactI18n('dateActionToday') }) }), jsx("div", { className: "rls-picker-date__actions--ok", children: jsx(RlsButton, { type: "raised", onClick: onSelect, children: reactI18n('dateActionSelect') }) })] }) })] }));
 }
 
-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] = useState();
     const [modalIsVisible, setModalIsVisible] = useState(false);
@@ -1827,7 +1824,7 @@ function RlsDateField({ children, date, disabled, formControl, maxDate, minDate,
             setModalIsVisible(true);
         }
     }
-    return (jsxs("div", { className: "rls-date-field", "rls-theme": rlsTheme, children: [jsxs("div", { className: renderClassStatus('rls-box-field', { disabled }), children: [children && jsx("label", { className: "rls-box-field__label", children: children }), jsx("div", { className: "rls-box-field__component", children: jsxs("div", { className: "rls-box-field__body", children: [jsx("input", { className: "rls-date-field__control", type: "text", value: value ? dateFormatTemplate(value, DATE_RANGE_FORMAT) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsx("button", { className: "rls-date-field__action", onClick: onClean, disabled: disabled, children: jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-box-field__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }), jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsx(RlsDatePicker, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value, type }) => {
+    return (jsxs("div", { className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), children: [children && jsx("label", { className: "rls-field-box__label", children: children }), jsx("div", { className: "rls-field-box__component", children: jsxs("div", { className: "rls-field-box__body", children: [jsx("input", { className: "rls-field-date__control", type: "text", value: value ? dateFormatTemplate(value, DATE_RANGE_FORMAT) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsx("button", { className: "rls-field-date__action", onClick: onClean, disabled: disabled, children: jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })] }), jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value, type }) => {
                         if (type !== PickerListenerType.Cancel) {
                             onChange(value, true);
                         }
@@ -1838,7 +1835,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 = normalizeMinTime(datePicker || new Date());
     const rangeInitial = formControl?.state || DateRange.now();
     const yearControl = useReactControl(dateInitial.getFullYear());
@@ -1887,16 +1884,16 @@ function RlsDateRangePicker({ automatic, date: datePicker, disabled, formControl
             onListener({ type: PickerListenerType.Select, value });
         }
     }
-    return (jsxs("div", { className: "rls-date-range-picker", "rls-theme": rlsTheme, children: [jsxs("div", { className: "rls-date-range-picker__header", children: [jsx("div", { className: "rls-date-range-picker__title rls-date-range-picker__title--description", children: jsx("span", { onClick: onVisibilityDay, children: rangeFormatTemplate(value) }) }), jsx("div", { className: "rls-date-range-picker__title rls-date-range-picker__title--year", children: jsx("span", { onClick: onVisibilityYear, children: yearControl.state }) }), jsx(RlsMonthTitlePicker, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: visibility === 'MONTH' ? 'year' : 'month', onClick: onVisibilityMonth })] }), jsxs("div", { className: renderClassStatus('rls-date-range-picker__component', {
+    return (jsxs("div", { className: "rls-picker-date-range", "rls-theme": rlsTheme, children: [jsxs("div", { className: "rls-picker-date-range__header", children: [jsx("div", { className: "rls-picker-date-range__title rls-picker-date-range__title--description", children: jsx("span", { onClick: onVisibilityDay, children: rangeFormatTemplate(value) }) }), jsx("div", { className: "rls-picker-date-range__title rls-picker-date-range__title--year", children: jsx("span", { onClick: onVisibilityYear, children: yearControl.state }) }), jsx(RlsPickerMonthTitle, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: visibility === 'MONTH' ? 'year' : 'month', onClick: onVisibilityMonth })] }), jsxs("div", { className: renderClassStatus('rls-picker-date-range__component', {
                     day: visibility === 'DAY',
                     month: visibility === 'MONTH',
                     year: visibility === 'YEAR'
-                }), children: [jsx(RlsDayRangePicker, { formControl: dayControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsx(RlsMonthPicker, { formControl: monthControl, year: yearControl.state, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsx(RlsYearPicker, { formControl: yearControl, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), jsx("div", { className: renderClassStatus('rls-date-range-picker__footer', {
+                }), children: [jsx(RlsPickerDayRange, { formControl: dayControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsx(RlsPickerMonth, { formControl: monthControl, year: yearControl.state, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsx(RlsPickerYear, { formControl: yearControl, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), jsx("div", { className: renderClassStatus('rls-picker-date-range__footer', {
                     automatic
-                }), children: jsxs("div", { className: "rls-date-range-picker__actions", children: [jsx("div", { className: "rls-date-range-picker__actions--cancel", children: jsx(RlsButton, { type: "ghost", onClick: onCancel, children: reactI18n('dateActionCancel') }) }), jsx("div", { className: "rls-date-range-picker__actions--ok", children: jsx(RlsButton, { type: "raised", onClick: onSelect, children: reactI18n('dateActionSelect') }) })] }) })] }));
+                }), children: jsxs("div", { className: "rls-picker-date-range__actions", children: [jsx("div", { className: "rls-picker-date-range__actions--cancel", children: jsx(RlsButton, { type: "ghost", onClick: onCancel, children: reactI18n('dateActionCancel') }) }), jsx("div", { className: "rls-picker-date-range__actions--ok", children: 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 || DateRange.now();
     const currentDate = datePicker || new Date();
     const [value, setValue] = useState(currentRange);
@@ -1913,7 +1910,7 @@ function RlsDateRangeField({ children, date: datePicker, disabled, formControl,
             setModalIsVisible(true);
         }
     }
-    return (jsxs("div", { className: "rls-date-field", "rls-theme": rlsTheme, children: [jsxs("div", { className: renderClassStatus('rls-box-field', { disabled }), children: [children && jsx("label", { className: "rls-box-field__label", children: children }), jsx("div", { className: "rls-box-field__component", children: jsxs("div", { className: "rls-box-field__body", children: [jsx("input", { className: "rls-date-field__control", type: "text", value: value ? rangeFormatTemplate(value) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsx("button", { className: "rls-date-field__action", onClick: onClickAction, disabled: disabled, children: jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) })] }), jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsx(RlsDateRangePicker, { formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value }) => {
+    return (jsxs("div", { className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), children: [children && jsx("label", { className: "rls-field-box__label", children: children }), jsx("div", { className: "rls-field-box__component", children: jsxs("div", { className: "rls-field-box__body", children: [jsx("input", { className: "rls-field-date-range__control", type: "text", value: value ? rangeFormatTemplate(value) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsx("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: disabled, children: jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })] }), jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value }) => {
                         if (value) {
                             setValue(value);
                         }
@@ -1921,11 +1918,7 @@ function RlsDateRangeField({ children, date: datePicker, disabled, formControl,
                     } }) })] }));
 }
 
-function RlsFormNavigation({ children, visible, rlsTheme }) {
-    return (jsx("div", { className: renderClassStatus('rls-form-navigation', { visible }), "rls-theme": rlsTheme, children: 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 = useRef(false);
@@ -2036,24 +2029,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 (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 && jsx("label", { className: "rls-box-field__label", children: children }), jsx("div", { className: "rls-box-field__component", children: jsxs("div", { className: "rls-box-field__body", children: [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 }), jsx("button", { className: renderClassStatus('rls-list-field__action', {
+    return (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 && jsx("label", { className: "rls-field-box__label", children: children }), jsx("div", { className: "rls-field-box__component", children: jsxs("div", { className: "rls-field-box__body", children: [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 }), jsx("button", { className: renderClassStatus('rls-field-list__action', {
                                 visible: listControl.visible
-                            }), disabled: disabled, onClick: onClickAction, children: jsx(RlsIcon, { value: "arrow-ios-down" }) })] }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-box-field__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) })), jsxs("div", { className: renderClassStatus('rls-list-field__suggestions', {
+                            }), disabled: disabled, onClick: onClickAction, children: jsx(RlsIcon, { value: "arrow-ios-down" }) })] }) }), jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }), jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
                     visible: listControl.visible,
                     hide: !listControl.visible,
                     higher: listControl.higher
-                }), children: [jsx("div", { className: "rls-list-field__suggestions__body", children: jsxs("ul", { ref: listControl.listRef, className: "rls-list-field__ul", children: [suggestions.map((element, index) => (jsx("li", { className: "rls-list-field__element", tabIndex: -1, onClick: onClickElement(element), onKeyDown: onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (jsx("li", { className: "rls-list-field__empty", children: jsxs("div", { className: "rls-list-field__empty__description", children: [jsx("label", { className: "rls-label-bold truncate", children: reactI18n('listEmptyTitle') }), jsx("p", { className: "rls-caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), jsx("div", { className: "rls-list-field__backdrop", onClick: onClickBackdrop })] })] }));
+                }), children: [jsx("div", { className: "rls-field-list__suggestions__body", children: jsxs("ul", { ref: listControl.listRef, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: onClickElement(element), onKeyDown: onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (jsx("li", { className: "rls-field-list__empty", children: jsxs("div", { className: "rls-field-list__empty__description", children: [jsx("label", { className: "rls-label-bold truncate", children: reactI18n('listEmptyTitle') }), jsx("p", { className: "rls-caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), jsx("div", { className: "rls-field-list__backdrop", onClick: onClickBackdrop })] })] }));
 }
-function RlsSelectField(props) {
-    return (jsx(RlsSelectFieldTemplate, { ...props, render: (element) => (jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title })) }));
+function RlsFieldSelect(props) {
+    return (jsx(RlsFieldSelectTemplate, { ...props, render: (element) => (jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title })) }));
+}
+
+function RlsFormNavigation({ children, visible, rlsTheme }) {
+    return (jsx("div", { className: renderClassStatus('rls-form-navigation', { visible }), "rls-theme": rlsTheme, children: jsx("div", { className: "rls-form-navigation__body", children: children }) }));
 }
 
 const DURATION_ANIMATION = 240;
@@ -2117,5 +2114,5 @@ function RlsApplication({ children }) {
     return (jsxs(RlsContext.Provider, { value: { confirmation, snackbar }, children: [jsx("div", { className: "rls-app__body", children: children }), RlsSnackbar, RlsConfirmation] }));
 }
 
-export { ConfirmationResult, RlsAmount, RlsApplication, RlsAutocompleteField, RlsAutocompleteFieldTemplate, RlsAvatar, RlsBadge, RlsBallot, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonProgress, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsCheckBoxLabel, RlsConfirmation, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableHeader, RlsDatatableInfo, RlsDatatableTitle, RlsDatatableTotals, RlsDateField, RlsDatePicker, RlsDateRangeField, RlsDateRangePicker, RlsDayPicker, RlsDayRangePicker, RlsFormNavigation, RlsIcon, RlsInput, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputText, RlsLabel, RlsMessageIcon, RlsModal, RlsMoneyField, RlsMonthPicker, RlsMonthTitlePicker, RlsNumberField, RlsPagination, RlsPasswordField, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsRadioButtonLabel, RlsSearchInput, RlsSelectField, RlsSelectFieldTemplate, RlsSkeleton, RlsSkeletonText, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsSwitchLabel, RlsTabularText, RlsTextField, RlsToolbar, RlsYearPicker, rangeFormatTemplate, renderClassStatus, useConfirmationService, useDatatable, useListControl, useSnackbarService };
+export { ConfirmationResult, RlsAmount, RlsApplication, RlsAvatar, RlsBadge, RlsBallot, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonProgress, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableHeader, RlsDatatableInfo, RlsDatatableTitle, RlsDatatableTotals, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldDate, RlsFieldDateRange, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsInput, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsPagination, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerMonthTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSearchInput, RlsSkeleton, RlsSkeletonText, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsTabularText, RlsToolbar, rangeFormatTemplate, renderClassStatus, useConfirmationService, useDatatable, useListControl, useSnackbarService };
 //# sourceMappingURL=index.js.map