@rolster/react-components 18.20.7 → 18.21.5

package/dist/cjs/index.js

@@ -2,10 +2,10 @@
 
 var require$$0 = require('react');
 var commons = require('@rolster/commons');
-var components = require('@rolster/components');
 var dates = require('@rolster/dates');
-var ReactDOM = require('react-dom');
 var i18n = require('@rolster/i18n');
+var components = require('@rolster/components');
+var ReactDOM = require('react-dom');
 var reactForms = require('@rolster/react-forms');
 
 var jsxRuntime = {exports: {}};
@@ -1363,151 +1363,16 @@ function RlsAmount({ value, decimals, rlsTheme, symbol }) {
     return (jsxRuntimeExports.jsxs("div", { className: "rls-amount", "rls-theme": rlsTheme, children: [symbol && jsxRuntimeExports.jsx("span", { children: symbol }), jsxRuntimeExports.jsx(RlsTabularText, { value: commons.currencyFormat({ value, decimals }) })] }));
 }
 
-function createObserver(options) {
-    const { setScrolleable, table } = options;
-    const observer = new ResizeObserver(() => {
-        const scrollHeight = table.scrollHeight || 0;
-        const clientHeight = table.clientHeight || 0;
-        setScrolleable(scrollHeight > clientHeight);
-    });
-    observer.observe(table);
-    return observer;
-}
-function useDatatable() {
-    const [scrolleable, setScrolleable] = require$$0.useState(false);
-    const tableRef = require$$0.useRef(null);
-    require$$0.useEffect(() => {
-        const observer = tableRef?.current &&
-            createObserver({ setScrolleable, table: tableRef?.current });
-        return () => {
-            observer?.disconnect();
-        };
-    }, []);
-    return { scrolleable, tableRef };
-}
-
-function useListController(props) {
-    const { suggestions, automatic, formControl, reference } = props;
-    const listIsOpen = require$$0.useRef(false);
-    const contentRef = require$$0.useRef(null);
-    const listRef = require$$0.useRef(null);
-    const inputRef = require$$0.useRef(null);
-    const [collection, setCollection] = require$$0.useState(new components.ListCollection(suggestions));
-    const [state, refreshState] = require$$0.useState({
-        focused: false,
-        higher: false,
-        value: '',
-        modalIsVisible: false
-    });
-    const position = require$$0.useRef(0);
-    const valueProtected = require$$0.useRef();
-    const changeValueInternal = require$$0.useRef(false);
-    require$$0.useEffect(() => {
-        function onCloseSuggestions({ target }) {
-            !contentRef?.current?.contains(target) &&
-                refreshState((state) => ({ ...state, modalIsVisible: false }));
-        }
-        document.addEventListener('click', onCloseSuggestions);
-        return () => {
-            document.removeEventListener('click', onCloseSuggestions);
-        };
-    }, []);
-    require$$0.useEffect(() => {
-        if (!listIsOpen.current && state.modalIsVisible) {
-            listIsOpen.current = true;
-        }
-        if (listIsOpen.current && !state.modalIsVisible) {
-            formControl?.touch();
-        }
-        refreshState((state) => ({
-            ...state,
-            higher: components.locationListCanTop(contentRef.current, listRef.current)
-        }));
-    }, [state.modalIsVisible]);
-    require$$0.useEffect(() => {
-        setCollection(new components.ListCollection(suggestions, reference));
-    }, [suggestions]);
-    require$$0.useEffect(() => {
-        if (!changeValueInternal.current) {
-            if (formControl?.value) {
-                const element = collection.find(formControl.value);
-                if (!element) {
-                    valueProtected.current = formControl.value;
-                    automatic
-                        ? setFormValue(collection.value[0], true)
-                        : setFormValue(undefined);
-                }
-                else {
-                    refreshState((state) => ({ ...state, value: element.description }));
-                }
-            }
-            else if (valueProtected.current) {
-                const element = collection.find(valueProtected.current);
-                element && setFormValue(element);
-            }
-            else {
-                automatic && setFormValue(collection.value[0], true);
-            }
-        }
-        changeValueInternal.current = false;
-    }, [collection, formControl?.value]);
-    const setState = require$$0.useCallback((state) => {
-        refreshState((_state) => ({ ..._state, ...state }));
-    }, []);
-    const setFormValue = require$$0.useCallback((element, initialValue = false) => {
-        refreshState((state) => ({
-            ...state,
-            value: element?.description || ''
-        }));
-        changeValueInternal.current = true;
-        initialValue
-            ? formControl?.setInitialValue(element?.value)
-            : formControl?.setValue(element?.value);
-    }, [formControl]);
-    const navigationInput = require$$0.useCallback((event) => {
-        if (state.modalIsVisible) {
-            const _position = components.navigationListFromInput({
-                content: contentRef.current,
-                event: event,
-                list: listRef.current
-            });
-            position.current = _position ?? 0;
-        }
-    }, [state.modalIsVisible]);
-    const navigationElement = require$$0.useCallback((event) => {
-        position.current = components.navigationListFromElement({
-            content: contentRef.current,
-            event: event,
-            input: inputRef.current,
-            list: listRef.current,
-            position: position.current
-        });
-    }, [state.modalIsVisible]);
-    return {
-        ...state,
-        contentRef,
-        inputRef,
-        listRef,
-        navigationElement,
-        navigationInput,
-        setFormValue,
-        setState
-    };
-}
-
 function renderClassStatus(base, status = {}, additionals) {
-    const resultClass = [base];
+    const _classElement = [base];
     Object.entries(status).forEach(([key, state]) => {
-        if (state) {
-            typeof state === 'string'
-                ? resultClass.push(`${base}--${state}`)
-                : resultClass.push(`${base}--${key}`);
-        }
+        state &&
+            (typeof state === 'string'
+                ? _classElement.push(`${base}--${state}`)
+                : _classElement.push(`${base}--${key}`));
     });
-    if (additionals) {
-        resultClass.push(additionals);
-    }
-    return resultClass.join(' ');
+    additionals && _classElement.push(additionals);
+    return _classElement.join(' ').trim();
 }
 
 const DATE_RANGE_FORMAT = '{dd}/{mx}/{aa}';
@@ -1518,34 +1383,142 @@ function rangeFormatTemplate({ maxDate, minDate }) {
     return `${minFormat} - ${maxFormat}`;
 }
 
-function useRenderClassStatus(base, status = {}, additionals) {
-    const [className, setClassName] = require$$0.useState('');
-    require$$0.useEffect(() => {
-        setClassName(renderClassStatus(base, status, additionals));
-    }, [base, Object.values(status), additionals]);
-    return className;
+const errorsDictionary = {
+    es: {
+        alphabetic: 'Campo solo permite caracteres',
+        alphanumber: 'Campo solo permite caracteres y número',
+        decimal: 'Campo debe ser número decimal',
+        defined: 'Campo debe estar definido',
+        email: 'Campo debe ser correo electrónico',
+        greaterThanValue: 'Campo debe tener un valor mayor a {thanValue}',
+        greaterOrEqualsThanValue: 'Campo debe tener un valor mayor o igual a {thanValue}',
+        lessThanValue: 'Campo debe tener un valor menor a {thanValue}',
+        lessOrEqualsThanValue: 'Campo debe tener un valor menor o igual a {thanValue}',
+        maxValue: 'Campo debe tener un valor máximo de {thanValue}',
+        minValue: 'Campo debe tener un valor mínimo de {thanValue}',
+        nickname: 'Campo inválido para nombre de usuario',
+        onlynumber: 'Campo debe ser númerico',
+        password: 'Campo no permitido para password',
+        reqlength: 'Campo debe tener {length} caracter(es)',
+        required: 'Campo es requerido',
+        strMinlength: 'Campo debe tener mínimo {length} caracter(es)',
+        strMaxlength: 'Campo debe tener máximo {length} caracter(es)',
+        textonly: 'Campo solo permite caracteres (sin espacio)',
+        _unknown: 'Campo inválido {error}'
+    },
+    en: {
+        alphabetic: 'Field only allows characters',
+        alphanumber: 'Field only allows characters and number',
+        decimal: 'Field must be decimal number',
+        defined: 'Field must be defined',
+        email: 'Field must be email',
+        greaterThanValue: 'Field must have a value greater than {thanValue}',
+        greaterOrEqualsThanValue: 'Field must have a value greater than or equal to {thanValue}',
+        lessThanValue: 'Field must have a value less than {thanValue}',
+        lessOrEqualsThanValue: 'Field must have a value less than or equal to {thanValue}',
+        minValue: 'Field must have a minimum value of {thanValue}',
+        maxValue: 'Field must have a maximum value of {thanValue}',
+        nickname: 'Invalid field for username',
+        onlynumber: 'Field must be numeric',
+        password: 'Field not allowed for password',
+        reqlength: 'Field must be {length} characters',
+        required: 'Field is required',
+        strMinlength: 'Field must have minimum {length} characters',
+        strMaxlength: 'Field must have maximum {length} characters',
+        textonly: 'Field only allows characters (no space)',
+        _unknown: 'Invalid field {error}'
+    },
+    fr: {
+        alphabetic: 'Field only allows characters',
+        alphanumber: 'Field only allows characters and number',
+        decimal: 'Field must be decimal number',
+        defined: 'Field must be defined',
+        email: 'Field must be email',
+        greaterThanValue: 'Field must have a value greater than {thanValue}',
+        greaterOrEqualsThanValue: 'Field must have a value greater than or equal to {thanValue}',
+        lessThanValue: 'Field must have a value less than {thanValue}',
+        lessOrEqualsThanValue: 'Field must have a value less than or equal to {thanValue}',
+        minValue: 'Field must have a minimum value of {thanValue}',
+        maxValue: 'Field must have a maximum value of {thanValue}',
+        nickname: 'Invalid field for username',
+        onlynumber: 'Field must be numeric',
+        password: 'Field not allowed for password',
+        reqlength: 'Field must be {length} characters',
+        required: 'Field is required',
+        strMinlength: 'Field must have minimum {length} characters',
+        strMaxlength: 'Field must have maximum {length} characters',
+        textonly: 'Field only allows characters (no space)',
+        _unknown: 'Invalid field {error}'
+    },
+    pt: {
+        alphabetic: 'Field only allows characters',
+        alphanumber: 'Field only allows characters and number',
+        decimal: 'Field must be decimal number',
+        defined: 'Field must be defined',
+        email: 'Field must be email',
+        greaterThanValue: 'Field must have a value greater than {thanValue}',
+        greaterOrEqualsThanValue: 'Field must have a value greater than or equal to {thanValue}',
+        lessThanValue: 'Field must have a value less than {thanValue}',
+        lessOrEqualsThanValue: 'Field must have a value less than or equal to {thanValue}',
+        minValue: 'Field must have a minimum value of {thanValue}',
+        maxValue: 'Field must have a maximum value of {thanValue}',
+        nickname: 'Invalid field for username',
+        onlynumber: 'Field must be numeric',
+        password: 'Field not allowed for password',
+        reqlength: 'Field must be {thanValue} characters',
+        required: 'Field is required',
+        strMinlength: 'Field must have minimum {thanValue} characters',
+        strMaxlength: 'Field must have maximum {thanValue} characters',
+        textonly: 'Field only allows characters (no space)',
+        _unknown: 'Invalid field {error}'
+    }
+};
+let _msgErrorsI18n = i18n.i18n(errorsDictionary);
+function setErrorsI18n(dictionary) {
+    _msgErrorsI18n = i18n.i18n(Object.entries(errorsDictionary).reduce((_dictionary, [key, value]) => {
+        _dictionary[key] = { ...value, ...dictionary[key] };
+        return _dictionary;
+    }, {}));
+}
+function msgErrorsI18n(key, language, interpolators) {
+    return _msgErrorsI18n(key, { language, interpolators });
 }
 
 function RlsAvatar({ children, rounded, skeleton, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("div", { className: useRenderClassStatus('rls-avatar', { rounded, skeleton }), "rls-theme": rlsTheme, children: children }));
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-avatar', { rounded, skeleton });
+    }, [rounded, skeleton]);
+    return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: children }));
 }
 
 function RlsBadge({ children, rlsTheme }) {
     return (jsxRuntimeExports.jsx("div", { className: "rls-badge", "rls-theme": rlsTheme, children: children }));
 }
 
+function RlsBreadcrumbLabel({ label }) {
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-breadcrumb__label__a', {
+            actionable: !!label.onClick
+        });
+    }, [label.onClick]);
+    return (jsxRuntimeExports.jsx("label", { className: "rls-breadcrumb__label", onClick: label.onClick, children: jsxRuntimeExports.jsx("a", { className: className, children: label.label }) }));
+}
 function RlsBreadcrumb({ labels }) {
-    return (jsxRuntimeExports.jsx("div", { className: "rls-breadcrumb", children: labels.map(({ label, onClick }, index) => (jsxRuntimeExports.jsx("label", { className: "rls-breadcrumb__label", onClick: onClick, children: jsxRuntimeExports.jsx("a", { className: renderClassStatus('rls-breadcrumb__label__a', {
-                    actionable: !!onClick
-                }), children: label }) }, index))) }));
+    return (jsxRuntimeExports.jsx("div", { className: "rls-breadcrumb", children: labels.map((label, index) => (jsxRuntimeExports.jsx(RlsBreadcrumbLabel, { label: label }, index))) }));
 }
 
 function RlsIcon({ value, skeleton }) {
-    return (jsxRuntimeExports.jsx("div", { className: useRenderClassStatus('rls-icon', { skeleton }), children: jsxRuntimeExports.jsx("i", { className: `rls-icon-${value}` }) }));
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-icon', { skeleton });
+    }, [skeleton]);
+    return (jsxRuntimeExports.jsx("div", { className: className, children: jsxRuntimeExports.jsx("i", { className: `rls-icon-${value}` }) }));
 }
 
 function RlsButton({ type, children, disabled, identifier, prefixIcon, suffixIcon, rlsTheme, onClick }) {
-    return (jsxRuntimeExports.jsx("button", { id: identifier, className: "rls-button", onClick: onClick, "rls-theme": rlsTheme, disabled: disabled, children: jsxRuntimeExports.jsxs("div", { className: useRenderClassStatus('rls-button__content', { type }), children: [prefixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: prefixIcon }), children && jsxRuntimeExports.jsx("div", { className: "rls-button__label", children: children }), suffixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: suffixIcon })] }) }));
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-button__content', { type });
+    }, [type]);
+    return (jsxRuntimeExports.jsx("button", { id: identifier, className: "rls-button", onClick: onClick, "rls-theme": rlsTheme, disabled: disabled, children: jsxRuntimeExports.jsxs("div", { className: className, children: [prefixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: prefixIcon }), children && jsxRuntimeExports.jsx("div", { className: "rls-button__label", children: children }), suffixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: suffixIcon })] }) }));
 }
 
 function RlsButtonAction({ icon, disabled, identifier, onClick, tooltip }) {
@@ -1553,12 +1526,16 @@ function RlsButtonAction({ icon, disabled, identifier, onClick, tooltip }) {
 }
 
 function RlsCheckBox({ checked, disabled, identifier, onClick, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: useRenderClassStatus('rls-checkbox', { checked, disabled }), onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-checkbox__component" }) }));
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-checkbox', { checked, disabled });
+    }, [checked, disabled]);
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: className, onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-checkbox__component" }) }));
 }
 function RlsCheckBoxControl({ formControl, disabled, identifier, rlsTheme }) {
-    return (jsxRuntimeExports.jsx(RlsCheckBox, { identifier: identifier, checked: !!formControl.value, disabled: disabled, onClick: () => {
-            formControl.setValue(!formControl.value);
-        }, rlsTheme: rlsTheme }));
+    const onClick = require$$0.useCallback(() => {
+        formControl.setValue(!formControl.value);
+    }, [formControl.value]);
+    return (jsxRuntimeExports.jsx(RlsCheckBox, { identifier: identifier, checked: !!formControl.value, disabled: disabled, onClick: onClick, rlsTheme: rlsTheme }));
 }
 
 function RlsInput({ children, disabled, formControl, identifier, onValue, placeholder, type, value }) {
@@ -1576,10 +1553,13 @@ function RlsInput({ children, disabled, formControl, identifier, onValue, placeh
         formControl?.blur();
         setFocused(() => false);
     }, [formControl]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: useRenderClassStatus('rls-input', {
-            focused: formControl?.focused ?? focused,
-            disabled: formControl?.disabled || disabled
-        }), children: [jsxRuntimeExports.jsx("input", { ref: formControl?.elementRef, className: "rls-input__component", autoComplete: "off", type: type ?? 'text', placeholder: placeholder, disabled: formControl?.disabled || disabled, onFocus: onFocus, onBlur: onBlur, onChange: onChange, value: formControl?.value || value || '' }), jsxRuntimeExports.jsx("span", { className: "rls-input__value", children: children })] }));
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-input', {
+            disabled: formControl?.disabled || disabled,
+            focused: formControl?.focused ?? focused
+        });
+    }, [formControl?.focused, formControl?.disabled, focused, disabled]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, children: [jsxRuntimeExports.jsx("input", { ref: formControl?.elementRef, className: "rls-input__component", autoComplete: "off", type: type ?? 'text', placeholder: placeholder, disabled: formControl?.disabled || disabled, onFocus: onFocus, onBlur: onBlur, onChange: onChange, value: formControl?.value || value || '' }), jsxRuntimeExports.jsx("span", { className: "rls-input__value", children: children })] }));
 }
 
 function RlsInputMoney({ decimals, disabled, formControl, identifier, onValue, placeholder, symbol, value }) {
@@ -1614,10 +1594,13 @@ function RlsInputPassword({ disabled, formControl, identifier, onValue, placehol
         formControl?.blur();
         setFocused(() => false);
     }, [formControl]);
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: renderClassStatus('rls-input-password', {
-            focused: formControl?.focused ?? focused,
-            disabled: formControl?.disabled || disabled
-        }), children: jsxRuntimeExports.jsx("input", { className: "rls-input-password__component", autoComplete: "off", type: type ?? 'password', placeholder: placeholder, disabled: disabled, onFocus: onFocus, onBlur: onBlur, onChange: onChange }) }));
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-input-password', {
+            disabled: formControl?.disabled || disabled,
+            focused: formControl?.focused ?? focused
+        });
+    }, [formControl?.focused, formControl?.disabled, focused, disabled]);
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: className, children: jsxRuntimeExports.jsx("input", { className: "rls-input-password__component", autoComplete: "off", type: type ?? 'password', placeholder: placeholder, disabled: disabled, onFocus: onFocus, onBlur: onBlur, onChange: onChange }) }));
 }
 
 function RlsInputSearch({ formControl, identifier, onSearch, placeholder }) {
@@ -1646,11 +1629,17 @@ function RlsMessageIcon({ icon, children, rlsTheme }) {
 }
 
 function RlsPoster({ children, contrast, outline, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("div", { className: useRenderClassStatus('rls-poster', { contrast, outline }), "rls-theme": rlsTheme, children: children }));
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-poster', { contrast, outline });
+    }, [contrast, outline]);
+    return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: children }));
 }
 
 function RlsProgressBar({ indeterminate, percentage, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("div", { className: useRenderClassStatus('rls-progress-bar', { indeterminate }), "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-progress-bar__component", style: { width: `${percentage || 0}%` } }) }));
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-progress-bar', { indeterminate });
+    }, [indeterminate]);
+    return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-progress-bar__component", style: { width: `${percentage || 0}%` } }) }));
 }
 
 function RlsProgressCircular({ rlsTheme }) {
@@ -1658,7 +1647,10 @@ function RlsProgressCircular({ rlsTheme }) {
 }
 
 function RlsRadioButton({ checked, disabled, identifier, rlsTheme, onClick }) {
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: useRenderClassStatus('rls-radiobutton', { checked, disabled }), onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-radiobutton__component" }) }));
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-radiobutton', { checked, disabled });
+    }, [checked, disabled]);
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: className, onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-radiobutton__component" }) }));
 }
 
 function RlsSkeleton({ rlsTheme }) {
@@ -1670,30 +1662,42 @@ function RlsSkeletonText({ active, children, rlsTheme }) {
 }
 
 function RlsSwitch({ checked, disabled, identifier, onClick, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: useRenderClassStatus('rls-switch', { checked, disabled }), onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsxs("div", { className: "rls-switch__component", children: [jsxRuntimeExports.jsx("div", { className: "rls-switch__component__element" }), jsxRuntimeExports.jsx("div", { className: "rls-switch__component__bar" })] }) }));
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-switch', { checked, disabled });
+    }, [checked, disabled]);
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: className, onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsxs("div", { className: "rls-switch__component", children: [jsxRuntimeExports.jsx("div", { className: "rls-switch__component__element" }), jsxRuntimeExports.jsx("div", { className: "rls-switch__component__bar" })] }) }));
 }
 function RlsSwitchControl({ formControl, disabled, identifier, rlsTheme }) {
-    return (jsxRuntimeExports.jsx(RlsSwitch, { identifier: identifier, checked: formControl.value || false, disabled: disabled, onClick: () => {
-            formControl.setValue(!formControl.value);
-        }, rlsTheme: rlsTheme }));
+    const onClick = require$$0.useCallback(() => {
+        formControl.setValue(!formControl.value);
+    }, [formControl.value]);
+    return (jsxRuntimeExports.jsx(RlsSwitch, { identifier: identifier, checked: formControl.value || false, disabled: disabled, onClick: onClick, rlsTheme: rlsTheme }));
 }
 
 function RlsAlert({ bordered, children, icon, identifier, rlsTheme }) {
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: useRenderClassStatus('rls-alert', { bordered }), "rls-theme": rlsTheme, children: [icon && (jsxRuntimeExports.jsx("div", { className: "rls-alert__icon", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })), jsxRuntimeExports.jsx("div", { className: "rls-alert__content", children: children })] }));
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-alert', { bordered });
+    }, [bordered]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [icon && (jsxRuntimeExports.jsx("div", { className: "rls-alert__icon", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })), jsxRuntimeExports.jsx("div", { className: "rls-alert__content", children: children })] }));
 }
 
 function RlsBallot({ bordered, children, img, initials, skeleton, subtitle, rlsTheme }) {
-    return (jsxRuntimeExports.jsxs("div", { className: useRenderClassStatus('rls-ballot', { bordered, skeleton }), "rls-theme": rlsTheme, children: [(img || initials) && (jsxRuntimeExports.jsxs(RlsAvatar, { skeleton: skeleton, children: [img && jsxRuntimeExports.jsx("img", { src: img }), initials && jsxRuntimeExports.jsx("span", { children: initials })] })), jsxRuntimeExports.jsxs("div", { className: "rls-ballot__component", children: [jsxRuntimeExports.jsx("label", { className: "rls-ballot__title", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: children }) }), subtitle && (jsxRuntimeExports.jsx("label", { className: "rls-ballot__subtitle", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: jsxRuntimeExports.jsx("span", { children: subtitle }) }) }))] })] }));
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-ballot', { bordered, skeleton });
+    }, [bordered, skeleton]);
+    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [(img || initials) && (jsxRuntimeExports.jsxs(RlsAvatar, { skeleton: skeleton, children: [img && jsxRuntimeExports.jsx("img", { src: img }), initials && jsxRuntimeExports.jsx("span", { children: initials })] })), jsxRuntimeExports.jsxs("div", { className: "rls-ballot__component", children: [jsxRuntimeExports.jsx("label", { className: "rls-ballot__title", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: children }) }), subtitle && (jsxRuntimeExports.jsx("label", { className: "rls-ballot__subtitle", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: jsxRuntimeExports.jsx("span", { children: subtitle }) }) }))] })] }));
 }
 
 function RlsButtonProgress({ icon, disabled, onClick, progressing, rlsTheme }) {
-    return (jsxRuntimeExports.jsxs("div", { className: useRenderClassStatus('rls-button-progress', { progressing }), "rls-theme": rlsTheme, children: [!progressing && (jsxRuntimeExports.jsx(RlsButtonAction, { icon: icon, onClick: onClick, disabled: disabled })), progressing && jsxRuntimeExports.jsx(RlsProgressCircular, {})] }));
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-button-progress', { progressing });
+    }, [progressing]);
+    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [!progressing && (jsxRuntimeExports.jsx(RlsButtonAction, { icon: icon, onClick: onClick, disabled: disabled })), progressing && jsxRuntimeExports.jsx(RlsProgressCircular, {})] }));
 }
 
 function RlsButtonToggle({ onAction, options, type, automatic, disabled, rlsTheme }) {
     const componentRef = require$$0.useRef(null);
-    const [firstAction] = options;
-    const [action, setAction] = require$$0.useState(firstAction);
+    const [action, setAction] = require$$0.useState(options[0]);
     const [visible, setVisible] = require$$0.useState(false);
     require$$0.useEffect(() => {
         function onCloseMenu({ target }) {
@@ -1704,6 +1708,12 @@ function RlsButtonToggle({ onAction, options, type, automatic, disabled, rlsThem
             document.removeEventListener('click', onCloseMenu);
         };
     }, []);
+    const classNameList = require$$0.useMemo(() => {
+        return renderClassStatus('rls-button-toggle__list', {
+            hide: !visible,
+            visible
+        });
+    }, [visible]);
     const onClickMenu = require$$0.useCallback(() => {
         setVisible((visible) => !visible);
     }, []);
@@ -1714,34 +1724,58 @@ function RlsButtonToggle({ onAction, options, type, automatic, disabled, rlsThem
     }, [onAction, automatic]);
     return (jsxRuntimeExports.jsxs("div", { className: "rls-button-toggle", ref: componentRef, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-button-toggle__content", children: [action && (jsxRuntimeExports.jsx("div", { className: "rls-button-toggle__action", children: jsxRuntimeExports.jsx(RlsButton, { disabled: disabled, type: type, onClick: () => {
                                 onAction(action.value);
-                            }, children: action.label }) })), jsxRuntimeExports.jsx("div", { className: "rls-button-toggle__icon", children: jsxRuntimeExports.jsx(RlsButton, { type: type, prefixIcon: "arrow-ios-down", disabled: disabled, onClick: onClickMenu }) })] }), jsxRuntimeExports.jsx("div", { className: useRenderClassStatus('rls-button-toggle__list', {
-                    visible,
-                    hide: !visible
-                }), children: jsxRuntimeExports.jsx("ul", { children: options.map((action, index) => (jsxRuntimeExports.jsx("li", { className: "truncate", onClick: () => {
+                            }, children: action.label }) })), jsxRuntimeExports.jsx("div", { className: "rls-button-toggle__icon", children: jsxRuntimeExports.jsx(RlsButton, { type: type, prefixIcon: "arrow-ios-down", disabled: disabled, onClick: onClickMenu }) })] }), jsxRuntimeExports.jsx("div", { className: classNameList, children: jsxRuntimeExports.jsx("ul", { children: options.map((action, index) => (jsxRuntimeExports.jsx("li", { className: "truncate", onClick: () => {
                             onSelectAction(action);
                         }, children: action.label }, index))) }) })] }));
 }
 
 function RlsMessageFormError({ className, formControl }) {
-    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: formControl?.wrong && (jsxRuntimeExports.jsx("div", { className: className, children: jsxRuntimeExports.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl?.error?.message }) })) }));
+    const [language, setLanguage] = require$$0.useState('es');
+    require$$0.useEffect(() => {
+        return i18n.i18nSubscribe((language) => {
+            setLanguage(language);
+        });
+    }, []);
+    const msgError = require$$0.useMemo(() => {
+        return (formControl?.error &&
+            (msgErrorsI18n(formControl.error.id, language, formControl.error.data) ??
+                msgErrorsI18n('_unknown', language, { error: formControl.error.id })));
+    }, [formControl?.error, language]);
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: formControl?.wrong && (jsxRuntimeExports.jsx("div", { className: className, children: jsxRuntimeExports.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: msgError }) })) }));
 }
 
 function RlsFieldMoney({ children, decimals, disabled, formControl, identifier, msgErrorDisabled, onValue, placeholder, symbol, rlsTheme, value }) {
-    const _disabled = formControl?.disabled || disabled;
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: useRenderClassStatus('rls-field-box', {
+    const className = require$$0.useMemo(() => {
+        const _disabled = formControl?.disabled || disabled;
+        return renderClassStatus('rls-field-box', {
             focused: formControl?.focused && !_disabled,
             error: formControl?.wrong,
             disabled: _disabled
-        }, 'rls-field-money'), "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputMoney, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, symbol: symbol, decimals: decimals, onValue: onValue }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+        }, 'rls-field-money');
+    }, [
+        formControl?.focused,
+        formControl?.wrong,
+        formControl?.disabled,
+        disabled
+    ]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputMoney, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, symbol: symbol, decimals: decimals, onValue: onValue }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
 function RlsFieldNumber({ children, disabled, formControl, identifier, msgErrorDisabled, onValue, placeholder, rlsTheme, value }) {
-    const _disabled = formControl?.disabled || disabled;
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: useRenderClassStatus('rls-field-box', {
+    const className = require$$0.useMemo(() => {
+        const _disabled = formControl?.disabled || disabled;
+        return renderClassStatus('rls-field-box', {
             focused: formControl?.focused && !_disabled,
             error: formControl?.wrong,
             disabled: _disabled
-        }, 'rls-field-number'), "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputNumber, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+        }, 'rls-field-number');
+    }, [
+        formControl?.focused,
+        formControl?.wrong,
+        formControl?.disabled,
+        disabled
+    ]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputNumber, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
 function RlsFieldPassword({ children, disabled, formControl, identifier, msgErrorDisabled, placeholder, rlsTheme }) {
@@ -1749,21 +1783,37 @@ function RlsFieldPassword({ children, disabled, formControl, identifier, msgErro
     const onToggleInput = require$$0.useCallback(() => {
         setPassword((password) => !password);
     }, []);
-    const _disabled = formControl?.disabled || disabled;
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: useRenderClassStatus(' rls-field-box', {
+    const className = require$$0.useMemo(() => {
+        const _disabled = formControl?.disabled || disabled;
+        return renderClassStatus('rls-field-box', {
             focused: formControl?.focused && !_disabled,
             error: formControl?.wrong,
             disabled: _disabled
-        }, 'rls-field-password'), "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx(RlsInputPassword, { formControl: formControl, disabled: disabled, placeholder: placeholder, type: password ? 'password' : 'text' }), jsxRuntimeExports.jsx(RlsButtonAction, { icon: password ? 'eye' : 'eye-off', onClick: onToggleInput })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+        }, 'rls-field-password');
+    }, [
+        formControl?.focused,
+        formControl?.wrong,
+        formControl?.disabled,
+        disabled
+    ]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx(RlsInputPassword, { formControl: formControl, disabled: disabled, placeholder: placeholder, type: password ? 'password' : 'text' }), jsxRuntimeExports.jsx(RlsButtonAction, { icon: password ? 'eye' : 'eye-off', onClick: onToggleInput })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
 function RlsFieldText({ children, disabled, formControl, identifier, msgErrorDisabled, onValue, placeholder, rlsTheme, value }) {
-    const _disabled = formControl?.disabled || disabled;
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: useRenderClassStatus('rls-field-box', {
+    const className = require$$0.useMemo(() => {
+        const _disabled = formControl?.disabled || disabled;
+        return renderClassStatus('rls-field-box', {
             focused: formControl?.focused && !_disabled,
             error: formControl?.wrong,
             disabled: _disabled
-        }, 'rls-field-text'), "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputText, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+        }, 'rls-field-text');
+    }, [
+        formControl?.focused,
+        formControl?.wrong,
+        formControl?.disabled,
+        disabled
+    ]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputText, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
 function RlsLabelCheckBox({ children, disabled, extended, identifier, formControl, rlsTheme }) {
@@ -1776,10 +1826,10 @@ function RlsLabelCheckBox({ children, disabled, extended, identifier, formContro
             ? formControl?.setValue(!formControl.value)
             : setChecked((checked) => !checked);
     }, [formControl]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: useRenderClassStatus('rls-label-checkbox', {
-            disabled,
-            extended
-        }), "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-checkbox__component", onClick: onToggle, children: jsxRuntimeExports.jsx(RlsCheckBox, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("label", { className: "rls-label-checkbox__text", children: children })] }));
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-label-checkbox', { disabled, extended });
+    }, [disabled, extended]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-checkbox__component", onClick: onToggle, children: jsxRuntimeExports.jsx(RlsCheckBox, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("label", { className: "rls-label-checkbox__text", children: children })] }));
 }
 
 function RlsLabelRadioButton({ children, disabled, extended, identifier, formControl, rlsTheme, value }) {
@@ -1790,10 +1840,10 @@ function RlsLabelRadioButton({ children, disabled, extended, identifier, formCon
     const onSelect = require$$0.useCallback(() => {
         formControl && formControl?.setValue(value);
     }, [formControl, value]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: useRenderClassStatus('rls-label-radiobutton', {
-            disabled,
-            extended
-        }), "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-radiobutton__component", onClick: onSelect, children: jsxRuntimeExports.jsx(RlsRadioButton, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("label", { className: "rls-label-radiobutton__text", children: children })] }));
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-label-radiobutton', { disabled, extended });
+    }, [disabled, extended]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-radiobutton__component", onClick: onSelect, children: jsxRuntimeExports.jsx(RlsRadioButton, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("label", { className: "rls-label-radiobutton__text", children: children })] }));
 }
 
 function RlsLabelSwitch({ children, disabled, extended, identifier, formControl, rlsTheme }) {
@@ -1806,62 +1856,53 @@ function RlsLabelSwitch({ children, disabled, extended, identifier, formControl,
             ? formControl?.setValue(!formControl.value)
             : setChecked((checked) => !checked);
     }, [formControl]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: useRenderClassStatus('rls-label-switch', {
-            disabled,
-            extended
-        }), "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-switch__component", onClick: onToggle, children: jsxRuntimeExports.jsx(RlsSwitch, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("label", { className: "rls-label-switch__text", children: children })] }));
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-label-switch', { disabled, extended });
+    }, [disabled, extended]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-switch__component", onClick: onToggle, children: jsxRuntimeExports.jsx(RlsSwitch, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("label", { className: "rls-label-switch__text", children: children })] }));
 }
 
 function RlsPagination({ suggestions, count, filter, onPagination }) {
     const controller = require$$0.useRef(new components.PaginationController({ suggestions, count }));
     const [template, setTemplate] = require$$0.useState(controller.current.template);
+    const refreshTemplate = require$$0.useCallback((template, suggestions) => {
+        const { firstPage, lastPage } = template;
+        onPagination && onPagination({ firstPage, lastPage, suggestions });
+        setTemplate(template);
+    }, [onPagination]);
     require$$0.useEffect(() => {
         controller.current = new components.PaginationController({
             suggestions,
             count,
             position: template.currentPage.value
         });
-        onPagination &&
-            onPagination({
-                firstPage: controller.current.template.firstPage,
-                lastPage: controller.current.template.lastPage,
-                suggestions: controller.current.page.collection
-            });
-        setTemplate(controller.current.template);
+        refreshTemplate(controller.current.template, controller.current.page.collection);
     }, [suggestions, count]);
     require$$0.useEffect(() => {
         refreshPagination(controller.current.filtrable(filter));
     }, [filter]);
-    function refreshPagination(pagination) {
+    const refreshPagination = require$$0.useCallback((pagination) => {
         if (pagination) {
-            const { page, template } = pagination;
-            const { firstPage, lastPage } = template;
-            onPagination &&
-                onPagination({
-                    firstPage,
-                    lastPage,
-                    suggestions: page.collection
-                });
-            setTemplate(template);
+            refreshTemplate(pagination.template, pagination.page.collection);
         }
-    }
-    function goToPagination(page) {
+    }, []);
+    const goToPagination = require$$0.useCallback((page) => {
         refreshPagination(controller.current.goToPage(page));
-    }
-    function goFirstPagination() {
+    }, []);
+    const goFirstPagination = require$$0.useCallback(() => {
         refreshPagination(controller.current.goFirstPage());
-    }
-    function goPreviousPagination() {
+    }, []);
+    const goPreviousPagination = require$$0.useCallback(() => {
         refreshPagination(controller.current.goPreviousPage());
-    }
-    function goNextPagination() {
+    }, []);
+    const goNextPagination = require$$0.useCallback(() => {
         refreshPagination(controller.current.goNextPage());
-    }
-    function goLastPagination() {
+    }, []);
+    const goLastPagination = require$$0.useCallback(() => {
         refreshPagination(controller.current.goLastPage());
-    }
+    }, []);
     return (jsxRuntimeExports.jsxs("div", { className: "rls-pagination", children: [jsxRuntimeExports.jsxs("div", { className: "rls-pagination__actions", children: [jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goFirstPagination, disabled: template.firstPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrowhead-left" }) }), jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goPreviousPagination, disabled: template.firstPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-left" }) })] }), jsxRuntimeExports.jsx("div", { className: "rls-pagination__pages", children: template.pages.map((page, index) => {
-                    return (jsxRuntimeExports.jsx("div", { className: useRenderClassStatus('rls-pagination__page', {
+                    return (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-pagination__page', {
                             active: page.active
                         }), onClick: () => {
                             goToPagination(page);
@@ -1869,10 +1910,45 @@ function RlsPagination({ suggestions, count, filter, onPagination }) {
                 }) }), jsxRuntimeExports.jsx("div", { className: "rls-pagination__description", children: template.description }), jsxRuntimeExports.jsxs("div", { className: "rls-pagination__actions", children: [jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goNextPagination, disabled: template.lastPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-right" }) }), jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goLastPagination, disabled: template.lastPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrowhead-right" }) })] })] }));
 }
 
-function RlsPickerDay({ date, disabled: disabledPicker, formControl, maxDate, month, minDate, onValue, rlsTheme, year }) {
-    const currentDate = date || new Date(); // Initial date
+function RlsPickerDayItem({ day, onSelect, disabled }) {
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-picker-day__element', {
+            disabled: day.disabled || disabled,
+            focused: day.focused,
+            forbidden: day.forbidden,
+            selected: day.selected,
+            today: day.today
+        });
+    }, [
+        day.disabled,
+        day.focused,
+        day.forbidden,
+        day.selected,
+        day.today,
+        disabled
+    ]);
+    const onClick = require$$0.useCallback(() => {
+        day.value && !day.disabled && !disabled && onSelect(day.value);
+    }, [day.value, day.disabled, disabled, onSelect]);
+    return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-day__element__span", children: day.value || '??' }) }));
+}
+function RlsPickerDayHeaders() {
+    return (jsxRuntimeExports.jsx("div", { className: "rls-picker-day__header", children: dates.DAY_LABELS().map((title, index) => (jsxRuntimeExports.jsx("label", { className: "rls-picker-day__label", children: title }, index))) }));
+}
+function RlsPickerDay({ date: _date, disabled, formControl, maxDate, month, minDate, onValue, rlsTheme, year }) {
+    const date = require$$0.useMemo(() => _date ?? new Date(), [_date]);
     const [weeks, setWeeks] = require$$0.useState([]);
-    const [value, setValue] = require$$0.useState(formControl?.value || currentDate.getDate());
+    const [value, setValue] = require$$0.useState(formControl?.value || date.getDate());
+    const [headers, setHeaders] = require$$0.useState(jsxRuntimeExports.jsx(RlsPickerDayHeaders, {}));
+    const [component, setComponent] = require$$0.useState(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}));
+    require$$0.useEffect(() => {
+        return i18n.i18nSubscribe(() => {
+            setHeaders(jsxRuntimeExports.jsx(RlsPickerDayHeaders, {}));
+        });
+    }, []);
+    require$$0.useEffect(() => {
+        setComponent(jsxRuntimeExports.jsx("div", { className: "rls-picker-day__component", children: weeks.map(({ days }, index) => (jsxRuntimeExports.jsx("div", { className: "rls-picker-day__week", children: days.map((day, index) => (jsxRuntimeExports.jsx(RlsPickerDayItem, { day: day, onSelect: onSelect, disabled: disabled }, index))) }, index))) }));
+    }, [weeks]);
     require$$0.useEffect(() => {
         const options = createPickerOptions();
         const day = components.verifyDayPicker(options);
@@ -1882,125 +1958,175 @@ function RlsPickerDay({ date, disabled: disabledPicker, formControl, maxDate, mo
         const day = components.verifyDayPicker(createPickerOptions());
         day
             ? formControl?.setValue(day)
-            : setValue(formControl?.value || currentDate.getDate());
+            : setValue(formControl?.value || date.getDate());
     }, [formControl?.value]);
-    function createPickerOptions() {
+    const createPickerOptions = require$$0.useCallback(() => {
         return {
-            date: currentDate,
-            day: formControl?.value || value,
-            month: commons.itIsDefined(month) ? month : currentDate.getMonth(),
-            year: year || currentDate.getFullYear(),
+            date,
+            day: formControl?.value ?? value,
+            month: month ?? date.getMonth(),
+            year: year ?? date.getFullYear(),
             minDate,
             maxDate
         };
-    }
-    function setDayValue(value) {
+    }, [date, formControl?.value, value, month, year, minDate, maxDate]);
+    const setDayValue = require$$0.useCallback((value) => {
         formControl ? formControl.setValue(value) : setValue(value);
-    }
-    function onChange(value) {
+    }, [formControl]);
+    const onSelect = require$$0.useCallback((value) => {
         setDayValue(value);
         onValue && onValue(value);
-    }
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-day", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-day__header", children: dates.DAY_LABELS().map((title, index) => (jsxRuntimeExports.jsx("label", { className: "rls-picker-day__label", children: title }, index))) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-day__component", children: weeks.map(({ days }, index) => (jsxRuntimeExports.jsx("div", { className: "rls-picker-day__week", children: days.map(({ value, disabled, focused, forbidden, selected, today }, index) => (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-picker-day__element', {
-                            disabled: disabled || disabledPicker,
-                            focused,
-                            forbidden,
-                            selected,
-                            today
-                        }), onClick: value && !disabledPicker ? () => onChange(value) : undefined, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-day__element__span", children: value || '??' }) }, index))) }, index))) })] }));
-}
-
-const FORMAT_RANGE = '{dd}/{mx}/{aa}';
-function RlsPickerDayRange({ date, disabled: _disabled, formControl, maxDate, minDate, rlsTheme }) {
-    const currentRange = formControl?.value || dates.DateRange.now();
-    const currentDate = dates.normalizeMinTime(date || currentRange.minDate);
-    const sourceDate = require$$0.useRef(currentRange.minDate);
+    }, [setDayValue, onValue]);
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-day", "rls-theme": rlsTheme, children: [headers, component] }));
+}
+
+const formatRange = '{dd}/{mx}/{aa}';
+function RlsPickerDayRangeHeaders() {
+    return (jsxRuntimeExports.jsx("div", { className: "rls-picker-day__header", children: dates.DAY_LABELS().map((title, index) => (jsxRuntimeExports.jsx("label", { className: "rls-picker-day__label", children: title }, index))) }));
+}
+function RlsPickerDayRangeItem({ day, onSelect, disabled }) {
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-picker-day-range__element', {
+            disabled: day.disabled || disabled,
+            end: day.end,
+            forbidden: day.forbidden,
+            ranged: day.ranged,
+            source: day.source
+        });
+    }, [day.disabled, day.end, day.forbidden, day.ranged, day.source, disabled]);
+    const onClick = require$$0.useCallback(() => {
+        day.value && !day.disabled && !disabled && onSelect(day.value);
+    }, [day.value, day.disabled, disabled, onSelect]);
+    return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-day-range__element__span", children: day.value || '??' }) }));
+}
+function RlsPickerDayRange({ date: _date, disabled, formControl, maxDate, minDate, rlsTheme }) {
+    const _range = require$$0.useMemo(() => {
+        return formControl?.value ?? dates.DateRange.now();
+    }, [formControl?.value]);
+    const date = require$$0.useMemo(() => {
+        return dates.normalizeMinTime(_date ?? _range.minDate);
+    }, [_date]);
+    const sourceDate = require$$0.useRef(_range.minDate);
     const [weeks, setWeeks] = require$$0.useState([]);
-    const [range, setRange] = require$$0.useState(currentRange);
+    const [range, setRange] = require$$0.useState(_range);
+    const [headers, setHeaders] = require$$0.useState(jsxRuntimeExports.jsx(RlsPickerDayRangeHeaders, {}));
+    const [component, setComponent] = require$$0.useState(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}));
+    require$$0.useEffect(() => {
+        return i18n.i18nSubscribe(() => {
+            setHeaders(jsxRuntimeExports.jsx(RlsPickerDayRangeHeaders, {}));
+        });
+    }, []);
+    require$$0.useEffect(() => {
+        setComponent(jsxRuntimeExports.jsx("div", { className: "rls-picker-day-range__component", children: weeks.map(({ days }, index) => (jsxRuntimeExports.jsx("div", { className: "rls-picker-day-range__week", children: days.map((day, index) => (jsxRuntimeExports.jsx(RlsPickerDayRangeItem, { day: day, onSelect: onSelect, disabled: disabled }, index))) }, index))) }));
+    }, [weeks]);
     require$$0.useEffect(() => {
         setWeeks(components.createDayRangePicker({
-            date: currentDate,
+            date,
             range,
             sourceDate: sourceDate.current,
             minDate,
             maxDate
         }));
-    }, [range, date, minDate, maxDate]);
-    function onChange(value) {
-        const date = dates.assignDayInDate(currentDate, value);
-        const range = dates.dateIsBefore(date, sourceDate.current)
-            ? new dates.DateRange(sourceDate.current, date)
-            : new dates.DateRange(date, sourceDate.current);
-        sourceDate.current = date;
+    }, [date, range, minDate, maxDate]);
+    const title = require$$0.useMemo(() => {
+        return (jsxRuntimeExports.jsx("div", { className: "rls-picker-day-range__title", children: dates.dateFormatTemplate(sourceDate.current, formatRange) }));
+    }, [sourceDate.current]);
+    const onSelect = require$$0.useCallback((value) => {
+        const _date = dates.assignDayInDate(date, value);
+        const range = dates.dateIsBefore(_date, sourceDate.current)
+            ? new dates.DateRange(sourceDate.current, _date)
+            : new dates.DateRange(_date, sourceDate.current);
+        sourceDate.current = _date;
         setRange(range);
         formControl?.setValue(range);
-    }
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-day-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-day-range__title", children: dates.dateFormatTemplate(sourceDate.current, FORMAT_RANGE) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-day-range__header", children: dates.DAY_LABELS().map((title, index) => (jsxRuntimeExports.jsx("label", { className: "rls-picker-day-range__label", children: title }, index))) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-day-range__component", children: weeks.map(({ days }, index) => (jsxRuntimeExports.jsx("div", { className: "rls-picker-day-range__week", children: days.map(({ disabled, end, forbidden, source, ranged, value }, index) => (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-picker-day-range__element', {
-                            disabled: disabled || _disabled,
-                            end,
-                            forbidden,
-                            ranged,
-                            source
-                        }), onClick: value && !_disabled
-                            ? () => {
-                                onChange(value);
-                            }
-                            : undefined, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-day-range__element__span", children: value || '??' }) }, index))) }, index))) })] }));
-}
-
-function RlsPickerMonth({ date, disabled: disabledPicker, formControl, maxDate, minDate, onValue, rlsTheme, year }) {
-    const currentDate = date || new Date();
+    }, [date, sourceDate.current, formControl]);
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-day-range", "rls-theme": rlsTheme, children: [title, headers, component] }));
+}
+
+function RlsPickerMonthItem({ month, onSelect, disabled }) {
+    const [label, setLabel] = require$$0.useState(dates.MONTH_NAMES(month.value));
+    require$$0.useEffect(() => {
+        return i18n.i18nSubscribe(() => {
+            setLabel(dates.MONTH_NAMES(month.value));
+        });
+    }, []);
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-picker-month__component', {
+            disabled: month.disabled || disabled,
+            focused: month.focused,
+            selected: month.selected
+        });
+    }, [month.disabled, month.focused, month.selected, disabled]);
+    const onClick = require$$0.useCallback(() => {
+        commons.itIsDefined(month.value) &&
+            !month.disabled &&
+            !disabled &&
+            onSelect(month.value);
+    }, [month.value, month.disabled, disabled, onSelect]);
+    return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-month__span", children: label }) }));
+}
+function RlsPickerMonth({ date: _date, disabled, formControl, maxDate, minDate, onValue, rlsTheme, year }) {
+    const date = require$$0.useMemo(() => _date || new Date(), [_date]);
     const [months, setMonths] = require$$0.useState([]);
-    const [value, setValue] = require$$0.useState(formControl?.value || currentDate.getMonth());
+    const [value, setValue] = require$$0.useState(formControl?.value ?? date.getMonth());
+    const [component, setComponent] = require$$0.useState(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}));
     require$$0.useEffect(() => {
-        const options = createPickerOptions(); // MonthPickerProps
+        setComponent(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: months.map((month, index) => (jsxRuntimeExports.jsx(RlsPickerMonthItem, { month: month, onSelect: onSelect, disabled: disabled }, index))) }));
+    }, [months]);
+    require$$0.useEffect(() => {
+        const options = {
+            date,
+            month: formControl?.value ?? value,
+            year: year ?? date.getFullYear(),
+            minDate,
+            maxDate
+        };
         const month = components.verifyMonthPicker(options);
-        month ? setMonthValue(month) : setMonths(components.createMonthPicker(options));
+        commons.itIsDefined(month)
+            ? setMonthValue(month)
+            : setMonths(components.createMonthPicker(options));
     }, [date, year, value, minDate, maxDate]);
     require$$0.useEffect(() => {
-        const month = components.verifyMonthPicker(createPickerOptions());
+        const month = components.verifyMonthPicker({
+            date,
+            month: formControl?.value ?? value,
+            year: year ?? date.getFullYear(),
+            minDate,
+            maxDate
+        });
         commons.itIsDefined(month)
             ? formControl?.setValue(month)
-            : setValue(formControl?.value || currentDate.getMonth());
+            : setValue(formControl?.value ?? date.getMonth());
     }, [formControl?.value]);
-    function createPickerOptions() {
-        return {
-            date: currentDate,
-            month: commons.itIsDefined(formControl?.value) ? formControl?.value : value,
-            year: year || currentDate.getFullYear(),
-            minDate,
-            maxDate
-        };
-    }
-    function setMonthValue(value) {
+    const setMonthValue = require$$0.useCallback((value) => {
         formControl ? formControl.setValue(value) : setValue(value);
-    }
-    function onChange(value) {
+    }, [formControl]);
+    const onSelect = require$$0.useCallback((value) => {
         setMonthValue(value);
-        if (onValue) {
-            onValue(value);
-        }
-    }
-    return (jsxRuntimeExports.jsx("div", { className: "rls-picker-month", "rls-theme": rlsTheme, children: months.map(({ label, value, disabled, focused, selected }, index) => (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-picker-month__component', {
-                disabled: disabled || disabledPicker,
-                focused,
-                selected
-            }), onClick: !(disabled || disabledPicker)
-                ? () => {
-                    onChange(value);
-                }
-                : undefined, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-month__span", children: label }) }, index))) }));
+        onValue && onValue(value);
+    }, [setMonthValue, onValue]);
+    return (jsxRuntimeExports.jsx("div", { className: "rls-picker-month", "rls-theme": rlsTheme, children: component }));
 }
 
-function RlsPickerMonthTitle({ monthControl, type, yearControl, date, disabled, maxDate, minDate, onClick }) {
-    const { limitNext, limitPrevious } = components.monthLimitTemplate({
-        date,
-        maxDate,
-        minDate,
-        month: monthControl.value
-    });
-    const monthName = dates.MONTH_NAMES()[monthControl.value || 0];
-    function onPreviousMonth() {
+function RlsPickerSelectorTitle({ monthControl, type, yearControl, date, disabled, maxDate, minDate, onClick }) {
+    const { limitNext, limitPrevious } = require$$0.useMemo(() => {
+        return components.monthLimitTemplate({
+            date,
+            maxDate,
+            minDate,
+            month: monthControl.value
+        });
+    }, [date, maxDate, minDate, monthControl.value]);
+    const [label, setLabel] = require$$0.useState(dates.MONTH_NAMES(monthControl.value ?? dates.Month.January));
+    require$$0.useEffect(() => {
+        return i18n.i18nSubscribe(() => {
+            setLabel(dates.MONTH_NAMES(monthControl.value ?? dates.Month.January));
+        });
+    }, []);
+    require$$0.useEffect(() => {
+        setLabel(dates.MONTH_NAMES(monthControl.value ?? dates.Month.January));
+    }, [monthControl.value]);
+    const onPreviousMonth = require$$0.useCallback(() => {
         if (commons.itIsDefined(monthControl.value) && commons.itIsDefined(yearControl.value)) {
             if (monthControl.value > dates.Month.January) {
                 monthControl.setValue(monthControl.value - 1);
@@ -2010,15 +2136,15 @@ function RlsPickerMonthTitle({ monthControl, type, yearControl, date, disabled,
                 yearControl.setValue(yearControl.value - 1);
             }
         }
-    }
-    function onPreviousYear() {
+    }, [monthControl.value, yearControl.value]);
+    const onPreviousYear = require$$0.useCallback(() => {
         commons.itIsDefined(yearControl.value) &&
             yearControl.setValue(yearControl.value - 1);
-    }
-    function onPrevious() {
+    }, [yearControl.value]);
+    const onPrevious = require$$0.useCallback(() => {
         type === 'month' ? onPreviousMonth() : onPreviousYear();
-    }
-    function onNextMonth() {
+    }, [type, onPreviousMonth, onPreviousYear]);
+    const onNextMonth = require$$0.useCallback(() => {
         if (commons.itIsDefined(monthControl.value) && commons.itIsDefined(yearControl.value)) {
             if (monthControl.value < dates.Month.December) {
                 monthControl.setValue(monthControl.value + 1);
@@ -2028,66 +2154,73 @@ function RlsPickerMonthTitle({ monthControl, type, yearControl, date, disabled,
                 yearControl.setValue(yearControl.value + 1);
             }
         }
-    }
-    function onNextYear() {
+    }, [monthControl.value, yearControl.value]);
+    const onNextYear = require$$0.useCallback(() => {
         commons.itIsDefined(yearControl.value) &&
             yearControl.setValue(yearControl.value + 1);
-    }
-    function onNext() {
+    }, [yearControl.value]);
+    const onNext = require$$0.useCallback(() => {
         type === 'month' ? onNextMonth() : onNextYear();
-    }
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-month-title", children: [jsxRuntimeExports.jsx(RlsButtonAction, { icon: "arrow-ios-left", onClick: onPrevious, disabled: limitPrevious || disabled }), jsxRuntimeExports.jsx("span", { onClick: onClick, children: monthName }), jsxRuntimeExports.jsx(RlsButtonAction, { icon: "arrow-ios-right", onClick: onNext, disabled: limitNext || disabled })] }));
+    }, [type, onNextMonth, onNextYear]);
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-selector-title", children: [jsxRuntimeExports.jsx(RlsButtonAction, { icon: "arrow-ios-left", onClick: onPrevious, disabled: limitPrevious || disabled }), jsxRuntimeExports.jsx("span", { onClick: onClick, children: label }), jsxRuntimeExports.jsx(RlsButtonAction, { icon: "arrow-ios-right", onClick: onNext, disabled: limitNext || disabled })] }));
 }
 
-function RlsPickerYear({ date, disabled: disabledPicker, formControl, maxDate, minDate, onValue, rlsTheme }) {
-    const currentDate = date || new Date();
-    const [value, setValue] = require$$0.useState(formControl?.value || currentDate.getFullYear());
-    const [year, setYear] = require$$0.useState(formControl?.value || currentDate.getFullYear());
+function RlsPickerYearItem({ onSelect, year, disabled }) {
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-picker-year__element', {
+            disabled: year.disabled || disabled,
+            focused: year.focused,
+            selected: year.selected
+        });
+    }, [year.disabled, year.focused, year.selected, disabled]);
+    const onClick = require$$0.useCallback(() => {
+        year.value && !year.disabled && !disabled && onSelect(year.value);
+    }, [year.value, year.disabled, disabled, onSelect]);
+    return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-year__span rls-body1-medium", children: year.value || '????' }) }));
+}
+function RlsPickerYear({ date: _date, disabled, formControl, maxDate, minDate, onValue, rlsTheme }) {
+    const date = require$$0.useMemo(() => _date || new Date(), [_date]);
+    const [value, setValue] = require$$0.useState(formControl?.value ?? date.getFullYear());
+    const [year, setYear] = require$$0.useState(formControl?.value ?? date.getFullYear());
+    const [component, setComponent] = require$$0.useState(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}));
+    const createPickerOptions = require$$0.useCallback(() => {
+        return {
+            date,
+            year,
+            minDate,
+            maxDate
+        };
+    }, [date, year, minDate, maxDate]);
     const [template, setTemplate] = require$$0.useState(components.createYearPicker(createPickerOptions()));
     require$$0.useEffect(() => {
         const options = createPickerOptions(); // YearPickerProps
         const year = components.verifyYearPicker(options);
-        year
-            ? setYearValue(year)
-            : setTemplate(components.createYearPicker(createPickerOptions()));
+        year ? setYearValue(year) : setTemplate(components.createYearPicker(options));
     }, [date, year, value, minDate, maxDate]);
+    require$$0.useEffect(() => {
+        setComponent(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: template.years.map((year, index) => (jsxRuntimeExports.jsx(RlsPickerYearItem, { year: year, onSelect: onSelect, disabled: disabled }, index))) }));
+    }, [template.years]);
     require$$0.useEffect(() => {
         const year = components.verifyYearPicker(createPickerOptions());
         commons.itIsDefined(year)
             ? formControl?.setValue(year)
-            : setValue(formControl?.value || currentDate.getFullYear());
+            : setValue(formControl?.value ?? date.getFullYear());
     }, [formControl?.value]);
-    function createPickerOptions() {
-        return {
-            date: currentDate,
-            year,
-            minDate,
-            maxDate
-        };
-    }
-    function setYearValue(value) {
+    const setYearValue = require$$0.useCallback((value) => {
         formControl ? formControl.setValue(value) : setValue(value);
         setYear(value);
-    }
-    function onClickPrev() {
-        setYear(year - 8);
-    }
-    function onClickNext() {
-        setYear(year + 8);
-    }
-    function onChange(value) {
+    }, [formControl]);
+    const onClickPrev = require$$0.useCallback(() => {
+        setYear((year) => year - 8);
+    }, []);
+    const onClickNext = require$$0.useCallback(() => {
+        setYear((year) => year + 8);
+    }, []);
+    const onSelect = require$$0.useCallback((value) => {
         setYearValue(value);
         onValue && onValue(value);
-    }
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-year", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-year__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-year__action rls-picker-year__action--prev", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "arrow-ios-left", onClick: onClickPrev, disabled: !template.canPrevious || disabledPicker }) }), jsxRuntimeExports.jsxs("label", { className: "rls-title-bold", children: [template.minRange, " - ", template.maxRange] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-year__action rls-picker-year__action--next", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "arrow-ios-right", onClick: onClickNext, disabled: !template.canNext || disabledPicker }) })] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-year__component", children: template.years.map(({ value, disabled, focused, selected }, index) => (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-picker-year__year', {
-                        disabled: disabled || disabledPicker,
-                        focused,
-                        selected
-                    }), onClick: value && !disabledPicker
-                        ? () => {
-                            onChange(value);
-                        }
-                        : undefined, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-year__year__span rls-body1-medium", children: value || '????' }) }, index))) })] }));
+    }, [setYearValue, onValue]);
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-year", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-year__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-year__action rls-picker-year__action--prev", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "arrow-ios-left", onClick: onClickPrev, disabled: !template.canPrevious || disabled }) }), jsxRuntimeExports.jsxs("label", { className: "rls-title-bold", children: [template.minRange, " - ", template.maxRange] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-year__action rls-picker-year__action--next", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "arrow-ios-right", onClick: onClickNext, disabled: !template.canNext || disabled }) })] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-year__component", children: component })] }));
 }
 
 function RlsToolbar({ actions, children, subtitle }) {
@@ -2095,7 +2228,10 @@ function RlsToolbar({ actions, children, subtitle }) {
 }
 
 function RlsCard({ children, outline, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("div", { className: useRenderClassStatus('rls-card', { outline }), "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-card__content", children: children }) }));
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-card', { outline });
+    }, [outline]);
+    return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-card__content", children: children }) }));
 }
 
 const reactI18n = i18n.i18n({
@@ -2128,7 +2264,10 @@ class ConfirmationResult extends commons.PartialSealed {
     }
 }
 function RlsConfirmation({ approved, content, reject, rlsTheme, subtitle, title, visible }) {
-    return (jsxRuntimeExports.jsxs("div", { className: useRenderClassStatus('rls-confirmation', { visible }), "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__component", children: [jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__header", children: [title && jsxRuntimeExports.jsx("div", { className: "rls-confirmation__title", children: title }), subtitle && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__subtitle", children: subtitle }))] }), jsxRuntimeExports.jsx("div", { className: "rls-confirmation__body", children: content && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__message", children: content })) }), (approved || reject) && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__footer", children: jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__actions", children: [approved && (jsxRuntimeExports.jsx(RlsButton, { identifier: approved.identifier, type: "raised", onClick: approved.onClick, children: approved.label })), reject && (jsxRuntimeExports.jsx(RlsButton, { identifier: reject.identifier, type: "outline", onClick: reject.onClick, children: reject.label }))] }) }))] }), jsxRuntimeExports.jsx("div", { className: "rls-confirmation__backdrop" })] }));
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-confirmation', { visible });
+    }, [visible]);
+    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__component", children: [jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__header", children: [title && jsxRuntimeExports.jsx("div", { className: "rls-confirmation__title", children: title }), subtitle && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__subtitle", children: subtitle }))] }), jsxRuntimeExports.jsx("div", { className: "rls-confirmation__body", children: content && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__message", children: content })) }), (approved || reject) && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__footer", children: jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__actions", children: [approved && (jsxRuntimeExports.jsx(RlsButton, { identifier: approved.identifier, type: "raised", onClick: approved.onClick, children: approved.label })), reject && (jsxRuntimeExports.jsx(RlsButton, { identifier: reject.identifier, type: "outline", onClick: reject.onClick, children: reject.label }))] }) }))] }), jsxRuntimeExports.jsx("div", { className: "rls-confirmation__backdrop" })] }));
 }
 function useConfirmation() {
     const [config, setConfig] = require$$0.useState({});
@@ -2174,53 +2313,218 @@ function RlsDatatableHeader({ children, identifier }) {
     return (jsxRuntimeExports.jsx("tr", { id: identifier, className: "rls-datatable__header", children: children }));
 }
 function RlsDatatableTitle({ children, className, control, identifier }) {
-    return (jsxRuntimeExports.jsx("th", { id: identifier, className: useRenderClassStatus('rls-datatable__title', { control }, className).trim(), children: children }));
+    const classDatatableName = require$$0.useMemo(() => {
+        return renderClassStatus('rls-datatable__title', { control }, className);
+    }, [control, className]);
+    return (jsxRuntimeExports.jsx("th", { id: identifier, className: classDatatableName, children: children }));
 }
 function RlsDatatableSubheader({ children, className, identifier }) {
-    return (jsxRuntimeExports.jsx("tr", { id: identifier, className: useRenderClassStatus('rls-datatable__subheader', {}, className).trim(), children: children }));
+    const classDatatableName = require$$0.useMemo(() => {
+        return renderClassStatus('rls-datatable__subheader', {}, className);
+    }, [className]);
+    return (jsxRuntimeExports.jsx("tr", { id: identifier, className: classDatatableName, children: children }));
 }
 function RlsDatatableRecord({ children, className, error, identifier, info, successs, warning }) {
-    return (jsxRuntimeExports.jsx("tr", { id: identifier, className: useRenderClassStatus('rls-datatable__record', { error, info, successs, warning }, className).trim(), children: children }));
+    const classDatatableName = require$$0.useMemo(() => {
+        return renderClassStatus('rls-datatable__record', { error, info, successs, warning }, className);
+    }, [error, info, successs, warning, className]);
+    return (jsxRuntimeExports.jsx("tr", { id: identifier, className: classDatatableName, children: children }));
 }
 function RlsDatatableTotals({ children, className, error, identifier, info, successs, warning }) {
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: useRenderClassStatus('rls-datatable__totals', { error, info, successs, warning }, className).trim(), children: children }));
+    const classDatatableName = require$$0.useMemo(() => {
+        return renderClassStatus('rls-datatable__totals', { error, info, successs, warning }, className);
+    }, [error, info, successs, warning, className]);
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: classDatatableName, children: children }));
 }
 function RlsDatatableCell({ children, className, control, identifier, overflow }) {
-    return (jsxRuntimeExports.jsx("th", { id: identifier, className: useRenderClassStatus('rls-datatable__cell', { control, overflow }, className).trim(), children: children }));
+    const classDatatableName = require$$0.useMemo(() => {
+        return renderClassStatus('rls-datatable__cell', { control, overflow }, className);
+    }, [control, overflow, className]);
+    return (jsxRuntimeExports.jsx("th", { id: identifier, className: classDatatableName, children: children }));
 }
 function RlsDatatableData({ children, className, control, identifier, overflow }) {
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: useRenderClassStatus('rls-datatable__data', { control, overflow }, className).trim(), children: children }));
+    const classDatatableName = require$$0.useMemo(() => {
+        return renderClassStatus('rls-datatable__data', { control, overflow }, className);
+    }, [control, overflow, className]);
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: classDatatableName, children: children }));
 }
 function RlsDatatable({ children, datatable, footer, header, identifier, rlsTheme, summary, toolbar }) {
-    return (jsxRuntimeExports.jsxs("div", { className: useRenderClassStatus('rls-datatable', {
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-datatable', {
             scrolleable: datatable?.scrolleable
-        }), "rls-theme": rlsTheme, children: [toolbar && jsxRuntimeExports.jsx("div", { className: "rls-datatable__toolbar", children: toolbar }), jsxRuntimeExports.jsxs("table", { id: identifier, children: [header && jsxRuntimeExports.jsx("thead", { className: "rls-datatable__head", children: header }), jsxRuntimeExports.jsx("tbody", { ref: datatable?.tableRef, className: "rls-datatable__body", children: children })] }), summary && jsxRuntimeExports.jsx("div", { className: "rls-datatable__summary", children: summary }), footer && jsxRuntimeExports.jsx("div", { className: "rls-datatable__footer", children: footer })] }));
+        });
+    }, [datatable]);
+    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [toolbar && jsxRuntimeExports.jsx("div", { className: "rls-datatable__toolbar", children: toolbar }), jsxRuntimeExports.jsxs("table", { id: identifier, children: [header && jsxRuntimeExports.jsx("thead", { className: "rls-datatable__head", children: header }), jsxRuntimeExports.jsx("tbody", { ref: datatable?.tableRef, className: "rls-datatable__body", children: children })] }), summary && jsxRuntimeExports.jsx("div", { className: "rls-datatable__summary", children: summary }), footer && jsxRuntimeExports.jsx("div", { className: "rls-datatable__footer", children: footer })] }));
 }
 
-const DURATION_ANIMATION$1 = 240;
-const MAX_ELEMENTS = 6;
-function useFieldAutocomplete(props) {
-    const controller = useListController(props);
-    const [coincidences, setCoincidences] = require$$0.useState([]);
-    const [pattern, setPattern] = require$$0.useState('');
-    const currentStore = require$$0.useRef({
-        coincidences: [],
-        pattern: '',
-        previous: null
-    });
-    require$$0.useEffect(() => {
-        refreshCoincidences(pattern, true);
+function createObserver(options) {
+    const { setScrolleable, table } = options;
+    const observer = new ResizeObserver(() => {
+        const scrollHeight = table.scrollHeight || 0;
+        const clientHeight = table.clientHeight || 0;
+        setScrolleable(scrollHeight > clientHeight);
+    });
+    observer.observe(table);
+    return observer;
+}
+function useDatatable() {
+    const [scrolleable, setScrolleable] = require$$0.useState(false);
+    const tableRef = require$$0.useRef(null);
+    require$$0.useEffect(() => {
+        const observer = tableRef?.current &&
+            createObserver({ setScrolleable, table: tableRef?.current });
+        return () => {
+            observer?.disconnect();
+        };
+    }, []);
+    return { scrolleable, tableRef };
+}
+
+function useListController(props) {
+    const { suggestions, automatic, formControl, reference } = props;
+    const listIsOpen = require$$0.useRef(false);
+    const contentRef = require$$0.useRef(null);
+    const listRef = require$$0.useRef(null);
+    const inputRef = require$$0.useRef(null);
+    const [collection, setCollection] = require$$0.useState(new components.ListCollection(suggestions));
+    const [state, refreshState] = require$$0.useState({
+        focused: false,
+        higher: false,
+        value: '',
+        modalIsVisible: false
+    });
+    const position = require$$0.useRef(0);
+    const valueProtected = require$$0.useRef();
+    const changeValueInternal = require$$0.useRef(false);
+    require$$0.useEffect(() => {
+        function onCloseSuggestions({ target }) {
+            !contentRef?.current?.contains(target) &&
+                refreshState((state) => ({ ...state, modalIsVisible: false }));
+        }
+        document.addEventListener('click', onCloseSuggestions);
+        return () => {
+            document.removeEventListener('click', onCloseSuggestions);
+        };
+    }, []);
+    require$$0.useEffect(() => {
+        if (!listIsOpen.current && state.modalIsVisible) {
+            listIsOpen.current = true;
+        }
+        if (listIsOpen.current && !state.modalIsVisible) {
+            formControl?.touch();
+        }
+    }, [state.modalIsVisible]);
+    require$$0.useEffect(() => {
+        setCollection(new components.ListCollection(suggestions, reference));
+    }, [suggestions]);
+    require$$0.useEffect(() => {
+        if (!changeValueInternal.current) {
+            if (formControl?.value) {
+                const element = collection.find(formControl.value);
+                if (!element) {
+                    valueProtected.current = formControl.value;
+                    automatic
+                        ? setFormValue(collection.value[0], true)
+                        : setFormValue(undefined);
+                }
+                else {
+                    refreshState((state) => ({ ...state, value: element.description }));
+                }
+            }
+            else if (valueProtected.current) {
+                const element = collection.find(valueProtected.current);
+                element && setFormValue(element);
+            }
+            else {
+                automatic && setFormValue(collection.value[0], true);
+            }
+        }
+        changeValueInternal.current = false;
+    }, [collection, formControl?.value]);
+    const setState = require$$0.useCallback((state) => {
+        const _state = state.modalIsVisible
+            ? {
+                ...state,
+                higher: components.locationListCanTop(contentRef.current, listRef.current)
+            }
+            : state;
+        refreshState((state) => ({ ...state, ..._state }));
+    }, []);
+    const setFormValue = require$$0.useCallback((element, initialValue = false) => {
+        refreshState((state) => ({
+            ...state,
+            value: element?.description || ''
+        }));
+        changeValueInternal.current = true;
+        initialValue
+            ? formControl?.setInitialValue(element?.value)
+            : formControl?.setValue(element?.value);
+    }, [formControl]);
+    const navigationInput = require$$0.useCallback((event) => {
+        if (state.modalIsVisible) {
+            const _position = components.navigationListFromInput({
+                content: contentRef.current,
+                event: event,
+                list: listRef.current
+            });
+            position.current = _position ?? 0;
+        }
+    }, [state.modalIsVisible]);
+    const navigationElement = require$$0.useCallback((event) => {
+        position.current = components.navigationListFromElement({
+            content: contentRef.current,
+            event: event,
+            input: inputRef.current,
+            list: listRef.current,
+            position: position.current
+        });
+    }, [state.modalIsVisible]);
+    return {
+        ...state,
+        contentRef,
+        inputRef,
+        listRef,
+        navigationElement,
+        navigationInput,
+        setFormValue,
+        setState
+    };
+}
+
+const DURATION_ANIMATION$1 = 240;
+const MAX_ELEMENTS = 6;
+function useFieldAutocomplete(props) {
+    const controller = useListController(props);
+    const [coincidences, setCoincidences] = require$$0.useState([]);
+    const [pattern, setPattern] = require$$0.useState('');
+    const currentStore = require$$0.useRef({
+        coincidences: [],
+        pattern: '',
+        previous: null
+    });
+    const refreshCoincidences = require$$0.useCallback((suggestions, pattern, reboot = false) => {
+        const { collection, store } = components.createAutocompleteStore({
+            pattern,
+            suggestions,
+            reboot,
+            store: currentStore.current
+        });
+        currentStore.current = store;
+        setCoincidences(collection.slice(0, MAX_ELEMENTS));
+    }, []);
+    require$$0.useEffect(() => {
+        refreshCoincidences(props.suggestions, pattern, true);
     }, [props.suggestions]);
     require$$0.useEffect(() => {
-        refreshCoincidences(pattern);
+        refreshCoincidences(props.suggestions, pattern);
     }, [pattern]);
-    function onFocusInput() {
+    const onFocusInput = require$$0.useCallback(() => {
         controller.setState({ focused: true });
-    }
-    function onBlurInput() {
+    }, [controller.setState]);
+    const onBlurInput = require$$0.useCallback(() => {
         controller.setState({ focused: false });
-    }
-    function onKeydownInput(event) {
+    }, [controller.setState]);
+    const onKeydownInput = require$$0.useCallback((event) => {
         switch (event.code) {
             case 'Escape':
             case 'Tab':
@@ -2230,14 +2534,14 @@ function useFieldAutocomplete(props) {
                 controller.navigationInput(event);
                 break;
         }
-    }
-    function onClickControl() {
+    }, [controller.setState, controller.navigationInput]);
+    const onClickControl = require$$0.useCallback(() => {
         controller.setState({ modalIsVisible: true });
         setTimeout(() => {
             controller.inputRef?.current?.focus();
         }, DURATION_ANIMATION$1);
-    }
-    function onClickAction() {
+    }, [controller.setState]);
+    const onClickAction = require$$0.useCallback(() => {
         if (controller.value) {
             controller.setState({ modalIsVisible: false });
             controller.setFormValue(undefined);
@@ -2246,44 +2550,43 @@ function useFieldAutocomplete(props) {
         else {
             onClickControl();
         }
-    }
-    function onClickBackdrop() {
+    }, [
+        controller.value,
+        controller.setState,
+        controller.setFormValue,
+        props.onValue
+    ]);
+    const onClickBackdrop = require$$0.useCallback(() => {
         controller.setState({ modalIsVisible: false });
-    }
-    function onClickElement(element) {
+    }, [controller.setState]);
+    const onChange = require$$0.useCallback((element) => {
+        if (props.onSelect) {
+            controller.setState({ modalIsVisible: false });
+            element.value && props.onSelect(element.value);
+        }
+        else {
+            controller.setState({ modalIsVisible: false });
+            controller.setFormValue(element);
+        }
+        props.onValue && props.onValue(element.value);
+    }, [
+        controller.setState,
+        controller.setFormValue,
+        props.onSelect,
+        props.onValue
+    ]);
+    const onClickElement = require$$0.useCallback((element) => {
         return () => {
             onChange(element);
         };
-    }
-    function onKeydownElement(element) {
+    }, []);
+    const onKeydownElement = require$$0.useCallback((element) => {
         return (event) => {
             event.code === 'Enter'
                 ? onChange(element)
                 : controller.navigationElement(event);
         };
-    }
-    function onChange(element) {
-        const { onSelect, onValue } = props;
-        if (onSelect) {
-            controller.setState({ modalIsVisible: false });
-            element.value && onSelect(element.value);
-        }
-        else {
-            controller.setState({ modalIsVisible: false });
-            controller.setFormValue(element);
-        }
-        onValue && onValue(element.value);
-    }
-    function refreshCoincidences(pattern, reboot = false) {
-        const { collection, store } = components.createAutocompleteStore({
-            pattern,
-            suggestions: props.suggestions,
-            reboot,
-            store: currentStore.current
-        });
-        currentStore.current = store;
-        setCoincidences(collection.slice(0, MAX_ELEMENTS));
-    }
+    }, [controller.navigationElement]);
     return {
         ...controller,
         coincidences,
@@ -2303,227 +2606,309 @@ function useFieldAutocomplete(props) {
 function RlsFieldAutocompleteTemplate(props) {
     const autocomplete = useFieldAutocomplete(props);
     const { render, children, formControl, msgErrorDisabled, onSearch, placeholder, rlsTheme, searching } = props;
-    const _disabled = formControl?.disabled || props.disabled;
-    const className = useRenderClassStatus('rls-field-box', {
-        focused: autocomplete.focused && !_disabled,
-        error: formControl?.wrong,
-        disabled: _disabled,
-        selected: !!autocomplete.value
-    }, 'rls-field-list rls-field-autocomplete');
-    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.contentRef, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__control", readOnly: true, disabled: _disabled, placeholder: placeholder, value: autocomplete.value, onClick: autocomplete.onClickControl }), jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: _disabled, onClick: autocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: autocomplete.value ? 'trash-2' : 'arrow-ios-down' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-field-list__suggestions', {
-                    higher: autocomplete.higher,
-                    visible: autocomplete.modalIsVisible
-                }), children: autocomplete.modalIsVisible && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: autocomplete.listRef, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: autocomplete.inputRef, className: "rls-field-list__ul__control", type: "text", placeholder: reactI18n('listInputPlaceholder'), value: autocomplete.pattern, onChange: (event) => {
-                                                    autocomplete.setPattern(event.target.value);
-                                                }, disabled: _disabled || searching, onFocus: autocomplete.onFocusInput, onBlur: autocomplete.onBlurInput, onKeyDown: autocomplete.onKeydownInput }), onSearch && (jsxRuntimeExports.jsx("button", { disabled: _disabled || searching, onClick: () => {
-                                                    onSearch(autocomplete.pattern);
-                                                }, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] }), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), autocomplete.coincidences.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: autocomplete.onClickElement(element), onKeyDown: autocomplete.onKeydownElement(element), children: render(element) }, index))), !autocomplete.coincidences.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold truncate", children: reactI18n('listEmptyTitle') }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: autocomplete.onClickBackdrop })] })) })] }));
+    const [labels, setLabels] = require$$0.useState({
+        listEmptyDescription: reactI18n('listEmptyDescription'),
+        listEmptyTitle: reactI18n('listEmptyTitle'),
+        listInputPlaceholder: reactI18n('listInputPlaceholder')
+    });
+    require$$0.useEffect(() => {
+        return i18n.i18nSubscribe(() => {
+            setLabels({
+                listEmptyDescription: reactI18n('listEmptyDescription'),
+                listEmptyTitle: reactI18n('listEmptyTitle'),
+                listInputPlaceholder: reactI18n('listInputPlaceholder')
+            });
+        });
+    }, []);
+    const _disabled = require$$0.useMemo(() => {
+        return formControl?.disabled || props.disabled;
+    }, [formControl?.disabled, props.disabled]);
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-field-box', {
+            focused: autocomplete.focused && !_disabled,
+            error: formControl?.wrong,
+            disabled: _disabled,
+            selected: !!autocomplete.value
+        }, 'rls-field-list rls-field-autocomplete');
+    }, [formControl?.wrong, autocomplete.value, autocomplete.focused, _disabled]);
+    const classNameList = require$$0.useMemo(() => {
+        return renderClassStatus('rls-field-list__suggestions', {
+            higher: autocomplete.higher,
+            visible: autocomplete.modalIsVisible
+        });
+    }, [autocomplete.higher, autocomplete.modalIsVisible]);
+    const onInputSearch = require$$0.useCallback((event) => {
+        autocomplete.setPattern(event.target.value);
+    }, []);
+    const onClickSearch = require$$0.useCallback(() => {
+        onSearch && onSearch(autocomplete.pattern);
+    }, [onSearch, autocomplete.pattern]);
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.contentRef, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__control", readOnly: true, disabled: _disabled, placeholder: placeholder, value: autocomplete.value, onClick: autocomplete.onClickControl }), jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: _disabled, onClick: autocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: autocomplete.value ? 'trash-2' : 'arrow-ios-down' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx("div", { className: classNameList, children: autocomplete.modalIsVisible && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: autocomplete.listRef, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: autocomplete.inputRef, className: "rls-field-list__ul__control", type: "text", placeholder: labels.listInputPlaceholder, value: autocomplete.pattern, onChange: onInputSearch, disabled: _disabled || searching, onFocus: autocomplete.onFocusInput, onBlur: autocomplete.onBlurInput, onKeyDown: autocomplete.onKeydownInput }), onSearch && (jsxRuntimeExports.jsx("button", { disabled: _disabled || searching, onClick: onClickSearch, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] }), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), autocomplete.coincidences.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: autocomplete.onClickElement(element), onKeyDown: autocomplete.onKeydownElement(element), children: render(element) }, index))), !autocomplete.coincidences.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: autocomplete.onClickBackdrop })] })) })] }));
 }
 function RlsFieldAutocomplete(props) {
     return (jsxRuntimeExports.jsx(RlsFieldAutocompleteTemplate, { ...props, render: (element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })) }));
 }
 
 function RlsModal({ children, overflow, visible, rlsTheme }) {
-    return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: useRenderClassStatus('rls-modal', { overflow, visible }), "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal__backdrop" })] }), document.body);
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-modal', { overflow, visible });
+    }, [overflow, visible]);
+    return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal__backdrop" })] }), document.body);
 }
 
-const FORMAT_TITLE = '{dw}, {mx} {dd} de {aa}';
+const formatTitle = '{dw}, {mx} {dd} de {aa}';
 function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
-    const today = new Date(); // Initial current date in component
-    const dateInitial = formControl?.value || date || today;
-    const yearControl = reactForms.useReactControl(dateInitial.getFullYear());
-    const dayControl = reactForms.useReactControl(dateInitial.getDate());
-    const monthControl = reactForms.useReactControl(dateInitial.getMonth());
-    const [value, setValue] = require$$0.useState(dateInitial);
+    const today = require$$0.useRef(new Date()); // Initial current date in component
+    const _date = require$$0.useMemo(() => {
+        return formControl?.value ?? date ?? today.current;
+    }, [formControl?.value, date]);
+    const yearControl = reactForms.useReactControl(_date.getFullYear());
+    const dayControl = reactForms.useReactControl(_date.getDate());
+    const monthControl = reactForms.useReactControl(_date.getMonth());
+    const [value, setValue] = require$$0.useState(_date);
     const [visibility, setVisibility] = require$$0.useState('DAY');
+    const [labels, setLabels] = require$$0.useState({
+        dateActionCancel: reactI18n('dateActionCancel'),
+        dateActionSelect: reactI18n('dateActionSelect'),
+        dateActionToday: reactI18n('dateActionToday')
+    });
+    const classNameComponent = require$$0.useMemo(() => {
+        return renderClassStatus('rls-picker-date__component', {
+            day: visibility === 'DAY',
+            month: visibility === 'MONTH',
+            year: visibility === 'YEAR'
+        });
+    }, [visibility]);
+    const title = require$$0.useMemo(() => {
+        return dates.dateFormatTemplate(_date, formatTitle);
+    }, [_date]);
+    const itIsDisabledToday = require$$0.useMemo(() => components.dateOutRange({
+        date: today.current,
+        maxDate,
+        minDate
+    }), [today.current, maxDate, minDate]);
     require$$0.useEffect(() => {
-        const dateRange = components.verifyDateRange({
-            date: formControl?.value || date || today,
-            minDate,
-            maxDate
+        const date = components.verifyDateRange({ date: _date, minDate, maxDate });
+        setValue(date);
+        formControl?.setValue(date);
+        return i18n.i18nSubscribe(() => {
+            setLabels({
+                dateActionCancel: reactI18n('dateActionCancel'),
+                dateActionSelect: reactI18n('dateActionSelect'),
+                dateActionToday: reactI18n('dateActionToday')
+            });
         });
-        setValue(dateRange);
-        formControl?.setValue(dateRange);
     }, []);
     require$$0.useEffect(() => {
-        commons.itIsDefined(yearControl.value) &&
-            setValue(dates.assignYearInDate(value, yearControl.value));
-    }, [yearControl.value]);
-    require$$0.useEffect(() => {
-        commons.itIsDefined(monthControl.value) &&
-            setValue(dates.assignMonthInDate(value, monthControl.value));
-    }, [monthControl.value]);
-    require$$0.useEffect(() => {
-        commons.itIsDefined(dayControl.value) &&
-            setValue(dates.assignDayInDate(value, dayControl.value));
-    }, [dayControl.value]);
-    function onVisibilityDay() {
+        setValue(new Date(yearControl.value, monthControl.value, dayControl.value));
+    }, [yearControl.value, monthControl.value, dayControl.value]);
+    const onVisibilityDay = require$$0.useCallback(() => {
         setVisibility('DAY');
-    }
-    function onVisibilityMonth() {
+    }, []);
+    const onVisibilityMonth = require$$0.useCallback(() => {
         setVisibility('MONTH');
-    }
-    function onVisibilityYear() {
+    }, []);
+    const onVisibilityYear = require$$0.useCallback(() => {
         setVisibility('YEAR');
-    }
-    function onCancel() {
+    }, []);
+    const onCancel = require$$0.useCallback(() => {
         onListener && onListener({ event: components.PickerListenerEvent.Cancel });
-    }
-    function onToday() {
-        yearControl.setValue(today.getFullYear());
-        dayControl.setValue(today.getDate());
-        monthControl.setValue(today.getMonth());
-        formControl?.setValue(today);
-        onListener && onListener({ event: components.PickerListenerEvent.Now, value: today });
-    }
-    function onSelect() {
+    }, [onListener]);
+    const onToday = require$$0.useCallback(() => {
+        yearControl.setValue(today.current.getFullYear());
+        dayControl.setValue(today.current.getDate());
+        monthControl.setValue(today.current.getMonth());
+        formControl?.setValue(today.current);
+        onListener &&
+            onListener({
+                event: components.PickerListenerEvent.Now,
+                value: today.current
+            });
+    }, [today.current, formControl, onListener]);
+    const onSelect = require$$0.useCallback(() => {
         formControl?.setValue(value);
-        onListener && onListener({ event: components.PickerListenerEvent.Select, value });
-    }
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title rls-picker-date__title--description", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: dates.dateFormatTemplate(dateInitial, FORMAT_TITLE) }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title rls-picker-date__title--year", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), jsxRuntimeExports.jsx(RlsPickerMonthTitle, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityMonth })] }), jsxRuntimeExports.jsxs("div", { className: useRenderClassStatus('rls-picker-date__component', {
-                    day: visibility === 'DAY',
-                    month: visibility === 'MONTH',
-                    year: visibility === 'YEAR'
-                }), children: [jsxRuntimeExports.jsx(RlsPickerDay, { formControl: dayControl, date: dateInitial, month: monthControl.value, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, date: dateInitial, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, date: dateInitial, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), !automatic && (jsxRuntimeExports.jsx("div", { className: "rls-picker-date__footer", children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "ghost", onClick: onCancel, children: reactI18n('dateActionCancel') }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--today", children: jsxRuntimeExports.jsx(RlsButton, { type: "ghost", onClick: onToday, disabled: components.dateOutRange({ date: today, maxDate, minDate }), children: reactI18n('dateActionToday') }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "raised", onClick: onSelect, children: reactI18n('dateActionSelect') }) })] }) }))] }));
+        onListener &&
+            onListener({
+                event: components.PickerListenerEvent.Select,
+                value
+            });
+    }, [formControl, value, onListener]);
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title rls-picker-date__title--description", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: title }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title rls-picker-date__title--year", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), jsxRuntimeExports.jsx(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityMonth })] }), jsxRuntimeExports.jsxs("div", { className: classNameComponent, children: [jsxRuntimeExports.jsx(RlsPickerDay, { formControl: dayControl, date: _date, month: monthControl.value, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, date: _date, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, date: _date, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), !automatic && (jsxRuntimeExports.jsx("div", { className: "rls-picker-date__footer", children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "ghost", onClick: onCancel, children: labels.dateActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--today", children: jsxRuntimeExports.jsx(RlsButton, { type: "ghost", onClick: onToday, disabled: itIsDisabledToday, children: labels.dateActionToday }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "raised", onClick: onSelect, children: labels.dateActionSelect }) })] }) }))] }));
 }
 
-const FORMAT_DATE = '{dd}/{mx}/{aa}';
-function RlsFieldDate({ children, date, disabled, formControl, format, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, rlsTheme, value: defaultValue }) {
-    const today = new Date(); // Initial current date in component
-    const [value, setValue] = require$$0.useState(formControl?.value || defaultValue);
+const formatDate = '{dd}/{mx}/{aa}';
+function RlsFieldDate({ children, date, disabled, formControl, format, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, rlsTheme, value: _value }) {
+    const today = require$$0.useRef(new Date()); // Initial current date in component
+    const [value, setValue] = require$$0.useState(formControl?.value ?? _value);
     const [modalIsVisible, setModalIsVisible] = require$$0.useState(false);
+    const _disabled = require$$0.useMemo(() => {
+        return formControl?.disabled || disabled;
+    }, [formControl?.disabled, disabled]);
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-field-box', { disabled: _disabled });
+    }, [_disabled]);
+    const { icon, valueInput } = require$$0.useMemo(() => {
+        return {
+            icon: value ? 'trash-2' : 'calendar',
+            valueInput: value ? dates.dateFormatTemplate(value, format || formatDate) : ''
+        };
+    }, [value]);
     require$$0.useEffect(() => {
-        const dateRange = components.verifyDateRange({
-            date: formControl?.value || date || today,
+        const _date = components.verifyDateRange({
+            date: formControl?.value ?? date ?? today.current,
             minDate,
             maxDate
         });
-        setValue(dateRange);
-        formControl?.setValue(dateRange);
+        setValue(_date);
+        formControl?.setValue(_date);
+    }, []);
+    const onClickInput = require$$0.useCallback(() => {
+        setModalIsVisible(true);
     }, []);
-    function onChange(value) {
+    const onChange = require$$0.useCallback((value) => {
         setValue(value);
         onValue && onValue(value);
-    }
-    function onClickInput() {
-        setModalIsVisible(true);
-    }
-    function onClickAction() {
+    }, [onValue]);
+    const onClickAction = require$$0.useCallback(() => {
         if (value) {
-            formControl?.setValue(defaultValue);
+            formControl?.setValue(_value);
             formControl?.touch();
-            onChange(defaultValue);
+            onChange(_value);
         }
         else {
             setModalIsVisible(true);
         }
-    }
-    const valueInput = value
-        ? dates.dateFormatTemplate(value, format || FORMAT_DATE)
-        : '';
-    const _disabled = formControl?.disabled || disabled;
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: useRenderClassStatus('rls-field-box', { disabled: _disabled }), children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-date__control", type: "text", value: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: _disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: _disabled, maxDate: maxDate, minDate: minDate, onListener: ({ event, value }) => {
-                        event !== components.PickerListenerEvent.Cancel && onChange(value);
-                        formControl?.touch();
-                        setModalIsVisible(false);
-                    } }) })] }));
-}
-
-function RlsPickerDateRange({ automatic, date: datePicker, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
-    const dateInitial = dates.normalizeMinTime(datePicker || new Date());
-    const rangeInitial = formControl?.value || dates.DateRange.now();
-    const yearControl = reactForms.useReactControl(dateInitial.getFullYear());
-    const monthControl = reactForms.useReactControl(dateInitial.getMonth());
-    const dayControl = reactForms.useReactControl(rangeInitial);
-    const [value, setValue] = require$$0.useState(rangeInitial);
-    const [date, setDate] = require$$0.useState(dateInitial);
+    }, [value, formControl, _value, onChange]);
+    const onListener = require$$0.useCallback(({ event, value }) => {
+        event !== components.PickerListenerEvent.Cancel && onChange(value);
+        formControl?.touch();
+        setModalIsVisible(false);
+    }, [formControl, onChange]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-date__control", type: "text", value: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: _disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: _disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: _disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
+}
+
+function RlsPickerDateRange({ automatic, date: _picker, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
+    const _date = require$$0.useMemo(() => dates.normalizeMinTime(_picker ?? new Date()), [_picker]);
+    const _range = require$$0.useMemo(() => formControl?.value ?? dates.DateRange.now(), [formControl?.value]);
+    const yearControl = reactForms.useReactControl(_date.getFullYear());
+    const monthControl = reactForms.useReactControl(_date.getMonth());
+    const rangeControl = reactForms.useReactControl(_range);
+    const [value, setValue] = require$$0.useState(_range);
+    const [date, setDate] = require$$0.useState(_date);
     const [visibility, setVisibility] = require$$0.useState('DAY');
+    const [labels, setLabels] = require$$0.useState({
+        dateActionCancel: reactI18n('dateActionCancel'),
+        dateActionSelect: reactI18n('dateActionSelect')
+    });
+    const classNameComponent = require$$0.useMemo(() => {
+        return renderClassStatus('rls-picker-date-range__component', {
+            day: visibility === 'DAY',
+            month: visibility === 'MONTH',
+            year: visibility === 'YEAR'
+        });
+    }, [visibility]);
+    const classNameFooter = require$$0.useMemo(() => {
+        return renderClassStatus('rls-picker-date-range__footer', { automatic });
+    }, [automatic]);
+    const title = require$$0.useMemo(() => rangeFormatTemplate(value), [value]);
+    require$$0.useEffect(() => {
+        return i18n.i18nSubscribe(() => {
+            setLabels({
+                dateActionCancel: reactI18n('dateActionCancel'),
+                dateActionSelect: reactI18n('dateActionSelect')
+            });
+        });
+    }, []);
     require$$0.useEffect(() => {
-        setDate((prevValue) => {
-            return typeof yearControl.value === 'number'
-                ? dates.assignYearInDate(prevValue, yearControl.value)
-                : prevValue;
+        setDate((date) => {
+            return commons.itIsDefined(yearControl.value)
+                ? dates.assignYearInDate(date, yearControl.value)
+                : date;
         });
     }, [yearControl.value]);
     require$$0.useEffect(() => {
-        setDate((prevValue) => {
-            return typeof monthControl.value === 'number'
-                ? dates.assignMonthInDate(prevValue, monthControl.value)
-                : prevValue;
+        setDate((date) => {
+            return commons.itIsDefined(monthControl.value)
+                ? dates.assignMonthInDate(date, monthControl.value)
+                : date;
         });
     }, [monthControl.value]);
     require$$0.useEffect(() => {
-        dayControl.value && setValue(dayControl.value);
+        rangeControl.value && setValue(rangeControl.value);
         setVisibility('DAY');
-    }, [dayControl.value]);
-    function onVisibilityDay() {
+    }, [rangeControl.value]);
+    const onVisibilityDay = require$$0.useCallback(() => {
         setVisibility('DAY');
-    }
-    function onVisibilityMonth() {
+    }, []);
+    const onVisibilityMonth = require$$0.useCallback(() => {
         setVisibility('MONTH');
-    }
-    function onVisibilityYear() {
+    }, []);
+    const onVisibilityYear = require$$0.useCallback(() => {
         setVisibility('YEAR');
-    }
-    function onCancel() {
+    }, []);
+    const onCancel = require$$0.useCallback(() => {
         onListener && onListener({ event: components.PickerListenerEvent.Cancel });
-    }
-    function onSelect() {
+    }, [onListener]);
+    const onSelect = require$$0.useCallback(() => {
         formControl?.setValue(value);
         onListener && onListener({ event: components.PickerListenerEvent.Select, value });
-    }
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__title rls-picker-date-range__title--description", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: rangeFormatTemplate(value) }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__title rls-picker-date-range__title--year", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), jsxRuntimeExports.jsx(RlsPickerMonthTitle, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: visibility === 'MONTH' ? 'year' : 'month', onClick: onVisibilityMonth })] }), jsxRuntimeExports.jsxs("div", { className: useRenderClassStatus('rls-picker-date-range__component', {
-                    day: visibility === 'DAY',
-                    month: visibility === 'MONTH',
-                    year: visibility === 'YEAR'
-                }), children: [jsxRuntimeExports.jsx(RlsPickerDayRange, { formControl: dayControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), jsxRuntimeExports.jsx("div", { className: useRenderClassStatus('rls-picker-date-range__footer', {
-                    automatic
-                }), children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "ghost", onClick: onCancel, children: reactI18n('dateActionCancel') }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "raised", onClick: onSelect, children: reactI18n('dateActionSelect') }) })] }) })] }));
+    }, [formControl, value, onListener]);
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__title rls-picker-date-range__title--description", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: title }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__title rls-picker-date-range__title--year", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), jsxRuntimeExports.jsx(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: visibility === 'MONTH' ? 'year' : 'month', onClick: onVisibilityMonth })] }), jsxRuntimeExports.jsxs("div", { className: classNameComponent, children: [jsxRuntimeExports.jsx(RlsPickerDayRange, { formControl: rangeControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), jsxRuntimeExports.jsx("div", { className: classNameFooter, children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "ghost", onClick: onCancel, children: labels.dateActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "raised", onClick: onSelect, children: labels.dateActionSelect }) })] }) })] }));
 }
 
-function RlsFieldDateRange({ children, date: datePicker, disabled, formControl, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, rlsTheme, value: defaultValue }) {
-    const currentDate = datePicker || new Date();
-    const [value, setValue] = require$$0.useState(formControl?.value || defaultValue);
+function RlsFieldDateRange({ children, date: _date, disabled, formControl, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, rlsTheme, value: _value }) {
+    const currentDate = require$$0.useMemo(() => _date ?? new Date(), [_date]);
+    const [value, setValue] = require$$0.useState(formControl?.value || _value);
     const [modalIsVisible, setModalIsVisible] = require$$0.useState(false);
-    function onClickInput() {
+    const _disabled = require$$0.useMemo(() => {
+        return formControl?.disabled || disabled;
+    }, [formControl?.disabled, disabled]);
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-field-box', { disabled: _disabled });
+    }, [_disabled]);
+    const { icon, valueInput } = require$$0.useMemo(() => {
+        return {
+            icon: value ? 'trash-2' : 'calendar',
+            valueInput: value ? rangeFormatTemplate(value) : ''
+        };
+    }, [value]);
+    const onClickInput = require$$0.useCallback(() => {
         setModalIsVisible(true);
-    }
-    function onClickAction() {
+    }, []);
+    const onChange = require$$0.useCallback((value) => {
+        setValue(value);
+        onValue && onValue(value);
+    }, [onValue]);
+    const onClickAction = require$$0.useCallback(() => {
         if (value) {
-            formControl?.setValue(defaultValue);
+            formControl?.setValue(_value);
             formControl?.touch();
-            onChange(defaultValue);
+            onChange(_value);
         }
         else {
             setModalIsVisible(true);
         }
-    }
-    function onChange(value) {
-        setValue(value);
-        onValue && onValue(value);
-    }
-    const _disabled = formControl?.disabled || disabled;
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: useRenderClassStatus('rls-field-box', {
-                    disabled: _disabled
-                }), children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-date-range__control", type: "text", value: value ? rangeFormatTemplate(value) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: _disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: _disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: _disabled, maxDate: maxDate, minDate: minDate, onListener: ({ event, value }) => {
-                        event !== components.PickerListenerEvent.Cancel && onChange(value);
-                        formControl?.touch();
-                        setModalIsVisible(false);
-                    } }) })] }));
+    }, [value, formControl, _value, onChange]);
+    const onListener = require$$0.useCallback(({ event, value }) => {
+        event !== components.PickerListenerEvent.Cancel && onChange(value);
+        formControl?.touch();
+        setModalIsVisible(false);
+    }, [formControl, onChange]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-date-range__control", type: "text", value: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: _disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: _disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: _disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
 }
 
 function useFieldSelect(props) {
     const controller = useListController(props);
-    function onFocusInput() {
+    const onFocusInput = require$$0.useCallback(() => {
         controller.setState({ focused: true });
-    }
-    function onBlurInput() {
+    }, [controller.setState]);
+    const onBlurInput = require$$0.useCallback(() => {
         controller.setState({ focused: false });
-    }
-    function onClickInput() {
+    }, [controller.setState]);
+    const onClickInput = require$$0.useCallback(() => {
         controller.setState({ modalIsVisible: true });
-    }
-    function onKeydownInput(event) {
+    }, [controller.setState]);
+    const onKeydownInput = require$$0.useCallback((event) => {
         switch (event.code) {
             case 'Space':
             case 'Enter':
@@ -2537,8 +2922,8 @@ function useFieldSelect(props) {
                 controller.navigationInput(event);
                 break;
         }
-    }
-    function onClickAction() {
+    }, [controller.setState, controller.navigationInput]);
+    const onClickAction = require$$0.useCallback(() => {
         const removable = !props.unremovable && !!controller.value;
         if (removable) {
             controller.setState({ modalIsVisible: false });
@@ -2550,35 +2935,46 @@ function useFieldSelect(props) {
             controller.setState({ modalIsVisible });
             modalIsVisible && controller.inputRef?.current?.focus();
         }
-    }
-    function onClickBackdrop() {
+    }, [
+        controller.modalIsVisible,
+        controller.value,
+        controller.setState,
+        controller.setFormValue,
+        props.unremovable,
+        props.onValue
+    ]);
+    const onClickBackdrop = require$$0.useCallback(() => {
         controller.setState({ modalIsVisible: false });
-    }
-    function onClickElement(element) {
+    }, [controller.setState]);
+    const onChange = require$$0.useCallback((element) => {
+        controller.inputRef?.current?.focus();
+        if (props.onSelect) {
+            controller.setState({ modalIsVisible: false });
+            element.value && props.onSelect(element.value);
+        }
+        else {
+            controller.setFormValue(element);
+            controller.setState({ modalIsVisible: false });
+        }
+        props.onValue && props.onValue(element.value);
+    }, [
+        controller.setState,
+        controller.setFormValue,
+        props.onSelect,
+        props.onValue
+    ]);
+    const onClickElement = require$$0.useCallback((element) => {
         return () => {
             onChange(element);
         };
-    }
-    function onKeydownElement(element) {
+    }, []);
+    const onKeydownElement = require$$0.useCallback((element) => {
         return (event) => {
             event.code === 'Enter'
                 ? onChange(element)
                 : controller.navigationElement(event);
         };
-    }
-    function onChange(element) {
-        const { onSelect, onValue } = props;
-        controller.inputRef?.current?.focus();
-        if (onSelect) {
-            controller.setState({ modalIsVisible: false });
-            element.value && onSelect(element.value);
-        }
-        else {
-            controller.setFormValue(element);
-            controller.setState({ modalIsVisible: false });
-        }
-        onValue && onValue(element.value);
-    }
+    }, [controller.navigationElement]);
     return {
         ...controller,
         onBlurInput,
@@ -2595,23 +2991,45 @@ function useFieldSelect(props) {
 function RlsFieldSelectTemplate(props) {
     const select = useFieldSelect(props);
     const { render, suggestions, children, formControl, msgErrorDisabled, placeholder, rlsTheme, unremovable } = props;
-    const _disabled = formControl?.disabled || props.disabled;
-    const className = useRenderClassStatus('rls-field-box', {
-        disabled: _disabled,
-        error: formControl?.wrong,
-        focused: select.focused && !_disabled
-    }, 'rls-field-list rls-field-select');
-    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.contentRef, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { ref: select.inputRef, className: "rls-field-list__control", readOnly: true, disabled: _disabled, placeholder: placeholder, value: select.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput }), jsxRuntimeExports.jsx("button", { className: 'rls-field-list__action', disabled: _disabled, onClick: select.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: !unremovable && !!select.value ? 'close' : 'arrow-ios-down' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx("div", { className: useRenderClassStatus('rls-field-list__suggestions', {
-                    higher: select.higher,
-                    visible: select.modalIsVisible
-                }), children: select.modalIsVisible && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: select.listRef, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: select.onClickElement(element), onKeyDown: select.onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold truncate", children: reactI18n('listEmptyTitle') }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: select.onClickBackdrop })] })) })] }));
+    const [labels, setLabels] = require$$0.useState({
+        listEmptyDescription: reactI18n('listEmptyDescription'),
+        listEmptyTitle: reactI18n('listEmptyTitle')
+    });
+    require$$0.useEffect(() => {
+        return i18n.i18nSubscribe(() => {
+            setLabels({
+                listEmptyDescription: reactI18n('listEmptyDescription'),
+                listEmptyTitle: reactI18n('listEmptyTitle')
+            });
+        });
+    }, []);
+    const _disabled = require$$0.useMemo(() => {
+        return formControl?.disabled || props.disabled;
+    }, [formControl?.disabled, props.disabled]);
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-field-box', {
+            disabled: _disabled,
+            error: formControl?.wrong,
+            focused: select.focused && !_disabled
+        }, 'rls-field-list rls-field-select');
+    }, [formControl?.wrong, select.focused, _disabled]);
+    const classNameList = require$$0.useMemo(() => {
+        return renderClassStatus('rls-field-list__suggestions', {
+            higher: select.higher,
+            visible: select.modalIsVisible
+        });
+    }, [select.modalIsVisible, select.higher]);
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.contentRef, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { ref: select.inputRef, className: "rls-field-list__control", readOnly: true, disabled: _disabled, placeholder: placeholder, value: select.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput }), jsxRuntimeExports.jsx("button", { className: 'rls-field-list__action', disabled: _disabled, onClick: select.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: !unremovable && !!select.value ? 'close' : 'arrow-ios-down' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx("div", { className: classNameList, children: select.modalIsVisible && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: select.listRef, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: select.onClickElement(element), onKeyDown: select.onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: select.onClickBackdrop })] })) })] }));
 }
 function RlsFieldSelect(props) {
     return (jsxRuntimeExports.jsx(RlsFieldSelectTemplate, { ...props, render: (element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })) }));
 }
 
 function RlsFormNavigation({ children, visible, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("div", { className: useRenderClassStatus('rls-form-navigation', { visible }), "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-form-navigation__body", children: children }) }));
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-form-navigation', { visible });
+    }, [visible]);
+    return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-form-navigation__body", children: children }) }));
 }
 
 const DURATION_ANIMATION = 240;
@@ -2630,32 +3048,42 @@ function calculateDuration({ length }) {
     return duration + DURATION_RESET;
 }
 function RlsSnackbar({ content, icon, title, visible, rlsTheme }) {
-    return (jsxRuntimeExports.jsxs("div", { className: useRenderClassStatus('rls-snackbar', { visible }), "rls-theme": rlsTheme, children: [icon && (jsxRuntimeExports.jsx("div", { className: "rls-snackbar__avatar", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })), jsxRuntimeExports.jsxs("div", { className: "rls-snackbar__component", children: [title && jsxRuntimeExports.jsx("div", { className: "rls-snackbar__title", children: title }), jsxRuntimeExports.jsx("div", { className: "rls-snackbar__content", children: content })] })] }));
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-snackbar', { visible });
+    }, [visible]);
+    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [icon && (jsxRuntimeExports.jsx("div", { className: "rls-snackbar__avatar", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })), jsxRuntimeExports.jsxs("div", { className: "rls-snackbar__component", children: [title && jsxRuntimeExports.jsx("div", { className: "rls-snackbar__title", children: title }), jsxRuntimeExports.jsx("div", { className: "rls-snackbar__content", children: content })] })] }));
 }
 function useSnackbar() {
-    const [config, setConfig] = require$$0.useState({});
-    const [duration, setDuration] = require$$0.useState(4000);
-    const [timeoutId, setTimeoutId] = require$$0.useState();
-    const [visible, setVisible] = require$$0.useState(false);
-    const rlsSnackbar = jsxRuntimeExports.jsx(RlsSnackbar, { ...config, visible: visible });
+    const [state, setState] = require$$0.useState({
+        config: {},
+        duration: 4000,
+        timeoutId: undefined,
+        visible: false
+    });
+    const rlsSnackbar = jsxRuntimeExports.jsx(RlsSnackbar, { ...state.config, visible: state.visible });
     require$$0.useEffect(() => {
-        if (visible) {
+        if (state.visible) {
             const timeoutId = setTimeout(() => {
-                setVisible(false);
-                setTimeoutId(undefined);
-            }, duration);
-            setTimeoutId(timeoutId);
+                setState((state) => ({
+                    ...state,
+                    visible: false,
+                    timeoutId: undefined
+                }));
+            }, state.duration);
+            setState((state) => ({ ...state, timeoutId }));
         }
-        else if (timeoutId) {
-            clearTimeout(timeoutId);
-            setTimeout(() => snackbar(config), DURATION_ANIMATION);
+        else if (state.timeoutId) {
+            clearTimeout(state.timeoutId);
+            setTimeout(() => snackbar(state.config), DURATION_ANIMATION);
         }
-    }, [visible]);
+    }, [state.visible]);
     const snackbar = require$$0.useCallback((config) => {
-        const { content } = config;
-        setConfig(config);
-        setDuration(calculateDuration(String(content)));
-        setVisible((visible) => !visible);
+        setState((state) => ({
+            ...state,
+            config,
+            duration: calculateDuration(String(config.content)),
+            visible: !state.visible
+        }));
     }, []);
     return {
         RlsSnackbar: rlsSnackbar,
@@ -2673,10 +3101,11 @@ const RlsContext = require$$0.createContext({
 function RlsApplication({ children }) {
     const { RlsConfirmation, confirmation } = useConfirmation();
     const { RlsSnackbar, snackbar } = useSnackbar();
-    const [currentWithNavbar, withNavbar] = require$$0.useState(false);
-    return (jsxRuntimeExports.jsxs(RlsContext.Provider, { value: { confirmation, snackbar, withNavbar }, children: [jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-app__body', {
-                    snackbar: currentWithNavbar
-                }), children: [children, RlsSnackbar] }), RlsConfirmation] }));
+    const [_withNavbar, withNavbar] = require$$0.useState(false);
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-app__body', { snackbar: _withNavbar });
+    }, [_withNavbar]);
+    return (jsxRuntimeExports.jsxs(RlsContext.Provider, { value: { confirmation, snackbar, withNavbar }, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, RlsSnackbar] }), RlsConfirmation] }));
 }
 
 exports.ConfirmationResult = ConfirmationResult;
@@ -2735,7 +3164,7 @@ exports.RlsPickerDateRange = RlsPickerDateRange;
 exports.RlsPickerDay = RlsPickerDay;
 exports.RlsPickerDayRange = RlsPickerDayRange;
 exports.RlsPickerMonth = RlsPickerMonth;
-exports.RlsPickerMonthTitle = RlsPickerMonthTitle;
+exports.RlsPickerSelectorTitle = RlsPickerSelectorTitle;
 exports.RlsPickerYear = RlsPickerYear;
 exports.RlsPoster = RlsPoster;
 exports.RlsProgressBar = RlsProgressBar;
@@ -2750,9 +3179,9 @@ exports.RlsTabularText = RlsTabularText;
 exports.RlsToolbar = RlsToolbar;
 exports.rangeFormatTemplate = rangeFormatTemplate;
 exports.renderClassStatus = renderClassStatus;
+exports.setErrorsI18n = setErrorsI18n;
 exports.useConfirmation = useConfirmation;
 exports.useDatatable = useDatatable;
 exports.useListController = useListController;
-exports.useRenderClassStatus = useRenderClassStatus;
 exports.useSnackbar = useSnackbar;
 //# sourceMappingURL=index.js.map