@rolster/react-components 19.6.7 → 19.6.10

package/dist/es/index.mjs

@@ -431,12 +431,13 @@ var jsxRuntimeExports = requireJsxRuntime();
 function renderClassStatus(base, status = {}, additionals) {
     const _classElement = [base];
     Object.entries(status).forEach(([key, state]) => {
-        state &&
-            (typeof state === 'string'
-                ? _classElement.push(`${base}--${state}`)
-                : _classElement.push(`${base}--${key}`));
+        if (state) {
+            _classElement.push(typeof state === 'string' ? `${base}--${state}` : `${base}--${key}`);
+        }
     });
-    additionals && _classElement.push(additionals);
+    if (additionals) {
+        _classElement.push(additionals);
+    }
     return _classElement.join(' ').trim();
 }
 
@@ -492,7 +493,9 @@ function RlsAreaText({ autoComplete, disabled, formControl, identifier, onBlur,
     useEffect(() => {
         if (!changeIsInternal.current) {
             const nextValue = String(formControl?.value ?? value ?? '');
-            valueArea !== nextValue && setValueArea(nextValue);
+            if (valueArea !== nextValue) {
+                setValueArea(nextValue);
+            }
         }
         changeIsInternal.current = false;
     }, [formControl?.value, value, valueArea]);
@@ -510,7 +513,9 @@ function RlsAreaText({ autoComplete, disabled, formControl, identifier, onBlur,
     }, [formControl, onValue]);
     const onKeyDownArea = useCallback((event) => {
         onKeyDown?.(event);
-        event.key === 'Enter' && onEnter?.();
+        if (event.key === 'Enter') {
+            onEnter?.();
+        }
     }, [onKeyDown, onEnter]);
     const onKeyUpArea = useCallback((event) => {
         onKeyUp?.(event);
@@ -673,7 +678,9 @@ function RlsInput({ children, decimals, disabled, formControl, identifier, onBlu
     useEffect(() => {
         if (!changeIsInternal.current && formControl) {
             const valueControl = formControl.value ? String(formControl.value) : '';
-            valueInput !== valueControl && setValueInput(valueControl);
+            if (valueInput !== valueControl) {
+                setValueInput(valueControl);
+            }
         }
         changeIsInternal.current = false;
     }, [formControl?.value]);
@@ -689,7 +696,9 @@ function RlsInput({ children, decimals, disabled, formControl, identifier, onBlu
     }, [formControl, onValue, type, decimals]);
     const onKeyDownInput = useCallback((event) => {
         onKeyDown?.(event);
-        event.key === 'Enter' && onEnter?.();
+        if (event.key === 'Enter') {
+            onEnter?.();
+        }
     }, [onKeyDown, onEnter]);
     const onKeyUpInput = useCallback((event) => {
         onKeyUp?.(event);
@@ -728,9 +737,9 @@ function RlsInputCounter({ className, disabled, formControl, identifier, max, mi
     useEffect(() => {
         if (!changeIsInternal.current && formControl) {
             const counterValue = formControl.value;
-            counterValue !== undefined &&
-                counterValue !== value &&
+            if (counterValue !== undefined && counterValue !== value) {
                 setValue(counterValue);
+            }
         }
         changeIsInternal.current = false;
     }, [formControl?.value]);
@@ -751,7 +760,9 @@ function RlsInputCounter({ className, disabled, formControl, identifier, max, mi
     const incrementIsAllowed = useMemo(() => max !== undefined && value >= max, [max, value]);
     const onChangeInput = useCallback((event) => {
         const parsed = parseFloat(event.target.value);
-        !isNaN(parsed) && onUpdate(parsed);
+        if (!isNaN(parsed)) {
+            onUpdate(parsed);
+        }
     }, [onUpdate]);
     const onFocusInput = useCallback(() => {
         setFocused(true);
@@ -774,7 +785,12 @@ function RlsInputDecimal(props) {
     }, [formControl?.value, valueInput]);
     const onValueInput = useCallback((value) => {
         const valueDecimal = BigDecimal.create(value);
-        formControl ? formControl.setValue(valueDecimal) : setValueInput(value);
+        if (formControl) {
+            formControl.setValue(valueDecimal);
+        }
+        else {
+            setValueInput(value);
+        }
         onValue?.(valueDecimal);
     }, [formControl, onValue]);
     const decimalProps = { ...props, formControl: undefined };
@@ -785,7 +801,9 @@ function RlsInputMoney(props) {
     const { decimals, formControl, identifier, onValue, symbol, value } = props;
     const [valueInput, setValueInput] = useState(formControl?.value ?? value ?? 0);
     const onValueInput = useCallback((value) => {
-        !formControl && setValueInput(value);
+        if (!formControl) {
+            setValueInput(value);
+        }
         onValue?.(value);
     }, [formControl, onValue]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-money", children: jsxRuntimeExports.jsx(RlsInput, { ...props, type: "number", value: valueInput, onValue: onValueInput, children: jsxRuntimeExports.jsx(RlsAmount, { value: formControl?.value ?? valueInput, symbol: symbol, decimals: decimals }) }) }));
@@ -795,7 +813,9 @@ function RlsInputNumber(props) {
     const { formControl, identifier, onValue, value } = props;
     const [valueInput, setValueInput] = useState(formControl?.value ?? value ?? 0);
     const onValueInput = useCallback((value) => {
-        !formControl && setValueInput(value);
+        if (!formControl) {
+            setValueInput(value);
+        }
         onValue?.(value);
     }, [formControl, onValue]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-number", children: jsxRuntimeExports.jsx(RlsInput, { ...props, type: "number", value: valueInput, onValue: onValueInput, children: formControl?.value ?? valueInput }) }));
@@ -809,7 +829,9 @@ function RlsInputPassword({ disabled, formControl, identifier, onEnter, onKeyDow
     }, [formControl, onValue]);
     const _onKeyDown = useCallback((event) => {
         onKeyDown?.(event);
-        event.key === 'Enter' && onEnter?.();
+        if (event.key === 'Enter') {
+            onEnter?.();
+        }
     }, [onKeyDown, onEnter]);
     const _onKeyUp = useCallback((event) => {
         onKeyUp?.(event);
@@ -835,7 +857,9 @@ function RlsInputPercentage(props) {
     const { formControl, identifier, onValue, value } = props;
     const [valueInput, setValueInput] = useState(formControl?.value ?? value ?? 0);
     const onValueInput = useCallback((value) => {
-        !formControl && setValueInput(value);
+        if (!formControl) {
+            setValueInput(value);
+        }
         onValue?.(value);
     }, [formControl, onValue]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-percentage", children: jsxRuntimeExports.jsxs(RlsInput, { ...props, type: "number", value: valueInput, onValue: onValueInput, children: [formControl?.value ?? valueInput, "%"] }) }));
@@ -847,7 +871,9 @@ function RlsInputSearch({ formControl, disabled, identifier, onEnter, onSearch,
         return renderClassStatus('rls-input-search', { disabled });
     }, [disabled]);
     const onValue = useCallback((value) => {
-        !formControl && setValue(() => value);
+        if (!formControl) {
+            setValue(() => value);
+        }
     }, [formControl]);
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, children: [jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, placeholder: placeholder, onEnter: onEnter, onValue: onValue, disabled: disabled, children: formControl?.value ?? value }), onSearch && (jsxRuntimeExports.jsx(RlsButtonAction, { icon: "search", onClick: onSearch, disabled: disabled }))] }));
 }
@@ -856,7 +882,9 @@ function RlsInputText(props) {
     const { formControl, identifier, onValue, value } = props;
     const [valueInput, setValueInput] = useState(formControl?.value ?? value ?? '');
     const onValueInput = useCallback((value) => {
-        !formControl && setValueInput(value);
+        if (!formControl) {
+            setValueInput(value);
+        }
         onValue?.(value);
     }, [formControl, onValue]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-text", children: jsxRuntimeExports.jsx(RlsInput, { ...props, type: "text", value: valueInput, onValue: onValueInput, children: formControl?.value ?? valueInput }) }));
@@ -1379,7 +1407,9 @@ function RlsButtonToggle({ onAction, options, type, automatic, disabled, rlsThem
     const [visible, setVisible] = useState(false);
     useEffect(() => {
         function onCloseMenu({ target }) {
-            !componentRef?.current?.contains(target) && setVisible(false);
+            if (!componentRef?.current?.contains(target)) {
+                setVisible(false);
+            }
         }
         document.addEventListener('click', onCloseMenu);
         return () => {
@@ -1398,15 +1428,21 @@ function RlsButtonToggle({ onAction, options, type, automatic, disabled, rlsThem
     const onSelectAction = useCallback((action) => {
         setAction(() => action);
         setVisible(() => false);
-        automatic && onAction(action.value);
+        if (automatic) {
+            onAction(action.value);
+        }
     }, [onAction, automatic]);
     const onClickAction = useCallback(() => {
-        action && onAction(action.value);
+        if (action) {
+            onAction(action.value);
+        }
     }, [action, onAction]);
     const onClickOption = useCallback((event) => {
         const index = Number(event.currentTarget.dataset.index);
         const option = options[index];
-        option && onSelectAction(option);
+        if (option) {
+            onSelectAction(option);
+        }
     }, [options, onSelectAction]);
     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: onClickAction, 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: "rls-truncate", "data-index": index, onClick: onClickOption, children: action.label }, index))) }) })] }));
 }
@@ -1539,7 +1575,7 @@ 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: msgError }) })) }));
 }
 
-function RlsFieldDecimal(props) {
+function RlsFieldArea(props) {
     const { children, formControl, identifier, rlsTheme } = props;
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
@@ -1550,12 +1586,12 @@ function RlsFieldDecimal(props) {
             error: formControl?.wrong,
             focused: formControl?.focused && !disabled,
             readonly: props.readOnly
-        }, 'rls-field-decimal');
+        }, 'rls-field-area');
     }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { 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(RlsInputDecimal, { ...props }) }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { 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(RlsAreaText, { ...props }) }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
-function RlsFieldArea(props) {
+function RlsFieldDecimal(props) {
     const { children, formControl, identifier, rlsTheme } = props;
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
@@ -1566,9 +1602,9 @@ function RlsFieldArea(props) {
             error: formControl?.wrong,
             focused: formControl?.focused && !disabled,
             readonly: props.readOnly
-        }, 'rls-field-area');
+        }, 'rls-field-decimal');
     }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { 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(RlsAreaText, { ...props }) }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { 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(RlsInputDecimal, { ...props }) }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
 function RlsFieldFile({ accept, children, disabled: _disabled, formControl, identifier, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value }) {
@@ -1603,7 +1639,9 @@ function RlsFieldFile({ accept, children, disabled: _disabled, formControl, iden
         event.target.value = '';
     }, [formControl, onValue]);
     const onClickControl = useCallback(() => {
-        !readOnly && !disabled && inputRef.current?.click();
+        if (!readOnly && !disabled) {
+            inputRef.current?.click();
+        }
     }, [readOnly, disabled]);
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", onClick: onClickControl, children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-input__component", readOnly: true, type: "text", value: displayValue, placeholder: placeholder }), jsxRuntimeExports.jsx("input", { ref: inputRef, className: "rls-field-file__input", type: "file", accept: accept, disabled: disabled || readOnly, onChange: onChangeInput }), jsxRuntimeExports.jsx(RlsButtonAction, { icon: currentFile ? 'close' : 'attach', disabled: disabled, onClick: onClickAction })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
@@ -1678,7 +1716,7 @@ function RlsFieldListSuggestions({ elements, action, disabled, higher, render, r
 }
 
 function RlsFieldMoney(props) {
-    const { children, formControl, identifier, rlsTheme } = props;
+    const { action, children, formControl, identifier, rlsTheme } = props;
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
@@ -1690,11 +1728,11 @@ function RlsFieldMoney(props) {
             readonly: props.readOnly
         }, 'rls-field-money');
     }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { 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, { ...props }) }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { 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(RlsInputMoney, { ...props }), action && (jsxRuntimeExports.jsx(RlsButtonAction, { icon: action.icon, disabled: disabled, onClick: action.onClick }))] }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
 function RlsFieldNumber(props) {
-    const { children, formControl, identifier, rlsTheme } = props;
+    const { action, children, formControl, identifier, rlsTheme } = props;
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
@@ -1706,7 +1744,7 @@ function RlsFieldNumber(props) {
             readonly: props.readOnly
         }, 'rls-field-number');
     }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { 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, { ...props }) }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { 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(RlsInputNumber, { ...props }), action && (jsxRuntimeExports.jsx(RlsButtonAction, { icon: action.icon, disabled: disabled, onClick: action.onClick }))] }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
 function RlsFieldPassword(props) {
@@ -1730,7 +1768,7 @@ function RlsFieldPassword(props) {
 }
 
 function RlsFieldPercentage(props) {
-    const { children, formControl, identifier, rlsTheme } = props;
+    const { action, children, formControl, identifier, rlsTheme } = props;
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
@@ -1742,7 +1780,7 @@ function RlsFieldPercentage(props) {
             readonly: props.readOnly
         }, 'rls-field-percentage');
     }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { 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(RlsInputPercentage, { ...props }) }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { 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(RlsInputPercentage, { ...props }), action && (jsxRuntimeExports.jsx(RlsButtonAction, { icon: action.icon, disabled: disabled, onClick: action.onClick }))] }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
 function RlsFieldReadonly({ children, identifier, rlsTheme, value }) {
@@ -1750,7 +1788,7 @@ function RlsFieldReadonly({ children, identifier, rlsTheme, value }) {
 }
 
 function RlsFieldText(props) {
-    const { children, formControl, identifier, rlsTheme } = props;
+    const { action, children, formControl, identifier, rlsTheme } = props;
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
@@ -1762,7 +1800,7 @@ function RlsFieldText(props) {
             readonly: props.readOnly
         }, 'rls-field-text');
     }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { 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, { ...props }) }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { 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(RlsInputText, { ...props }), action && (jsxRuntimeExports.jsx(RlsButtonAction, { icon: action.icon, disabled: disabled, onClick: action.onClick }))] }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
 function useFormToggleController({ disabled, formControl }) {
@@ -1772,9 +1810,14 @@ function useFormToggleController({ disabled, formControl }) {
     }, [formControl?.value]);
     const onToggle = useCallback(() => {
         if (!disabled) {
-            formControl
-                ? formControl.enabled && formControl.setValue(!formControl.value)
-                : setChecked((checked) => !checked);
+            if (formControl) {
+                if (formControl.enabled) {
+                    formControl.setValue(!formControl.value);
+                }
+            }
+            else {
+                setChecked((checked) => !checked);
+            }
         }
     }, [formControl, disabled]);
     return { checked, onToggle };
@@ -1876,8 +1919,9 @@ function RlsPagination({ suggestions, count, filter, onPagination }) {
         setTemplate(template);
     }, [onPagination]);
     const refreshPagination = useCallback((pagination) => {
-        pagination &&
+        if (pagination) {
             refreshTemplate(pagination.template, pagination.page.collection);
+        }
     }, [refreshTemplate]);
     useEffect(() => {
         const pagination = new PaginationController({
@@ -1923,7 +1967,9 @@ function RlsPickerDayElement({ day, onSelect, disabled }) {
         });
     }, [day, disabled]);
     const onClick = useCallback(() => {
-        day.value && !day.disabled && !disabled && onSelect(day.value);
+        if (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 || '??' }) }));
 }
@@ -1933,7 +1979,12 @@ function RlsPickerDay({ date, disabled, formControl, maxDate, month, minDate, on
     const [value, setValue] = useState(formControl?.value ?? dateDay.getDate());
     const [_, setI18nVersion] = useState(0);
     const setDayValue = useCallback((value) => {
-        formControl ? formControl.setValue(value) : setValue(value);
+        if (formControl) {
+            formControl.setValue(value);
+        }
+        else {
+            setValue(value);
+        }
     }, [formControl]);
     const onSelect = useCallback((value) => {
         setDayValue(value);
@@ -1947,13 +1998,21 @@ function RlsPickerDay({ date, disabled, formControl, maxDate, month, minDate, on
     useEffect(() => {
         const options = createPickerOptions();
         const day = verifyDayPicker(options);
-        day ? setDayValue(day) : setWeeks(createDayPicker(options));
+        if (day) {
+            setDayValue(day);
+        }
+        else {
+            setWeeks(createDayPicker(options));
+        }
     }, [dateDay, month, year, value, minDate, maxDate]);
     useEffect(() => {
         const day = verifyDayPicker(createPickerOptions());
-        day
-            ? formControl?.setValue(day)
-            : setValue(formControl?.value || dateDay.getDate());
+        if (day) {
+            formControl?.setValue(day);
+        }
+        else {
+            setValue(formControl?.value || dateDay.getDate());
+        }
     }, [formControl?.value]);
     const createPickerOptions = useCallback(() => {
         return {
@@ -1982,7 +2041,9 @@ function RlsPickerDayRangeElement({ day, onSelect, disabled }) {
         });
     }, [day.disabled, day.end, day.forbidden, day.ranged, day.source, disabled]);
     const onClick = useCallback(() => {
-        day.value && !day.disabled && !disabled && onSelect(day.value);
+        if (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 || '??' }) }));
 }
@@ -2038,10 +2099,9 @@ function RlsPickerMonthElement({ month, onSelect, disabled }) {
         });
     }, [month.disabled, month.focused, month.selected, disabled]);
     const onClick = useCallback(() => {
-        valueIsDefined(month.value) &&
-            !month.disabled &&
-            !disabled &&
+        if (valueIsDefined(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 }) }));
 }
@@ -2050,7 +2110,12 @@ function RlsPickerMonth({ date, disabled, formControl, maxDate, minDate, onValue
     const [months, setMonths] = useState([]);
     const [value, setValue] = useState(formControl?.value ?? dateMonth.getMonth());
     const setMonthValue = useCallback((value) => {
-        formControl ? formControl.setValue(value) : setValue(value);
+        if (formControl) {
+            formControl.setValue(value);
+        }
+        else {
+            setValue(value);
+        }
     }, [formControl]);
     const onSelect = useCallback((value) => {
         setMonthValue(value);
@@ -2065,9 +2130,12 @@ function RlsPickerMonth({ date, disabled, formControl, maxDate, minDate, onValue
             maxDate
         };
         const month = verifyMonthPicker(options);
-        valueIsDefined(month)
-            ? setMonthValue(month)
-            : setMonths(createMonthPicker(options));
+        if (valueIsDefined(month)) {
+            setMonthValue(month);
+        }
+        else {
+            setMonths(createMonthPicker(options));
+        }
     }, [dateMonth, year, value, minDate, maxDate]);
     useEffect(() => {
         const month = verifyMonthPicker({
@@ -2077,9 +2145,12 @@ function RlsPickerMonth({ date, disabled, formControl, maxDate, minDate, onValue
             minDate,
             maxDate
         });
-        valueIsDefined(month)
-            ? formControl?.setValue(month)
-            : setValue(formControl?.value ?? dateMonth.getMonth());
+        if (valueIsDefined(month)) {
+            formControl?.setValue(month);
+        }
+        else {
+            setValue(formControl?.value ?? dateMonth.getMonth());
+        }
     }, [formControl?.value]);
     return (jsxRuntimeExports.jsx("div", { className: "rls-picker-month", "rls-theme": rlsTheme, children: months.map((month, index) => (jsxRuntimeExports.jsx(RlsPickerMonthElement, { month: month, onSelect: onSelect, disabled: disabled }, index))) }));
 }
@@ -2121,11 +2192,17 @@ function RlsPickerSelectorTitle({ monthControl, type, yearControl, date, disable
         onClick?.('year');
     }, [onClick]);
     const onPreviousYear = useCallback(() => {
-        valueIsDefined(yearControl.value) &&
+        if (valueIsDefined(yearControl.value)) {
             yearControl.setValue(yearControl.value - 1);
+        }
     }, [yearControl.value]);
     const onPrevious = useCallback(() => {
-        type === 'month' ? onPreviousMonth() : onPreviousYear();
+        if (type === 'month') {
+            onPreviousMonth();
+        }
+        else {
+            onPreviousYear();
+        }
     }, [type, onPreviousMonth, onPreviousYear]);
     const onNextMonth = useCallback(() => {
         if (valueIsDefined(monthControl.value) &&
@@ -2140,11 +2217,17 @@ function RlsPickerSelectorTitle({ monthControl, type, yearControl, date, disable
         }
     }, [monthControl.value, yearControl.value]);
     const onNextYear = useCallback(() => {
-        valueIsDefined(yearControl.value) &&
+        if (valueIsDefined(yearControl.value)) {
             yearControl.setValue(yearControl.value + 1);
+        }
     }, [yearControl.value]);
     const onNext = useCallback(() => {
-        type === 'month' ? onNextMonth() : onNextYear();
+        if (type === 'month') {
+            onNextMonth();
+        }
+        else {
+            onNextYear();
+        }
     }, [type, onNextMonth, onNextYear]);
     return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-selector-title", children: [jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-left", onClick: onPrevious, disabled: limitPrevious || disabled }), jsxRuntimeExports.jsxs("div", { className: "rls-picker-selector-title__label", children: [jsxRuntimeExports.jsxs("span", { onClick: onMonth, children: [label, ","] }), jsxRuntimeExports.jsx("span", { onClick: onYear, children: yearControl.value })] }), jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-right", onClick: onNext, disabled: limitNext || disabled })] }));
 }
@@ -2158,7 +2241,9 @@ function RlsPickerYearElement({ onSelect, year, disabled }) {
         });
     }, [year.disabled, year.focused, year.selected, disabled]);
     const onClick = useCallback(() => {
-        year.value && !year.disabled && !disabled && onSelect(year.value);
+        if (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", children: year.value || '????' }) }));
 }
@@ -2177,14 +2262,26 @@ function RlsPickerYear({ date, disabled, formControl, maxDate, minDate, onValue,
     useEffect(() => {
         const options = createPickerOptions();
         const validYear = verifyYearPicker(options);
-        validYear ? setYear(validYear) : setTemplate(createYearPicker(options));
+        if (validYear) {
+            setYear(validYear);
+        }
+        else {
+            setTemplate(createYearPicker(options));
+        }
     }, [dateYear, year, minDate, maxDate]);
     useEffect(() => {
         const yearValue = formControl?.value;
-        valueIsDefined(yearValue) && yearValue !== year && setYear(yearValue);
+        if (valueIsDefined(yearValue) && yearValue !== year) {
+            setYear(yearValue);
+        }
     }, [formControl?.value]);
     const onSelect = useCallback((value) => {
-        formControl ? formControl.setValue(value) : setYear(value);
+        if (formControl) {
+            formControl.setValue(value);
+        }
+        else {
+            setYear(value);
+        }
         onValue?.(value);
     }, [formControl, onValue]);
     const onClickPrev = useCallback(() => {
@@ -2259,7 +2356,9 @@ function RlsTab({ onSelect, tab, value }) {
         });
     }, [tab, value]);
     const onClick = useCallback(() => {
-        !tab.disabled && onSelect(tab.value);
+        if (!tab.disabled) {
+            onSelect(tab.value);
+        }
     }, [tab.disabled]);
     return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { children: tab.label }) }));
 }
@@ -2271,7 +2370,9 @@ function RlsTabs({ tabs, onValue, rlsTheme }) {
     }, [onValue]);
     useEffect(() => {
         const initial = tabs.find((tab) => tab.defaultActive) ?? tabs[0];
-        initial && onSelect(initial.value);
+        if (initial) {
+            onSelect(initial.value);
+        }
     }, []);
     return (jsxRuntimeExports.jsx("div", { className: "rls-tabs", "rls-theme": rlsTheme, children: tabs.map((tab, index) => {
             return (jsxRuntimeExports.jsx(RlsTab, { tab: tab, value: value, onSelect: onSelect }, index));
@@ -2287,7 +2388,9 @@ function RlsBottomSheet({ autoclose, children, className, controller, onBackdrop
         return renderClassStatus('rls-bottom-sheet', { visible: controller?.visible ?? visible }, className);
     }, [className, visible, controller?.visible]);
     const onClickBackdrop = useCallback(() => {
-        autoclose && controller?.close();
+        if (autoclose) {
+            controller?.close();
+        }
         onBackdrop?.();
     }, [autoclose, controller, onBackdrop]);
     return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameSheet, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-bottom-sheet__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-bottom-sheet__backdrop", onClick: onClickBackdrop })] }), document.body);
@@ -2392,10 +2495,10 @@ function RlsDatatable({ children, footer, header, identifier, rlsTheme, resizabl
 function RlsDatatableHeader({ children, identifier, rlsTheme }) {
     return (jsxRuntimeExports.jsx("tr", { id: identifier, className: "rls-datatable__header", "rls-theme": rlsTheme, children: children }));
 }
-function RlsDatatableTitle({ children, className, contained, control, identifier, rlsTheme }) {
+function RlsDatatableTitle({ children, className, control, identifier, rlsTheme, truncated }) {
     const classNameTitle = useMemo(() => {
-        return renderClassStatus('rls-datatable__title', { contained, control }, className);
-    }, [className, contained, control]);
+        return renderClassStatus('rls-datatable__title', { truncated, control }, className);
+    }, [className, truncated, control]);
     return (jsxRuntimeExports.jsx("th", { id: identifier, className: classNameTitle, "rls-theme": rlsTheme, children: children }));
 }
 function RlsDatatableSubheader({ children, className, identifier, rlsTheme }) {
@@ -2404,28 +2507,28 @@ function RlsDatatableSubheader({ children, className, identifier, rlsTheme }) {
     }, [className]);
     return (jsxRuntimeExports.jsx("tr", { id: identifier, className: classNameSubheader, "rls-theme": rlsTheme, children: children }));
 }
-function RlsDatatableRecord({ children, className, contained, error, identifier, info, success, warning, rlsTheme }) {
+function RlsDatatableRecord({ children, className, error, identifier, info, rlsTheme, success, truncated, warning }) {
     const classNameRecord = useMemo(() => {
-        return renderClassStatus('rls-datatable__record', { error, info, contained, success, warning }, className);
-    }, [className, contained, error, info, success, warning]);
+        return renderClassStatus('rls-datatable__record', { error, info, truncated, success, warning }, className);
+    }, [className, truncated, error, info, success, warning]);
     return (jsxRuntimeExports.jsx("tr", { id: identifier, className: classNameRecord, "rls-theme": rlsTheme, children: children }));
 }
-function RlsDatatableTotals({ children, className, contained, error, identifier, info, success, warning, rlsTheme }) {
+function RlsDatatableTotals({ children, className, error, identifier, info, rlsTheme, success, truncated, warning }) {
     const classNameTotals = useMemo(() => {
-        return renderClassStatus('rls-datatable__totals', { error, info, contained, success, warning }, className);
-    }, [className, contained, error, info, success, warning]);
+        return renderClassStatus('rls-datatable__totals', { error, info, truncated, success, warning }, className);
+    }, [className, truncated, error, info, success, warning]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: classNameTotals, "rls-theme": rlsTheme, children: children }));
 }
-function RlsDatatableCell({ children, className, contained, control, identifier, rlsTheme }) {
+function RlsDatatableCell({ children, className, control, identifier, rlsTheme, truncated }) {
     const classNameCell = useMemo(() => {
-        return renderClassStatus('rls-datatable__cell', { control, contained }, className);
-    }, [className, contained, control]);
+        return renderClassStatus('rls-datatable__cell', { control, truncated }, className);
+    }, [className, truncated, control]);
     return (jsxRuntimeExports.jsx("td", { id: identifier, className: classNameCell, "rls-theme": rlsTheme, children: children }));
 }
-function RlsDatatableData({ children, className, contained, control, identifier }) {
+function RlsDatatableData({ children, className, control, identifier, truncated }) {
     const classNameData = useMemo(() => {
-        return renderClassStatus('rls-datatable__data', { control, contained }, className);
-    }, [className, contained, control]);
+        return renderClassStatus('rls-datatable__data', { control, truncated }, className);
+    }, [className, truncated, control]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: classNameData, children: children }));
 }
 function RlsDatatableFloating({ children, className, identifier, invested, rlsTheme }) {
@@ -2443,8 +2546,9 @@ function RlsDropdown({ children, controller, rlsTheme }) {
     }, [controller.visible]);
     useEffect(() => {
         function onCloseDropdown({ target }) {
-            !controller.component.current.contains(target) &&
+            if (!controller.component.current.contains(target)) {
                 controller.close();
+            }
         }
         document.addEventListener('click', onCloseDropdown);
         return () => {
@@ -2498,8 +2602,9 @@ function useListController(props) {
     const valueProtected = useRef(undefined);
     useEffect(() => {
         function onCloseSuggestions({ target }) {
-            !refContent?.current?.contains(target) &&
+            if (!refContent?.current?.contains(target)) {
                 refreshState((state) => ({ ...state, listIsVisible: false }));
+            }
         }
         document.addEventListener('click', onCloseSuggestions);
         return () => {
@@ -2523,9 +2628,12 @@ function useListController(props) {
                 const element = collection.find(formControl.value);
                 if (!element) {
                     valueProtected.current = formControl.value;
-                    automatic
-                        ? setFormValue(collection.value[0], true)
-                        : setFormValue(undefined);
+                    if (automatic) {
+                        setFormValue(collection.value[0], true);
+                    }
+                    else {
+                        setFormValue(undefined);
+                    }
                 }
                 else {
                     refreshState((state) => ({ ...state, value: element.description }));
@@ -2533,12 +2641,20 @@ function useListController(props) {
             }
             else if (valueProtected.current) {
                 const element = collection.find(valueProtected.current);
-                element ? setFormValue(element) : refreshState({ ...state, value: '' });
+                if (element) {
+                    setFormValue(element);
+                }
+                else {
+                    refreshState({ ...state, value: '' });
+                }
             }
             else {
-                automatic
-                    ? setFormValue(collection.value[0], true)
-                    : refreshState({ ...state, value: '' });
+                if (automatic) {
+                    setFormValue(collection.value[0], true);
+                }
+                else {
+                    refreshState({ ...state, value: '' });
+                }
             }
         }
         changeValueInternal.current = false;
@@ -2558,9 +2674,12 @@ function useListController(props) {
             value: element?.description || ''
         }));
         changeValueInternal.current = true;
-        valueIsDefault
-            ? formControl?.setDefaultValue(element?.value)
-            : formControl?.setValue(element?.value);
+        if (valueIsDefault) {
+            formControl?.setDefaultValue(element?.value);
+        }
+        else {
+            formControl?.setValue(element?.value);
+        }
     }, [formControl]);
     const navigationInput = useCallback((event) => {
         if (state.listIsVisible) {
@@ -2625,7 +2744,9 @@ function useFieldAutocomplete(props) {
         refreshCoincidences(props.suggestions, pattern, reboot);
     }, [props.suggestions, pattern]);
     useEffect(() => {
-        props.disabled && controller.setState({ focused: false });
+        if (props.disabled) {
+            controller.setState({ focused: false });
+        }
     }, [props.disabled, controller.setState]);
     const onFocusInput = useCallback(() => {
         controller.setState({ focused: true });
@@ -2680,7 +2801,9 @@ function useFieldAutocomplete(props) {
     }, [controller.setState]);
     const onChange = useCallback((element) => {
         if (props.onSelect) {
-            element.value && props.onSelect(element.value);
+            if (element.value) {
+                props.onSelect(element.value);
+            }
         }
         else {
             controller.setFormValue(element);
@@ -2708,9 +2831,12 @@ function useFieldAutocomplete(props) {
     }, [onChange]);
     const onKeydownElement = useCallback((element) => {
         return (event) => {
-            event.code === 'Enter'
-                ? onChange(element)
-                : controller.navigationElement(event);
+            if (event.code === 'Enter') {
+                onChange(element);
+            }
+            else {
+                controller.navigationElement(event);
+            }
         };
     }, [onChange, controller.navigationElement]);
     return {
@@ -2764,7 +2890,9 @@ function RlsFieldAutocompleteTemplate(props) {
         onSearch?.(autocomplete.pattern);
     }, [onSearch, autocomplete.pattern]);
     const onKeyDownPattern = useCallback((event) => {
-        event.key === 'Enter' && onSearch?.(autocomplete.pattern);
+        if (event.key === 'Enter') {
+            onSearch?.(autocomplete.pattern);
+        }
         autocomplete.onKeydownInput(event);
     }, [autocomplete.onKeydownInput, onSearch, autocomplete.pattern]);
     const searchControl = useMemo(() => ({
@@ -2801,7 +2929,9 @@ function RlsModal({ autoclose, children, className, controller, onBackdrop, visi
         return renderClassStatus('rls-modal', { visible: controller?.visible ?? visible }, className);
     }, [className, visible, controller?.visible]);
     const onClickBackdrop = useCallback(() => {
-        autoclose && controller?.close();
+        if (autoclose) {
+            controller?.close();
+        }
         onBackdrop?.();
     }, [autoclose, controller, onBackdrop]);
     return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameModal, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal__backdrop", onClick: onClickBackdrop })] }), document.body);
@@ -2902,7 +3032,12 @@ function RlsPickerClock({ formControl, onListener, rlsTheme, time }) {
         });
     }, []);
     useEffect(() => {
-        selectionIsHours ? refreshClockHour() : refreshClockMinute();
+        if (selectionIsHours) {
+            refreshClockHour();
+        }
+        else {
+            refreshClockMinute();
+        }
     }, [selectionIsHours]);
     useEffect(() => {
         if (!changeIsInternal.current && formControl?.value) {
@@ -2922,7 +3057,12 @@ function RlsPickerClock({ formControl, onListener, rlsTheme, time }) {
         const angle = Math.atan2(-positionX, positionY) + Math.PI;
         const value = Math.round(angle / radianUnit);
         refreshClock(value);
-        selectionIsHours ? setHour(value === 0 ? 12 : value) : setMinute(value);
+        if (selectionIsHours) {
+            setHour(value === 0 ? 12 : value);
+        }
+        else {
+            setMinute(value);
+        }
     }, [selectionIsHours, radianUnit]);
     const refreshClock = useCallback((value) => {
         const angle = value * radianUnit;
@@ -3039,7 +3179,9 @@ function RlsFieldClock({ children, disabled: disabledProps, formControl, identif
         };
     }, [timeValue]);
     const onClickInput = useCallback(() => {
-        !readOnly && setModalIsVisible(true);
+        if (!readOnly) {
+            setModalIsVisible(true);
+        }
     }, [readOnly]);
     const onChange = useCallback((value) => {
         setValue(value);
@@ -3056,452 +3198,82 @@ function RlsFieldClock({ children, disabled: disabledProps, formControl, identif
         }
     }, [timeValue, formControl, valueInitial, onChange]);
     const onListener = useCallback(({ event, value }) => {
-        event !== PickerListenerEvent.Cancel && onChange(value);
+        if (event !== PickerListenerEvent.Cancel) {
+            onChange(value);
+        }
         formControl?.touch();
         setModalIsVisible(false);
     }, [formControl, onChange]);
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-clock", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { 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-clock__control", type: "text", value: status.valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: status.icon, onClick: onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-clock-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerClock, { formControl: formControl, time: time, disabled: disabled, onListener: onListener }) })] }));
 }
 
-const DATE_FORMAT = '{dd}/{mx}/{yy}';
-const DATE_FORMAT_TITLE = '{dw}, {mx} {dd} de {yy}';
-const DATE_RANGE_FORMAT = '{dd}/{mx}/{yy}';
-
-function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
-    const today = useRef(new Date()); // Initial current date in component
-    const _date = useMemo(() => {
-        return formControl?.value ?? date ?? today.current;
-    }, [formControl?.value, date]);
-    const yearControl = useReactControl(_date.getFullYear());
-    const dayControl = useReactControl(_date.getDate());
-    const monthControl = useReactControl(_date.getMonth());
-    const [visibility, setVisibility] = useState('DAY');
+function RlsPickerColor({ color, formControl, onListener, rlsTheme }) {
+    const initialColor = useMemo(() => formControl?.value ?? color ?? DEFAULT_COLOR, []);
+    const initialHsv = useMemo(() => hexToHsv(initialColor) ?? { h: 258, s: 100, v: 100 }, []);
+    const canvasRef = useRef(null);
+    const hueRef = useRef(null);
+    const alphaRef = useRef(null);
+    const selectionIsActive = useRef(false);
+    const activeSlider = useRef(null);
+    const hexEditing = useRef(false);
+    const [hsv, setHsv] = useState(initialHsv);
+    const [alpha, setAlpha] = useState(1);
+    const [hexInput, setHexInput] = useState(initialColor);
     const [labels, setLabels] = useState({
-        dateActionCancel: reactI18n('dateActionCancel'),
-        dateActionSelect: reactI18n('dateActionSelect'),
-        dateActionToday: reactI18n('dateActionToday')
+        colorActionCancel: reactI18n('dateActionCancel'),
+        colorActionSelect: reactI18n('dateActionSelect')
     });
-    const value = useMemo(() => {
-        return new Date(yearControl.value, monthControl.value, dayControl.value);
-    }, [yearControl.value, monthControl.value, dayControl.value]);
-    const classNameComponent = useMemo(() => {
-        return renderClassStatus('rls-picker-date__component', {
-            day: visibility === 'DAY',
-            month: visibility === 'MONTH',
-            year: visibility === 'YEAR'
-        });
-    }, [visibility]);
-    const title = useMemo(() => {
-        return dateFormatTemplate(value, DATE_FORMAT_TITLE);
-    }, [value]);
-    const itIsDisabledToday = useMemo(() => dateOutRange({
-        date: today.current,
-        maxDate,
-        minDate
-    }), [maxDate, minDate]);
+    const hexColor = useMemo(() => hsvToHex(hsv), [hsv]);
+    const hexValue = useMemo(() => {
+        return hexInput.replace('#', '');
+    }, [hexInput]);
+    const canvasStyle = useMemo(() => {
+        const { r, g, b } = hsvToRgb({ h: hsv.h, s: 100, v: 100 });
+        return {
+            background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent), rgb(${r}, ${g}, ${b})`
+        };
+    }, [hsv.h]);
+    const indicatorPosition = useMemo(() => {
+        return {
+            left: `${(hsv.s / 100) * 100}%`,
+            top: `${100 - (hsv.v / 100) * 100}%`
+        };
+    }, [hsv.s, hsv.v]);
+    const hueSliderStyle = useMemo(() => {
+        return {
+            background: 'linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)'
+        };
+    }, []);
+    const hueIndicatorStyle = useMemo(() => {
+        return { left: `${(hsv.h / 360) * 100}%`, backgroundColor: hexColor };
+    }, [hsv.h, hexColor]);
+    const alphaSliderStyle = useMemo(() => {
+        return {
+            background: `linear-gradient(to right, transparent, ${hexColor})`
+        };
+    }, [hexColor]);
+    const alphaIndicatorStyle = useMemo(() => {
+        return { left: `${alpha * 100}%`, backgroundColor: hexColor };
+    }, [alpha, hexColor]);
+    useEffect(() => {
+        if (!hexEditing.current) {
+            setHexInput(hexColor);
+        }
+    }, [hexColor]);
     useEffect(() => {
-        const date = verifyDateRange({ date: _date, minDate, maxDate });
-        yearControl.setValue(date.getFullYear());
-        monthControl.setValue(date.getMonth());
-        dayControl.setValue(date.getDate());
-        formControl?.setValue(date);
         return i18nSubscribe(() => {
             setLabels({
-                dateActionCancel: reactI18n('dateActionCancel'),
-                dateActionSelect: reactI18n('dateActionSelect'),
-                dateActionToday: reactI18n('dateActionToday')
+                colorActionCancel: reactI18n('dateActionCancel'),
+                colorActionSelect: reactI18n('dateActionSelect')
             });
         });
     }, []);
-    const onVisibilityDay = useCallback(() => {
-        setVisibility('DAY');
-    }, []);
-    const onVisibilityTitle = useCallback((type) => {
-        type === 'month' ? setVisibility('MONTH') : setVisibility('YEAR');
-    }, []);
-    const onCancel = useCallback(() => {
-        onListener?.({ event: PickerListenerEvent.Cancel });
-    }, [onListener]);
-    const onToday = useCallback(() => {
-        yearControl.setValue(today.current.getFullYear());
-        dayControl.setValue(today.current.getDate());
-        monthControl.setValue(today.current.getMonth());
-        formControl?.setValue(today.current);
-        onListener?.({
-            event: PickerListenerEvent.Now,
-            value: today.current
-        });
-    }, [formControl, onListener]);
-    const onSelect = useCallback(() => {
-        formControl?.setValue(value);
-        onListener?.({
-            event: PickerListenerEvent.Select,
-            value: 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(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityTitle }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: title }) })] }), jsxRuntimeExports.jsxs("div", { className: classNameComponent, children: [jsxRuntimeExports.jsx(RlsPickerDay, { formControl: dayControl, date: value, month: monthControl.value, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, date: value, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, date: value, 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: "flat", onClick: onCancel, children: labels.dateActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--today", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "calendar", onClick: onToday, disabled: itIsDisabledToday }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.dateActionSelect }) })] }) }))] }));
-}
-
-function RlsFieldDate({ children, date, disabled: disabledProps, formControl, format, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
-    const today = useRef(new Date()); // Initial current date in component
-    const [value, setValue] = useState(formControl?.value ?? valueInitial);
-    const [modalIsVisible, setModalIsVisible] = useState(false);
-    const disabled = useMemo(() => {
-        return formControl?.disabled || disabledProps;
-    }, [formControl?.disabled, disabledProps]);
-    const className = useMemo(() => {
-        return renderClassStatus('rls-field-box', {
-            disabled,
-            readonly: readOnly
-        });
-    }, [disabled, readOnly]);
-    const dateValue = useMemo(() => {
-        return formControl ? formControl.value : value;
-    }, [formControl?.value, value]);
-    const status = useMemo(() => {
-        return {
-            icon: dateValue ? 'trash-2' : 'calendar',
-            label: dateValue
-                ? dateFormatTemplate(dateValue, format ?? DATE_FORMAT)
-                : ''
-        };
-    }, [dateValue, format]);
-    useEffect(() => {
-        const dateSecure = verifyDateRange({
-            date: formControl?.value ?? date ?? today.current,
-            minDate,
-            maxDate
-        });
-        setValue(dateSecure);
-        formControl?.setValue(dateSecure);
-    }, []);
-    const onClickInput = useCallback(() => {
-        !readOnly && setModalIsVisible(true);
-    }, [readOnly]);
-    const onChange = useCallback((value) => {
-        setValue(value);
-        onValue?.(value);
-    }, [onValue]);
-    const onClickAction = useCallback(() => {
-        if (dateValue) {
-            formControl?.setValue(valueInitial);
-            formControl?.touch();
-            onChange(valueInitial);
-        }
-        else {
-            setModalIsVisible(true);
-        }
-    }, [dateValue, formControl, valueInitial, onChange]);
-    const onListener = useCallback(({ event, value }) => {
-        event !== 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("span", { 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: status.label, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: status.icon, onClick: onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-date-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
-}
-
-function rangeFormatTemplate({ maxDate, minDate }) {
-    const minFormat = dateFormatTemplate(minDate, DATE_RANGE_FORMAT);
-    const maxFormat = dateFormatTemplate(maxDate, DATE_RANGE_FORMAT);
-    return `${minFormat} - ${maxFormat}`;
-}
-
-function RlsPickerDateRange({ automatic, date: datePicker, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
-    const _date = useMemo(() => normalizeMinTime(datePicker ?? new Date()), [datePicker]);
-    const _range = useMemo(() => formControl?.value ?? DateRange.now(), [formControl?.value]);
-    const yearControl = useReactControl(_date.getFullYear());
-    const monthControl = useReactControl(_date.getMonth());
-    const rangeControl = useReactControl(_range);
-    const [visibility, setVisibility] = useState('DAY');
-    const [labels, setLabels] = useState({
-        dateActionCancel: reactI18n('dateActionCancel'),
-        dateActionSelect: reactI18n('dateActionSelect')
-    });
-    const value = useMemo(() => {
-        return rangeControl.value ?? _range;
-    }, [rangeControl.value, _range]);
-    const date = useMemo(() => {
-        let value = _date;
-        if (valueIsDefined(yearControl.value)) {
-            value = assignYearInDate(value, yearControl.value);
-        }
-        if (valueIsDefined(monthControl.value)) {
-            value = assignMonthInDate(value, monthControl.value);
-        }
-        return value;
-    }, [_date, yearControl.value, monthControl.value]);
-    const classNameComponent = useMemo(() => {
-        return renderClassStatus('rls-picker-date-range__component', {
-            day: visibility === 'DAY',
-            month: visibility === 'MONTH',
-            year: visibility === 'YEAR'
-        });
-    }, [visibility]);
-    const classNameFooter = useMemo(() => {
-        return renderClassStatus('rls-picker-date-range__footer', { automatic });
-    }, [automatic]);
-    const title = useMemo(() => rangeFormatTemplate(value), [value]);
-    useEffect(() => {
-        return i18nSubscribe(() => {
-            setLabels({
-                dateActionCancel: reactI18n('dateActionCancel'),
-                dateActionSelect: reactI18n('dateActionSelect')
-            });
-        });
-    }, []);
-    useEffect(() => {
-        setVisibility('DAY');
-    }, [rangeControl.value]);
-    const onVisibilityDay = useCallback(() => {
-        setVisibility('DAY');
-    }, []);
-    const onVisibilityTitle = useCallback((type) => {
-        type === 'month' ? setVisibility('MONTH') : setVisibility('YEAR');
-    }, []);
-    const onCancel = useCallback(() => {
-        onListener?.({ event: PickerListenerEvent.Cancel });
-    }, [onListener]);
-    const onSelect = useCallback(() => {
-        formControl?.setValue(value);
-        onListener?.({ event: PickerListenerEvent.Select, value });
-    }, [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(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: visibility === 'MONTH' ? 'year' : 'month', onClick: onVisibilityTitle }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__title", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: title }) })] }), 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: "flat", onClick: onCancel, children: labels.dateActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.dateActionSelect }) })] }) })] }));
-}
-
-function RlsFieldDateRange({ children, date, disabled: disabledProps, formControl, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
-    const currentDate = useMemo(() => date ?? new Date(), [date]);
-    const [value, setValue] = useState(formControl?.value || valueInitial);
-    const [modalIsVisible, setModalIsVisible] = useState(false);
-    const disabled = useMemo(() => {
-        return formControl?.disabled || disabledProps;
-    }, [formControl?.disabled, disabledProps]);
-    const className = useMemo(() => {
-        return renderClassStatus('rls-field-box', {
-            disabled,
-            readonly: readOnly
-        });
-    }, [disabled, readOnly]);
-    const dateRangeValue = useMemo(() => {
-        return formControl ? formControl.value : value;
-    }, [formControl?.value, value]);
-    const status = useMemo(() => {
-        return {
-            icon: dateRangeValue ? 'trash-2' : 'calendar',
-            valueInput: dateRangeValue ? rangeFormatTemplate(dateRangeValue) : ''
-        };
-    }, [dateRangeValue]);
-    const onClickInput = useCallback(() => {
-        !readOnly && setModalIsVisible(true);
-    }, [readOnly]);
-    const onChange = useCallback((value) => {
-        setValue(value);
-        onValue?.(value);
-    }, [onValue]);
-    const onClickAction = useCallback(() => {
-        if (dateRangeValue) {
-            formControl?.setValue(valueInitial);
-            formControl?.touch();
-            onChange(valueInitial);
-        }
-        else {
-            setModalIsVisible(true);
-        }
-    }, [dateRangeValue, formControl, valueInitial, onChange]);
-    const onListener = useCallback(({ event, value }) => {
-        event !== 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("span", { 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: status.valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: status.icon, onClick: onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-date-range-modal", 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);
-    useEffect(() => {
-        props.disabled && controller.setState({ focused: false });
-    }, [props.disabled]);
-    const onFocusInput = useCallback(() => {
-        controller.setState({ focused: true });
-    }, [controller.setState]);
-    const onBlurInput = useCallback(() => {
-        controller.setState({ focused: false });
-    }, [controller.setState]);
-    const onClickInput = useCallback(() => {
-        !props.readOnly && controller.setState({ listIsVisible: true });
-    }, [controller.setState, props.readOnly]);
-    const onKeydownInput = useCallback((event) => {
-        switch (event.code) {
-            case 'Space':
-            case 'Enter':
-                controller.setState({ listIsVisible: true });
-                break;
-            case 'Escape':
-            case 'Tab':
-                controller.setState({ listIsVisible: false });
-                break;
-            default:
-                controller.navigationInput(event);
-                break;
-        }
-    }, [controller.setState, controller.navigationInput]);
-    const onClickAction = useCallback(() => {
-        const removable = !props.unremovable && !!controller.value;
-        if (removable) {
-            controller.setState({ listIsVisible: false });
-            controller.setFormValue(undefined);
-            props.onValue?.(props.value);
-        }
-        else {
-            const listIsVisible = !controller.listIsVisible;
-            controller.setState({ listIsVisible });
-            listIsVisible && controller.refInput?.current?.focus();
-        }
-    }, [
-        controller.listIsVisible,
-        controller.value,
-        controller.setState,
-        controller.setFormValue,
-        props.unremovable,
-        props.onValue
-    ]);
-    const onClickBackdrop = useCallback(() => {
-        controller.setState({ listIsVisible: false });
-    }, [controller.setState]);
-    const onChange = useCallback((element) => {
-        !props.disabled && controller.refInput?.current?.focus();
-        if (props.onSelect) {
-            controller.setState({ listIsVisible: false });
-            element.value && props.onSelect(element.value);
-        }
-        else {
-            controller.setFormValue(element);
-            controller.setState({ listIsVisible: false });
-        }
-        props.onValue?.(element.value);
-    }, [
-        controller.setState,
-        controller.setFormValue,
-        props.onSelect,
-        props.onValue,
-        props.disabled
-    ]);
-    const onClickElement = useCallback((element) => {
-        return () => {
-            onChange(element);
-        };
-    }, [onChange]);
-    const onKeydownElement = useCallback((element) => {
-        return (event) => {
-            event.code === 'Enter'
-                ? onChange(element)
-                : controller.navigationElement(event);
-        };
-    }, [onChange, controller.navigationElement]);
-    return {
-        ...controller,
-        onBlurInput,
-        onClickAction,
-        onClickBackdrop,
-        onClickInput,
-        onClickElement,
-        onFocusInput,
-        onKeydownElement,
-        onKeydownInput
-    };
-}
-
-function RlsFieldSelectTemplate(props) {
-    const select = useFieldSelect(props);
-    const { render, suggestions, action, children, formControl, msgErrorDisabled, placeholder, rlsTheme, unremovable } = props;
-    const disabled = useMemo(() => {
-        return formControl?.disabled || props.disabled;
-    }, [formControl?.disabled, props.disabled]);
-    const className = useMemo(() => {
-        return renderClassStatus('rls-field-box', {
-            focused: select.focused && !disabled,
-            error: formControl?.wrong,
-            disabled: disabled,
-            readonly: props.readOnly
-        }, `rls-field-list rls-field-select ${props.className ?? ''}`);
-    }, [
-        formControl?.wrong,
-        select.focused,
-        props.className,
-        props.readOnly,
-        disabled
-    ]);
-    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.refContent, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { 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.refInput, className: "rls-field-list__control", readOnly: true, placeholder: placeholder, value: select.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput, disabled: disabled }), !props.readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: !unremovable && !!select.value ? 'close' : 'arrow-ios-down', onClick: select.onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx(RlsFieldListSuggestions, { elements: suggestions, visible: select.listIsVisible, action: action, disabled: disabled, higher: select.higher, render: render, refList: select.refList, onClickElement: select.onClickElement, onKeydownElement: select.onKeydownElement, onClickBackdrop: select.onClickBackdrop })] }));
-}
-function RlsFieldSelect(props) {
-    const render = useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { className: "rls-field-list__ballot", subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
-    return jsxRuntimeExports.jsx(RlsFieldSelectTemplate, { ...props, render: render });
-}
-
-function RlsPickerColor({ color, formControl, onListener, rlsTheme }) {
-    const initialColor = useMemo(() => formControl?.value ?? color ?? DEFAULT_COLOR, []);
-    const initialHsv = useMemo(() => hexToHsv(initialColor) ?? { h: 258, s: 100, v: 100 }, []);
-    const canvasRef = useRef(null);
-    const hueRef = useRef(null);
-    const alphaRef = useRef(null);
-    const selectionIsActive = useRef(false);
-    const activeSlider = useRef(null);
-    const hexEditing = useRef(false);
-    const [hsv, setHsv] = useState(initialHsv);
-    const [alpha, setAlpha] = useState(1);
-    const [hexInput, setHexInput] = useState(initialColor);
-    const [labels, setLabels] = useState({
-        colorActionCancel: reactI18n('dateActionCancel'),
-        colorActionSelect: reactI18n('dateActionSelect')
-    });
-    const hexColor = useMemo(() => hsvToHex(hsv), [hsv]);
-    const hexValue = useMemo(() => {
-        return hexInput.replace('#', '');
-    }, [hexInput]);
-    const canvasStyle = useMemo(() => {
-        const { r, g, b } = hsvToRgb({ h: hsv.h, s: 100, v: 100 });
-        return {
-            background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent), rgb(${r}, ${g}, ${b})`
-        };
-    }, [hsv.h]);
-    const indicatorPosition = useMemo(() => {
-        return {
-            left: `${(hsv.s / 100) * 100}%`,
-            top: `${100 - (hsv.v / 100) * 100}%`
-        };
-    }, [hsv.s, hsv.v]);
-    const hueSliderStyle = useMemo(() => {
-        return {
-            background: 'linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)'
-        };
-    }, []);
-    const hueIndicatorStyle = useMemo(() => {
-        return { left: `${(hsv.h / 360) * 100}%`, backgroundColor: hexColor };
-    }, [hsv.h, hexColor]);
-    const alphaSliderStyle = useMemo(() => {
-        return {
-            background: `linear-gradient(to right, transparent, ${hexColor})`
-        };
-    }, [hexColor]);
-    const alphaIndicatorStyle = useMemo(() => {
-        return { left: `${alpha * 100}%`, backgroundColor: hexColor };
-    }, [alpha, hexColor]);
-    useEffect(() => {
-        !hexEditing.current && setHexInput(hexColor);
-    }, [hexColor]);
-    useEffect(() => {
-        return i18nSubscribe(() => {
-            setLabels({
-                colorActionCancel: reactI18n('dateActionCancel'),
-                colorActionSelect: reactI18n('dateActionSelect')
-            });
-        });
-    }, []);
-    const getPositionInElement = useCallback((element, clientX, clientY) => {
-        const rect = element.getBoundingClientRect();
-        return {
-            x: (clientX - rect.left) / rect.width,
-            y: (clientY - rect.top) / rect.height
-        };
+    const getPositionInElement = useCallback((element, clientX, clientY) => {
+        const rect = element.getBoundingClientRect();
+        return {
+            x: (clientX - rect.left) / rect.width,
+            y: (clientY - rect.top) / rect.height
+        };
     }, []);
     const updateColorOnCanvas = useEffectEvent((clientX, clientY) => {
         if (!canvasRef.current)
@@ -3599,55 +3371,324 @@ function RlsPickerColor({ color, formControl, onListener, rlsTheme }) {
                 updateAlphaOnSlider(touch.clientX, touch.clientY);
                 break;
         }
-    }, [updateColorOnCanvas, updateHueOnSlider, updateAlphaOnSlider]);
-    const onInactiveSelection = useCallback(() => {
-        selectionIsActive.current = false;
-        activeSlider.current = null;
-    }, []);
-    const onHexChange = useCallback((value) => {
-        setHexInput(value);
-        const normalized = normalizeHex(value);
-        if (normalized) {
-            const hsv = hexToHsv(normalized);
-            hsv && setHsv(hsv);
+    }, [updateColorOnCanvas, updateHueOnSlider, updateAlphaOnSlider]);
+    const onInactiveSelection = useCallback(() => {
+        selectionIsActive.current = false;
+        activeSlider.current = null;
+    }, []);
+    const onHexChange = useCallback((value) => {
+        setHexInput(value);
+        const normalized = normalizeHex(value);
+        if (normalized) {
+            const hsv = hexToHsv(normalized);
+            if (hsv) {
+                setHsv(hsv);
+            }
+        }
+    }, []);
+    const onHexFocus = useCallback(() => {
+        hexEditing.current = true;
+    }, []);
+    const onHexBlur = useEffectEvent(() => {
+        hexEditing.current = false;
+        const normalized = normalizeHex(hexInput);
+        if (normalized) {
+            setHexInput(normalized);
+        }
+        else {
+            setHexInput(hexColor);
+        }
+    });
+    const onHexKeyDown = useCallback((event) => {
+        if (event.key === 'Enter') {
+            onHexBlur();
+        }
+    }, [onHexBlur]);
+    const onHexInputChange = useCallback((event) => onHexChange(event.target.value ? `#${event.target.value}` : ''), [onHexChange]);
+    const onCancel = useCallback(() => {
+        onListener?.({ event: PickerListenerEvent.Cancel });
+    }, [onListener]);
+    const onSelect = useCallback(() => {
+        formControl?.setValue(hexColor);
+        onListener?.({ event: PickerListenerEvent.Select, value: hexColor });
+    }, [formControl, hexColor, onListener]);
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-color", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-color__preview", children: jsxRuntimeExports.jsx("div", { ref: canvasRef, className: "rls-picker-color__canvas", style: canvasStyle, "data-slider": "canvas", onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onInactiveSelection, onMouseLeave: onInactiveSelection, onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onInactiveSelection, children: jsxRuntimeExports.jsx("div", { className: "rls-picker-color__indicator", style: {
+                            left: indicatorPosition.left,
+                            top: indicatorPosition.top
+                        }, children: jsxRuntimeExports.jsx("div", { className: "rls-picker-color__indicator__circle", style: { backgroundColor: hexColor } }) }) }) }), jsxRuntimeExports.jsxs("div", { className: "rls-picker-color__controls", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-color__slider", children: jsxRuntimeExports.jsx("div", { ref: hueRef, className: "rls-picker-color__slider__track", style: hueSliderStyle, "data-slider": "hue", onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onInactiveSelection, onMouseLeave: onInactiveSelection, onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onInactiveSelection, children: jsxRuntimeExports.jsx("div", { className: "rls-picker-color__slider__thumb", style: hueIndicatorStyle }) }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-color__slider", children: jsxRuntimeExports.jsx("div", { ref: alphaRef, className: "rls-picker-color__slider__track rls-picker-color__slider__track--alpha", style: alphaSliderStyle, "data-slider": "alpha", onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onInactiveSelection, onMouseLeave: onInactiveSelection, onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onInactiveSelection, children: jsxRuntimeExports.jsx("div", { className: "rls-picker-color__slider__thumb", style: alphaIndicatorStyle }) }) })] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-color__footer", children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-color__hex", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-color__hex__swatch", style: { backgroundColor: hexColor } }), jsxRuntimeExports.jsx("span", { className: "rls-picker-color__hex__prefix", children: "#" }), jsxRuntimeExports.jsx("input", { className: "rls-picker-color__hex__input", type: "text", maxLength: 6, value: hexValue, onChange: onHexInputChange, onFocus: onHexFocus, onBlur: onHexBlur, onKeyDown: onHexKeyDown })] }) }), jsxRuntimeExports.jsxs("div", { className: "rls-picker-color__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-color__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", onClick: onCancel, children: labels.colorActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-color__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.colorActionSelect }) })] })] }));
+}
+
+function RlsFieldColor({ children, color, disabled: disabledProps, formControl, identifier, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
+    const [value, setValue] = useState(formControl?.value ?? valueInitial);
+    const [modalIsVisible, setModalIsVisible] = useState(false);
+    const colorValue = useMemo(() => {
+        return formControl ? formControl.value : value;
+    }, [formControl?.value, value]);
+    const disabled = useMemo(() => {
+        return formControl?.disabled || disabledProps;
+    }, [formControl?.disabled, disabledProps]);
+    const className = useMemo(() => {
+        return renderClassStatus('rls-field-box', {
+            disabled,
+            readonly: readOnly
+        });
+    }, [disabled, readOnly]);
+    const displayHex = useMemo(() => {
+        const hex = colorValue && hexIsValid(colorValue) ? colorValue : '';
+        return normalizeHex(hex);
+    }, [colorValue]);
+    const onClickInput = useCallback(() => {
+        if (!readOnly) {
+            setModalIsVisible(true);
+        }
+    }, [readOnly]);
+    const onChange = useCallback((value) => {
+        setValue(value);
+        onValue?.(value);
+    }, [onValue]);
+    const onClickAction = useCallback(() => {
+        if (colorValue) {
+            formControl?.setValue(valueInitial);
+            formControl?.touch();
+            onChange(valueInitial);
+        }
+        else {
+            setModalIsVisible(true);
+        }
+    }, [colorValue, formControl, valueInitial, onChange]);
+    const onListener = useCallback(({ event, value }) => {
+        if (event !== PickerListenerEvent.Cancel) {
+            onChange(value);
+        }
+        formControl?.touch();
+        setModalIsVisible(false);
+    }, [formControl, onChange]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-color", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { 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: [displayHex && (jsxRuntimeExports.jsx("div", { className: "rls-field-color__swatch", style: { backgroundColor: displayHex } })), jsxRuntimeExports.jsx("input", { className: "rls-field-color__control", type: "text", value: displayHex, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: colorValue ? 'trash-2' : 'color-palette', onClick: onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-color-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerColor, { formControl: formControl, color: color, disabled: disabled, onListener: onListener }) })] }));
+}
+
+const DATE_FORMAT = '{dd}/{mx}/{yy}';
+const DATE_FORMAT_TITLE = '{dw}, {mx} {dd} de {yy}';
+const DATE_RANGE_FORMAT = '{dd}/{mx}/{yy}';
+
+function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
+    const today = useRef(new Date()); // Initial current date in component
+    const _date = useMemo(() => {
+        return formControl?.value ?? date ?? today.current;
+    }, [formControl?.value, date]);
+    const yearControl = useReactControl(_date.getFullYear());
+    const dayControl = useReactControl(_date.getDate());
+    const monthControl = useReactControl(_date.getMonth());
+    const [visibility, setVisibility] = useState('DAY');
+    const [labels, setLabels] = useState({
+        dateActionCancel: reactI18n('dateActionCancel'),
+        dateActionSelect: reactI18n('dateActionSelect'),
+        dateActionToday: reactI18n('dateActionToday')
+    });
+    const value = useMemo(() => {
+        return new Date(yearControl.value, monthControl.value, dayControl.value);
+    }, [yearControl.value, monthControl.value, dayControl.value]);
+    const classNameComponent = useMemo(() => {
+        return renderClassStatus('rls-picker-date__component', {
+            day: visibility === 'DAY',
+            month: visibility === 'MONTH',
+            year: visibility === 'YEAR'
+        });
+    }, [visibility]);
+    const title = useMemo(() => {
+        return dateFormatTemplate(value, DATE_FORMAT_TITLE);
+    }, [value]);
+    const itIsDisabledToday = useMemo(() => dateOutRange({
+        date: today.current,
+        maxDate,
+        minDate
+    }), [maxDate, minDate]);
+    useEffect(() => {
+        const date = verifyDateRange({ date: _date, minDate, maxDate });
+        yearControl.setValue(date.getFullYear());
+        monthControl.setValue(date.getMonth());
+        dayControl.setValue(date.getDate());
+        formControl?.setValue(date);
+        return i18nSubscribe(() => {
+            setLabels({
+                dateActionCancel: reactI18n('dateActionCancel'),
+                dateActionSelect: reactI18n('dateActionSelect'),
+                dateActionToday: reactI18n('dateActionToday')
+            });
+        });
+    }, []);
+    const onVisibilityDay = useCallback(() => {
+        setVisibility('DAY');
+    }, []);
+    const onVisibilityTitle = useCallback((type) => {
+        if (type === 'month') {
+            setVisibility('MONTH');
+        }
+        else {
+            setVisibility('YEAR');
+        }
+    }, []);
+    const onCancel = useCallback(() => {
+        onListener?.({ event: PickerListenerEvent.Cancel });
+    }, [onListener]);
+    const onToday = useCallback(() => {
+        yearControl.setValue(today.current.getFullYear());
+        dayControl.setValue(today.current.getDate());
+        monthControl.setValue(today.current.getMonth());
+        formControl?.setValue(today.current);
+        onListener?.({
+            event: PickerListenerEvent.Now,
+            value: today.current
+        });
+    }, [formControl, onListener]);
+    const onSelect = useCallback(() => {
+        formControl?.setValue(value);
+        onListener?.({
+            event: PickerListenerEvent.Select,
+            value: 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(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityTitle }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: title }) })] }), jsxRuntimeExports.jsxs("div", { className: classNameComponent, children: [jsxRuntimeExports.jsx(RlsPickerDay, { formControl: dayControl, date: value, month: monthControl.value, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, date: value, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, date: value, 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: "flat", onClick: onCancel, children: labels.dateActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--today", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "calendar", onClick: onToday, disabled: itIsDisabledToday }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.dateActionSelect }) })] }) }))] }));
+}
+
+function RlsFieldDate({ children, date, disabled: disabledProps, formControl, format, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
+    const today = useRef(new Date()); // Initial current date in component
+    const [value, setValue] = useState(formControl?.value ?? valueInitial);
+    const [modalIsVisible, setModalIsVisible] = useState(false);
+    const disabled = useMemo(() => {
+        return formControl?.disabled || disabledProps;
+    }, [formControl?.disabled, disabledProps]);
+    const className = useMemo(() => {
+        return renderClassStatus('rls-field-box', {
+            disabled,
+            readonly: readOnly
+        });
+    }, [disabled, readOnly]);
+    const dateValue = useMemo(() => {
+        return formControl ? formControl.value : value;
+    }, [formControl?.value, value]);
+    const status = useMemo(() => {
+        return {
+            icon: dateValue ? 'trash-2' : 'calendar',
+            label: dateValue
+                ? dateFormatTemplate(dateValue, format ?? DATE_FORMAT)
+                : ''
+        };
+    }, [dateValue, format]);
+    useEffect(() => {
+        const dateSecure = verifyDateRange({
+            date: formControl?.value ?? date ?? today.current,
+            minDate,
+            maxDate
+        });
+        setValue(dateSecure);
+        formControl?.setValue(dateSecure);
+    }, []);
+    const onClickInput = useCallback(() => {
+        if (!readOnly) {
+            setModalIsVisible(true);
+        }
+    }, [readOnly]);
+    const onChange = useCallback((value) => {
+        setValue(value);
+        onValue?.(value);
+    }, [onValue]);
+    const onClickAction = useCallback(() => {
+        if (dateValue) {
+            formControl?.setValue(valueInitial);
+            formControl?.touch();
+            onChange(valueInitial);
+        }
+        else {
+            setModalIsVisible(true);
+        }
+    }, [dateValue, formControl, valueInitial, onChange]);
+    const onListener = useCallback(({ event, value }) => {
+        if (event !== 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("span", { 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: status.label, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: status.icon, onClick: onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-date-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
+}
+
+function rangeFormatTemplate({ maxDate, minDate }) {
+    const minFormat = dateFormatTemplate(minDate, DATE_RANGE_FORMAT);
+    const maxFormat = dateFormatTemplate(maxDate, DATE_RANGE_FORMAT);
+    return `${minFormat} - ${maxFormat}`;
+}
+
+function RlsPickerDateRange({ automatic, date: datePicker, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
+    const _date = useMemo(() => normalizeMinTime(datePicker ?? new Date()), [datePicker]);
+    const _range = useMemo(() => formControl?.value ?? DateRange.now(), [formControl?.value]);
+    const yearControl = useReactControl(_date.getFullYear());
+    const monthControl = useReactControl(_date.getMonth());
+    const rangeControl = useReactControl(_range);
+    const [visibility, setVisibility] = useState('DAY');
+    const [labels, setLabels] = useState({
+        dateActionCancel: reactI18n('dateActionCancel'),
+        dateActionSelect: reactI18n('dateActionSelect')
+    });
+    const value = useMemo(() => {
+        return rangeControl.value ?? _range;
+    }, [rangeControl.value, _range]);
+    const date = useMemo(() => {
+        let value = _date;
+        if (valueIsDefined(yearControl.value)) {
+            value = assignYearInDate(value, yearControl.value);
+        }
+        if (valueIsDefined(monthControl.value)) {
+            value = assignMonthInDate(value, monthControl.value);
         }
+        return value;
+    }, [_date, yearControl.value, monthControl.value]);
+    const classNameComponent = useMemo(() => {
+        return renderClassStatus('rls-picker-date-range__component', {
+            day: visibility === 'DAY',
+            month: visibility === 'MONTH',
+            year: visibility === 'YEAR'
+        });
+    }, [visibility]);
+    const classNameFooter = useMemo(() => {
+        return renderClassStatus('rls-picker-date-range__footer', { automatic });
+    }, [automatic]);
+    const title = useMemo(() => rangeFormatTemplate(value), [value]);
+    useEffect(() => {
+        return i18nSubscribe(() => {
+            setLabels({
+                dateActionCancel: reactI18n('dateActionCancel'),
+                dateActionSelect: reactI18n('dateActionSelect')
+            });
+        });
     }, []);
-    const onHexFocus = useCallback(() => {
-        hexEditing.current = true;
+    useEffect(() => {
+        setVisibility('DAY');
+    }, [rangeControl.value]);
+    const onVisibilityDay = useCallback(() => {
+        setVisibility('DAY');
     }, []);
-    const onHexBlur = useEffectEvent(() => {
-        hexEditing.current = false;
-        const normalized = normalizeHex(hexInput);
-        if (normalized) {
-            setHexInput(normalized);
+    const onVisibilityTitle = useCallback((type) => {
+        if (type === 'month') {
+            setVisibility('MONTH');
         }
         else {
-            setHexInput(hexColor);
+            setVisibility('YEAR');
         }
-    });
-    const onHexKeyDown = useCallback((event) => {
-        event.key === 'Enter' && onHexBlur();
-    }, [onHexBlur]);
-    const onHexInputChange = useCallback((event) => onHexChange(event.target.value ? `#${event.target.value}` : ''), [onHexChange]);
+    }, []);
     const onCancel = useCallback(() => {
         onListener?.({ event: PickerListenerEvent.Cancel });
     }, [onListener]);
     const onSelect = useCallback(() => {
-        formControl?.setValue(hexColor);
-        onListener?.({ event: PickerListenerEvent.Select, value: hexColor });
-    }, [formControl, hexColor, onListener]);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-color", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-color__preview", children: jsxRuntimeExports.jsx("div", { ref: canvasRef, className: "rls-picker-color__canvas", style: canvasStyle, "data-slider": "canvas", onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onInactiveSelection, onMouseLeave: onInactiveSelection, onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onInactiveSelection, children: jsxRuntimeExports.jsx("div", { className: "rls-picker-color__indicator", style: {
-                            left: indicatorPosition.left,
-                            top: indicatorPosition.top
-                        }, children: jsxRuntimeExports.jsx("div", { className: "rls-picker-color__indicator__circle", style: { backgroundColor: hexColor } }) }) }) }), jsxRuntimeExports.jsxs("div", { className: "rls-picker-color__controls", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-color__slider", children: jsxRuntimeExports.jsx("div", { ref: hueRef, className: "rls-picker-color__slider__track", style: hueSliderStyle, "data-slider": "hue", onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onInactiveSelection, onMouseLeave: onInactiveSelection, onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onInactiveSelection, children: jsxRuntimeExports.jsx("div", { className: "rls-picker-color__slider__thumb", style: hueIndicatorStyle }) }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-color__slider", children: jsxRuntimeExports.jsx("div", { ref: alphaRef, className: "rls-picker-color__slider__track rls-picker-color__slider__track--alpha", style: alphaSliderStyle, "data-slider": "alpha", onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onInactiveSelection, onMouseLeave: onInactiveSelection, onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onInactiveSelection, children: jsxRuntimeExports.jsx("div", { className: "rls-picker-color__slider__thumb", style: alphaIndicatorStyle }) }) })] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-color__footer", children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-color__hex", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-color__hex__swatch", style: { backgroundColor: hexColor } }), jsxRuntimeExports.jsx("span", { className: "rls-picker-color__hex__prefix", children: "#" }), jsxRuntimeExports.jsx("input", { className: "rls-picker-color__hex__input", type: "text", maxLength: 6, value: hexValue, onChange: onHexInputChange, onFocus: onHexFocus, onBlur: onHexBlur, onKeyDown: onHexKeyDown })] }) }), jsxRuntimeExports.jsxs("div", { className: "rls-picker-color__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-color__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", onClick: onCancel, children: labels.colorActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-color__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.colorActionSelect }) })] })] }));
+        formControl?.setValue(value);
+        onListener?.({ event: PickerListenerEvent.Select, value });
+    }, [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(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: visibility === 'MONTH' ? 'year' : 'month', onClick: onVisibilityTitle }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__title", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: title }) })] }), 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: "flat", onClick: onCancel, children: labels.dateActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.dateActionSelect }) })] }) })] }));
 }
 
-function RlsFieldColor({ children, color, disabled: disabledProps, formControl, identifier, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
-    const [value, setValue] = useState(formControl?.value ?? valueInitial);
+function RlsFieldDateRange({ children, date, disabled: disabledProps, formControl, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
+    const currentDate = useMemo(() => date ?? new Date(), [date]);
+    const [value, setValue] = useState(formControl?.value || valueInitial);
     const [modalIsVisible, setModalIsVisible] = useState(false);
-    const colorValue = useMemo(() => {
-        return formControl ? formControl.value : value;
-    }, [formControl?.value, value]);
     const disabled = useMemo(() => {
         return formControl?.disabled || disabledProps;
     }, [formControl?.disabled, disabledProps]);
@@ -3657,19 +3698,26 @@ function RlsFieldColor({ children, color, disabled: disabledProps, formControl,
             readonly: readOnly
         });
     }, [disabled, readOnly]);
-    const displayHex = useMemo(() => {
-        const hex = colorValue && hexIsValid(colorValue) ? colorValue : '';
-        return normalizeHex(hex);
-    }, [colorValue]);
+    const dateRangeValue = useMemo(() => {
+        return formControl ? formControl.value : value;
+    }, [formControl?.value, value]);
+    const status = useMemo(() => {
+        return {
+            icon: dateRangeValue ? 'trash-2' : 'calendar',
+            valueInput: dateRangeValue ? rangeFormatTemplate(dateRangeValue) : ''
+        };
+    }, [dateRangeValue]);
     const onClickInput = useCallback(() => {
-        !readOnly && setModalIsVisible(true);
+        if (!readOnly) {
+            setModalIsVisible(true);
+        }
     }, [readOnly]);
     const onChange = useCallback((value) => {
         setValue(value);
         onValue?.(value);
     }, [onValue]);
     const onClickAction = useCallback(() => {
-        if (colorValue) {
+        if (dateRangeValue) {
             formControl?.setValue(valueInitial);
             formControl?.touch();
             onChange(valueInitial);
@@ -3677,13 +3725,15 @@ function RlsFieldColor({ children, color, disabled: disabledProps, formControl,
         else {
             setModalIsVisible(true);
         }
-    }, [colorValue, formControl, valueInitial, onChange]);
+    }, [dateRangeValue, formControl, valueInitial, onChange]);
     const onListener = useCallback(({ event, value }) => {
-        event !== PickerListenerEvent.Cancel && onChange(value);
+        if (event !== PickerListenerEvent.Cancel) {
+            onChange(value);
+        }
         formControl?.touch();
         setModalIsVisible(false);
     }, [formControl, onChange]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-color", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { 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: [displayHex && (jsxRuntimeExports.jsx("div", { className: "rls-field-color__swatch", style: { backgroundColor: displayHex } })), jsxRuntimeExports.jsx("input", { className: "rls-field-color__control", type: "text", value: displayHex, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: colorValue ? 'trash-2' : 'color-palette', onClick: onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-color-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerColor, { formControl: formControl, color: color, disabled: disabled, onListener: onListener }) })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { 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: status.valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: status.icon, onClick: onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-date-range-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
 }
 
 const MAX_LIST_HEIGHT_REM = 90;
@@ -3724,8 +3774,9 @@ function useFieldList(props) {
     const [selected, setSelected] = useState([]);
     useEffect(() => {
         function onCloseSuggestions({ target }) {
-            !refContent?.current?.contains(target) &&
+            if (!refContent?.current?.contains(target)) {
                 setState((state) => ({ ...state, listIsVisible: false }));
+            }
         }
         document.addEventListener('click', onCloseSuggestions);
         return () => {
@@ -3800,7 +3851,9 @@ function useFieldList(props) {
     }, [selected, formControl, props.onValue]);
     const onKeydownElement = useCallback((element) => {
         return (event) => {
-            event.code === 'Enter' && toggleElement(element);
+            if (event.code === 'Enter') {
+                toggleElement(element);
+            }
         };
     }, [toggleElement]);
     return {
@@ -3849,6 +3902,141 @@ function RlsFieldList(props) {
     return jsxRuntimeExports.jsx(RlsFieldListInner, { ...props, render: render, fieldList: fieldList });
 }
 
+function useFieldSelect(props) {
+    const controller = useListController(props);
+    useEffect(() => {
+        if (props.disabled) {
+            controller.setState({ focused: false });
+        }
+    }, [props.disabled]);
+    const onFocusInput = useCallback(() => {
+        controller.setState({ focused: true });
+    }, [controller.setState]);
+    const onBlurInput = useCallback(() => {
+        controller.setState({ focused: false });
+    }, [controller.setState]);
+    const onClickInput = useCallback(() => {
+        if (!props.readOnly) {
+            controller.setState({ listIsVisible: true });
+        }
+    }, [controller.setState, props.readOnly]);
+    const onKeydownInput = useCallback((event) => {
+        switch (event.code) {
+            case 'Space':
+            case 'Enter':
+                controller.setState({ listIsVisible: true });
+                break;
+            case 'Escape':
+            case 'Tab':
+                controller.setState({ listIsVisible: false });
+                break;
+            default:
+                controller.navigationInput(event);
+                break;
+        }
+    }, [controller.setState, controller.navigationInput]);
+    const onClickAction = useCallback(() => {
+        const removable = !props.unremovable && !!controller.value;
+        if (removable) {
+            controller.setState({ listIsVisible: false });
+            controller.setFormValue(undefined);
+            props.onValue?.(props.value);
+        }
+        else {
+            const listIsVisible = !controller.listIsVisible;
+            controller.setState({ listIsVisible });
+            if (listIsVisible) {
+                controller.refInput?.current?.focus();
+            }
+        }
+    }, [
+        controller.listIsVisible,
+        controller.value,
+        controller.setState,
+        controller.setFormValue,
+        props.unremovable,
+        props.onValue
+    ]);
+    const onClickBackdrop = useCallback(() => {
+        controller.setState({ listIsVisible: false });
+    }, [controller.setState]);
+    const onChange = useCallback((element) => {
+        if (!props.disabled) {
+            controller.refInput?.current?.focus();
+        }
+        if (props.onSelect) {
+            controller.setState({ listIsVisible: false });
+            if (element.value) {
+                props.onSelect(element.value);
+            }
+        }
+        else {
+            controller.setFormValue(element);
+            controller.setState({ listIsVisible: false });
+        }
+        props.onValue?.(element.value);
+    }, [
+        controller.setState,
+        controller.setFormValue,
+        props.onSelect,
+        props.onValue,
+        props.disabled
+    ]);
+    const onClickElement = useCallback((element) => {
+        return () => {
+            onChange(element);
+        };
+    }, [onChange]);
+    const onKeydownElement = useCallback((element) => {
+        return (event) => {
+            if (event.code === 'Enter') {
+                onChange(element);
+            }
+            else {
+                controller.navigationElement(event);
+            }
+        };
+    }, [onChange, controller.navigationElement]);
+    return {
+        ...controller,
+        onBlurInput,
+        onClickAction,
+        onClickBackdrop,
+        onClickInput,
+        onClickElement,
+        onFocusInput,
+        onKeydownElement,
+        onKeydownInput
+    };
+}
+
+function RlsFieldSelectTemplate(props) {
+    const select = useFieldSelect(props);
+    const { render, suggestions, action, children, formControl, msgErrorDisabled, placeholder, rlsTheme, unremovable } = props;
+    const disabled = useMemo(() => {
+        return formControl?.disabled || props.disabled;
+    }, [formControl?.disabled, props.disabled]);
+    const className = useMemo(() => {
+        return renderClassStatus('rls-field-box', {
+            focused: select.focused && !disabled,
+            error: formControl?.wrong,
+            disabled: disabled,
+            readonly: props.readOnly
+        }, `rls-field-list rls-field-select ${props.className ?? ''}`);
+    }, [
+        formControl?.wrong,
+        select.focused,
+        props.className,
+        props.readOnly,
+        disabled
+    ]);
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.refContent, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { 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.refInput, className: "rls-field-list__control", readOnly: true, placeholder: placeholder, value: select.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput, disabled: disabled }), !props.readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: !unremovable && !!select.value ? 'close' : 'arrow-ios-down', onClick: select.onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx(RlsFieldListSuggestions, { elements: suggestions, visible: select.listIsVisible, action: action, disabled: disabled, higher: select.higher, render: render, refList: select.refList, onClickElement: select.onClickElement, onKeydownElement: select.onKeydownElement, onClickBackdrop: select.onClickBackdrop })] }));
+}
+function RlsFieldSelect(props) {
+    const render = useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { className: "rls-field-list__ballot", subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
+    return jsxRuntimeExports.jsx(RlsFieldSelectTemplate, { ...props, render: render });
+}
+
 function RlsFormNavigation({ children, className, controller, visible, rlsTheme }) {
     const classNameForm = useMemo(() => {
         return renderClassStatus('rls-form-navigation', { visible: controller?.visible ?? visible }, className);
@@ -3953,7 +4141,7 @@ function useResize(props) {
     const dimension = useRef({ height: 0, width: 0 });
     const observer = useCallback((entries) => {
         const { height, width } = entries[0].contentRect;
-        onResize &&
+        if (onResize) {
             onResize({
                 current: dimension.current,
                 dimension: {
@@ -3961,6 +4149,7 @@ function useResize(props) {
                     width
                 }
             });
+        }
         dimension.current = { height, width };
     }, []);
     useEffect(() => {
@@ -4252,7 +4441,9 @@ function useImageEditorController(options) {
     }, []);
     const onEditorValue = useCallback((image) => {
         setSrcEditor(undefined);
-        options.onValue && options.onValue(image);
+        if (options.onValue) {
+            options.onValue(image);
+        }
     }, [options.onValue]);
     const onCancel = useCallback(() => {
         setSrcEditor(undefined);
@@ -4271,7 +4462,9 @@ function useImageEditorController(options) {
         onCancel
     ]);
     const onImageChooser = useCallback(() => {
-        !options.disabled && refInput.current.click();
+        if (!options.disabled) {
+            refInput.current.click();
+        }
     }, [options.disabled]);
     return { onImageChooser, RlsImageEditorChooser };
 }
@@ -4284,7 +4477,9 @@ function RlsImageChooser(props) {
     }, [props.onValue]);
     const controller = useImageEditorController({ ...props, onValue });
     useEffect(() => {
-        props.src && setSrc(props.src);
+        if (props.src) {
+            setSrc(props.src);
+        }
     }, [props.src]);
     return (jsxRuntimeExports.jsxs("div", { className: "rls-image-chooser", children: [jsxRuntimeExports.jsx("div", { className: "rls-image-chooser__avatar", onClick: controller.onImageChooser, children: src && jsxRuntimeExports.jsx("img", { src: src }) }), controller.RlsImageEditorChooser] }));
 }
@@ -4294,7 +4489,9 @@ function RlsModalSheet({ autoclose, children, className, controller, onAutoClose
         return renderClassStatus('rls-modal-sheet', { visible: controller?.visible ?? visible }, className);
     }, [className, visible, controller?.visible]);
     const onClickBackdrop = useCallback(() => {
-        autoclose && controller?.close();
+        if (autoclose) {
+            controller?.close();
+        }
         onAutoClose?.();
     }, [autoclose, controller, onAutoClose]);
     return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameModal, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal-sheet__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal-sheet__backdrop", onClick: onClickBackdrop })] }), document.body);
@@ -4383,7 +4580,9 @@ function useSnackbar() {
         visible: false
     });
     const onClose = useCallback(() => {
-        timeoutId.current && clearTimeout(timeoutId.current);
+        if (timeoutId.current) {
+            clearTimeout(timeoutId.current);
+        }
         timeoutId.current = undefined;
         setState((state) => ({ ...state, visible: false }));
     }, []);
@@ -4498,9 +4697,9 @@ function useDropdownController(effect = '0% 0%') {
     const openWithEvent = useCallback((event) => {
         const rectContent = component.current.getBoundingClientRect();
         const rectElement = event.target.getBoundingClientRect();
-        let positionX = 0;
-        let positionY = 0;
-        let effect = '0% 0%';
+        let positionX;
+        let positionY;
+        let effect;
         let transform = 0;
         const elementX = rectElement.x + rectElement.width / 2;
         const elementY = rectElement.y + rectElement.height / 2;