@rolster/react-components 19.6.4 → 19.6.9

package/dist/cjs/index.cjs

@@ -433,12 +433,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();
 }
 
@@ -494,7 +495,9 @@ function RlsAreaText({ autoComplete, disabled, formControl, identifier, onBlur,
     require$$0.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]);
@@ -512,7 +515,9 @@ function RlsAreaText({ autoComplete, disabled, formControl, identifier, onBlur,
     }, [formControl, onValue]);
     const onKeyDownArea = require$$0.useCallback((event) => {
         onKeyDown?.(event);
-        event.key === 'Enter' && onEnter?.();
+        if (event.key === 'Enter') {
+            onEnter?.();
+        }
     }, [onKeyDown, onEnter]);
     const onKeyUpArea = require$$0.useCallback((event) => {
         onKeyUp?.(event);
@@ -675,7 +680,9 @@ function RlsInput({ children, decimals, disabled, formControl, identifier, onBlu
     require$$0.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]);
@@ -691,7 +698,9 @@ function RlsInput({ children, decimals, disabled, formControl, identifier, onBlu
     }, [formControl, onValue, type, decimals]);
     const onKeyDownInput = require$$0.useCallback((event) => {
         onKeyDown?.(event);
-        event.key === 'Enter' && onEnter?.();
+        if (event.key === 'Enter') {
+            onEnter?.();
+        }
     }, [onKeyDown, onEnter]);
     const onKeyUpInput = require$$0.useCallback((event) => {
         onKeyUp?.(event);
@@ -730,9 +739,9 @@ function RlsInputCounter({ className, disabled, formControl, identifier, max, mi
     require$$0.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]);
@@ -753,7 +762,9 @@ function RlsInputCounter({ className, disabled, formControl, identifier, max, mi
     const incrementIsAllowed = require$$0.useMemo(() => max !== undefined && value >= max, [max, value]);
     const onChangeInput = require$$0.useCallback((event) => {
         const parsed = parseFloat(event.target.value);
-        !isNaN(parsed) && onUpdate(parsed);
+        if (!isNaN(parsed)) {
+            onUpdate(parsed);
+        }
     }, [onUpdate]);
     const onFocusInput = require$$0.useCallback(() => {
         setFocused(true);
@@ -776,7 +787,12 @@ function RlsInputDecimal(props) {
     }, [formControl?.value, valueInput]);
     const onValueInput = require$$0.useCallback((value) => {
         const valueDecimal = commons.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 };
@@ -787,7 +803,9 @@ function RlsInputMoney(props) {
     const { decimals, formControl, identifier, onValue, symbol, value } = props;
     const [valueInput, setValueInput] = require$$0.useState(formControl?.value ?? value ?? 0);
     const onValueInput = require$$0.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 }) }) }));
@@ -797,7 +815,9 @@ function RlsInputNumber(props) {
     const { formControl, identifier, onValue, value } = props;
     const [valueInput, setValueInput] = require$$0.useState(formControl?.value ?? value ?? 0);
     const onValueInput = require$$0.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 }) }));
@@ -811,7 +831,9 @@ function RlsInputPassword({ disabled, formControl, identifier, onEnter, onKeyDow
     }, [formControl, onValue]);
     const _onKeyDown = require$$0.useCallback((event) => {
         onKeyDown?.(event);
-        event.key === 'Enter' && onEnter?.();
+        if (event.key === 'Enter') {
+            onEnter?.();
+        }
     }, [onKeyDown, onEnter]);
     const _onKeyUp = require$$0.useCallback((event) => {
         onKeyUp?.(event);
@@ -837,7 +859,9 @@ function RlsInputPercentage(props) {
     const { formControl, identifier, onValue, value } = props;
     const [valueInput, setValueInput] = require$$0.useState(formControl?.value ?? value ?? 0);
     const onValueInput = require$$0.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, "%"] }) }));
@@ -849,7 +873,9 @@ function RlsInputSearch({ formControl, disabled, identifier, onEnter, onSearch,
         return renderClassStatus('rls-input-search', { disabled });
     }, [disabled]);
     const onValue = require$$0.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 }))] }));
 }
@@ -858,7 +884,9 @@ function RlsInputText(props) {
     const { formControl, identifier, onValue, value } = props;
     const [valueInput, setValueInput] = require$$0.useState(formControl?.value ?? value ?? '');
     const onValueInput = require$$0.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 }) }));
@@ -1381,7 +1409,9 @@ function RlsButtonToggle({ onAction, options, type, automatic, disabled, rlsThem
     const [visible, setVisible] = require$$0.useState(false);
     require$$0.useEffect(() => {
         function onCloseMenu({ target }) {
-            !componentRef?.current?.contains(target) && setVisible(false);
+            if (!componentRef?.current?.contains(target)) {
+                setVisible(false);
+            }
         }
         document.addEventListener('click', onCloseMenu);
         return () => {
@@ -1400,15 +1430,21 @@ function RlsButtonToggle({ onAction, options, type, automatic, disabled, rlsThem
     const onSelectAction = require$$0.useCallback((action) => {
         setAction(() => action);
         setVisible(() => false);
-        automatic && onAction(action.value);
+        if (automatic) {
+            onAction(action.value);
+        }
     }, [onAction, automatic]);
     const onClickAction = require$$0.useCallback(() => {
-        action && onAction(action.value);
+        if (action) {
+            onAction(action.value);
+        }
     }, [action, onAction]);
     const onClickOption = require$$0.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))) }) })] }));
 }
@@ -1541,7 +1577,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 = require$$0.useMemo(() => {
         return formControl?.disabled || props.disabled;
@@ -1552,12 +1588,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 = require$$0.useMemo(() => {
         return formControl?.disabled || props.disabled;
@@ -1568,14 +1604,14 @@ 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: disabledProp, formControl, identifier, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value }) {
+function RlsFieldFile({ accept, children, disabled: _disabled, formControl, identifier, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value }) {
     const inputRef = require$$0.useRef(null);
-    const disabled = require$$0.useMemo(() => formControl?.disabled || disabledProp, [formControl?.disabled, disabledProp]);
+    const disabled = require$$0.useMemo(() => formControl?.disabled || _disabled, [formControl?.disabled, _disabled]);
     const className = require$$0.useMemo(() => renderClassStatus('rls-field-box', {
         disabled,
         error: formControl?.wrong,
@@ -1605,9 +1641,11 @@ function RlsFieldFile({ accept, children, disabled: disabledProp, formControl, i
         event.target.value = '';
     }, [formControl, onValue]);
     const onClickControl = require$$0.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-2', disabled: disabled, onClick: onClickAction })] }) }), !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", 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 }))] }));
 }
 
 const reactI18n = i18n.i18n({
@@ -1680,7 +1718,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 = require$$0.useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
@@ -1692,11 +1730,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 = require$$0.useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
@@ -1708,7 +1746,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) {
@@ -1732,7 +1770,7 @@ function RlsFieldPassword(props) {
 }
 
 function RlsFieldPercentage(props) {
-    const { children, formControl, identifier, rlsTheme } = props;
+    const { action, children, formControl, identifier, rlsTheme } = props;
     const disabled = require$$0.useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
@@ -1744,7 +1782,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 }) {
@@ -1752,7 +1790,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 = require$$0.useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
@@ -1764,7 +1802,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 }) {
@@ -1774,9 +1812,14 @@ function useFormToggleController({ disabled, formControl }) {
     }, [formControl?.value]);
     const onToggle = require$$0.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 };
@@ -1878,8 +1921,9 @@ function RlsPagination({ suggestions, count, filter, onPagination }) {
         setTemplate(template);
     }, [onPagination]);
     const refreshPagination = require$$0.useCallback((pagination) => {
-        pagination &&
+        if (pagination) {
             refreshTemplate(pagination.template, pagination.page.collection);
+        }
     }, [refreshTemplate]);
     require$$0.useEffect(() => {
         const pagination = new components.PaginationController({
@@ -1925,7 +1969,9 @@ function RlsPickerDayElement({ day, onSelect, disabled }) {
         });
     }, [day, disabled]);
     const onClick = require$$0.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 || '??' }) }));
 }
@@ -1935,7 +1981,12 @@ function RlsPickerDay({ date, disabled, formControl, maxDate, month, minDate, on
     const [value, setValue] = require$$0.useState(formControl?.value ?? dateDay.getDate());
     const [_, setI18nVersion] = require$$0.useState(0);
     const setDayValue = require$$0.useCallback((value) => {
-        formControl ? formControl.setValue(value) : setValue(value);
+        if (formControl) {
+            formControl.setValue(value);
+        }
+        else {
+            setValue(value);
+        }
     }, [formControl]);
     const onSelect = require$$0.useCallback((value) => {
         setDayValue(value);
@@ -1949,13 +2000,21 @@ function RlsPickerDay({ date, disabled, formControl, maxDate, month, minDate, on
     require$$0.useEffect(() => {
         const options = createPickerOptions();
         const day = components.verifyDayPicker(options);
-        day ? setDayValue(day) : setWeeks(components.createDayPicker(options));
+        if (day) {
+            setDayValue(day);
+        }
+        else {
+            setWeeks(components.createDayPicker(options));
+        }
     }, [dateDay, month, year, value, minDate, maxDate]);
     require$$0.useEffect(() => {
         const day = components.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 = require$$0.useCallback(() => {
         return {
@@ -1984,7 +2043,9 @@ function RlsPickerDayRangeElement({ day, onSelect, disabled }) {
         });
     }, [day.disabled, day.end, day.forbidden, day.ranged, day.source, disabled]);
     const onClick = require$$0.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 || '??' }) }));
 }
@@ -2040,10 +2101,9 @@ function RlsPickerMonthElement({ month, onSelect, disabled }) {
         });
     }, [month.disabled, month.focused, month.selected, disabled]);
     const onClick = require$$0.useCallback(() => {
-        commons.valueIsDefined(month.value) &&
-            !month.disabled &&
-            !disabled &&
+        if (commons.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 }) }));
 }
@@ -2052,7 +2112,12 @@ function RlsPickerMonth({ date, disabled, formControl, maxDate, minDate, onValue
     const [months, setMonths] = require$$0.useState([]);
     const [value, setValue] = require$$0.useState(formControl?.value ?? dateMonth.getMonth());
     const setMonthValue = require$$0.useCallback((value) => {
-        formControl ? formControl.setValue(value) : setValue(value);
+        if (formControl) {
+            formControl.setValue(value);
+        }
+        else {
+            setValue(value);
+        }
     }, [formControl]);
     const onSelect = require$$0.useCallback((value) => {
         setMonthValue(value);
@@ -2067,9 +2132,12 @@ function RlsPickerMonth({ date, disabled, formControl, maxDate, minDate, onValue
             maxDate
         };
         const month = components.verifyMonthPicker(options);
-        commons.valueIsDefined(month)
-            ? setMonthValue(month)
-            : setMonths(components.createMonthPicker(options));
+        if (commons.valueIsDefined(month)) {
+            setMonthValue(month);
+        }
+        else {
+            setMonths(components.createMonthPicker(options));
+        }
     }, [dateMonth, year, value, minDate, maxDate]);
     require$$0.useEffect(() => {
         const month = components.verifyMonthPicker({
@@ -2079,9 +2147,12 @@ function RlsPickerMonth({ date, disabled, formControl, maxDate, minDate, onValue
             minDate,
             maxDate
         });
-        commons.valueIsDefined(month)
-            ? formControl?.setValue(month)
-            : setValue(formControl?.value ?? dateMonth.getMonth());
+        if (commons.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))) }));
 }
@@ -2123,11 +2194,17 @@ function RlsPickerSelectorTitle({ monthControl, type, yearControl, date, disable
         onClick?.('year');
     }, [onClick]);
     const onPreviousYear = require$$0.useCallback(() => {
-        commons.valueIsDefined(yearControl.value) &&
+        if (commons.valueIsDefined(yearControl.value)) {
             yearControl.setValue(yearControl.value - 1);
+        }
     }, [yearControl.value]);
     const onPrevious = require$$0.useCallback(() => {
-        type === 'month' ? onPreviousMonth() : onPreviousYear();
+        if (type === 'month') {
+            onPreviousMonth();
+        }
+        else {
+            onPreviousYear();
+        }
     }, [type, onPreviousMonth, onPreviousYear]);
     const onNextMonth = require$$0.useCallback(() => {
         if (commons.valueIsDefined(monthControl.value) &&
@@ -2142,11 +2219,17 @@ function RlsPickerSelectorTitle({ monthControl, type, yearControl, date, disable
         }
     }, [monthControl.value, yearControl.value]);
     const onNextYear = require$$0.useCallback(() => {
-        commons.valueIsDefined(yearControl.value) &&
+        if (commons.valueIsDefined(yearControl.value)) {
             yearControl.setValue(yearControl.value + 1);
+        }
     }, [yearControl.value]);
     const onNext = require$$0.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 })] }));
 }
@@ -2160,7 +2243,9 @@ function RlsPickerYearElement({ onSelect, year, disabled }) {
         });
     }, [year.disabled, year.focused, year.selected, disabled]);
     const onClick = require$$0.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 || '????' }) }));
 }
@@ -2179,14 +2264,26 @@ function RlsPickerYear({ date, disabled, formControl, maxDate, minDate, onValue,
     require$$0.useEffect(() => {
         const options = createPickerOptions();
         const validYear = components.verifyYearPicker(options);
-        validYear ? setYear(validYear) : setTemplate(components.createYearPicker(options));
+        if (validYear) {
+            setYear(validYear);
+        }
+        else {
+            setTemplate(components.createYearPicker(options));
+        }
     }, [dateYear, year, minDate, maxDate]);
     require$$0.useEffect(() => {
         const yearValue = formControl?.value;
-        commons.valueIsDefined(yearValue) && yearValue !== year && setYear(yearValue);
+        if (commons.valueIsDefined(yearValue) && yearValue !== year) {
+            setYear(yearValue);
+        }
     }, [formControl?.value]);
     const onSelect = require$$0.useCallback((value) => {
-        formControl ? formControl.setValue(value) : setYear(value);
+        if (formControl) {
+            formControl.setValue(value);
+        }
+        else {
+            setYear(value);
+        }
         onValue?.(value);
     }, [formControl, onValue]);
     const onClickPrev = require$$0.useCallback(() => {
@@ -2261,7 +2358,9 @@ function RlsTab({ onSelect, tab, value }) {
         });
     }, [tab, value]);
     const onClick = require$$0.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 }) }));
 }
@@ -2273,7 +2372,9 @@ function RlsTabs({ tabs, onValue, rlsTheme }) {
     }, [onValue]);
     require$$0.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));
@@ -2289,7 +2390,9 @@ function RlsBottomSheet({ autoclose, children, className, controller, onBackdrop
         return renderClassStatus('rls-bottom-sheet', { visible: controller?.visible ?? visible }, className);
     }, [className, visible, controller?.visible]);
     const onClickBackdrop = require$$0.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);
@@ -2445,8 +2548,9 @@ function RlsDropdown({ children, controller, rlsTheme }) {
     }, [controller.visible]);
     require$$0.useEffect(() => {
         function onCloseDropdown({ target }) {
-            !controller.component.current.contains(target) &&
+            if (!controller.component.current.contains(target)) {
                 controller.close();
+            }
         }
         document.addEventListener('click', onCloseDropdown);
         return () => {
@@ -2500,8 +2604,9 @@ function useListController(props) {
     const valueProtected = require$$0.useRef(undefined);
     require$$0.useEffect(() => {
         function onCloseSuggestions({ target }) {
-            !refContent?.current?.contains(target) &&
+            if (!refContent?.current?.contains(target)) {
                 refreshState((state) => ({ ...state, listIsVisible: false }));
+            }
         }
         document.addEventListener('click', onCloseSuggestions);
         return () => {
@@ -2525,9 +2630,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 }));
@@ -2535,12 +2643,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;
@@ -2560,9 +2676,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 = require$$0.useCallback((event) => {
         if (state.listIsVisible) {
@@ -2595,7 +2714,7 @@ function useListController(props) {
     };
 }
 
-const DURATION_ANIMATION$1 = 240;
+const DURATION_ANIMATION$2 = 240;
 const MAX_ELEMENTS = 6;
 function useFieldAutocomplete(props) {
     const controller = useListController(props);
@@ -2627,7 +2746,9 @@ function useFieldAutocomplete(props) {
         refreshCoincidences(props.suggestions, pattern, reboot);
     }, [props.suggestions, pattern]);
     require$$0.useEffect(() => {
-        props.disabled && controller.setState({ focused: false });
+        if (props.disabled) {
+            controller.setState({ focused: false });
+        }
     }, [props.disabled, controller.setState]);
     const onFocusInput = require$$0.useCallback(() => {
         controller.setState({ focused: true });
@@ -2652,7 +2773,7 @@ function useFieldAutocomplete(props) {
             clearTimeout(focusTimeoutId.current);
             focusTimeoutId.current = setTimeout(() => {
                 controller.refInput?.current?.focus();
-            }, DURATION_ANIMATION$1);
+            }, DURATION_ANIMATION$2);
         }
     }, [controller.setState, props.readOnly]);
     require$$0.useEffect(() => {
@@ -2682,7 +2803,9 @@ function useFieldAutocomplete(props) {
     }, [controller.setState]);
     const onChange = require$$0.useCallback((element) => {
         if (props.onSelect) {
-            element.value && props.onSelect(element.value);
+            if (element.value) {
+                props.onSelect(element.value);
+            }
         }
         else {
             controller.setFormValue(element);
@@ -2710,9 +2833,12 @@ function useFieldAutocomplete(props) {
     }, [onChange]);
     const onKeydownElement = require$$0.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 {
@@ -2766,7 +2892,9 @@ function RlsFieldAutocompleteTemplate(props) {
         onSearch?.(autocomplete.pattern);
     }, [onSearch, autocomplete.pattern]);
     const onKeyDownPattern = require$$0.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 = require$$0.useMemo(() => ({
@@ -2803,7 +2931,9 @@ function RlsModal({ autoclose, children, className, controller, onBackdrop, visi
         return renderClassStatus('rls-modal', { visible: controller?.visible ?? visible }, className);
     }, [className, visible, controller?.visible]);
     const onClickBackdrop = require$$0.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);
@@ -2904,7 +3034,12 @@ function RlsPickerClock({ formControl, onListener, rlsTheme, time }) {
         });
     }, []);
     require$$0.useEffect(() => {
-        selectionIsHours ? refreshClockHour() : refreshClockMinute();
+        if (selectionIsHours) {
+            refreshClockHour();
+        }
+        else {
+            refreshClockMinute();
+        }
     }, [selectionIsHours]);
     require$$0.useEffect(() => {
         if (!changeIsInternal.current && formControl?.value) {
@@ -2924,7 +3059,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 = require$$0.useCallback((value) => {
         const angle = value * radianUnit;
@@ -3041,7 +3181,9 @@ function RlsFieldClock({ children, disabled: disabledProps, formControl, identif
         };
     }, [timeValue]);
     const onClickInput = require$$0.useCallback(() => {
-        !readOnly && setModalIsVisible(true);
+        if (!readOnly) {
+            setModalIsVisible(true);
+        }
     }, [readOnly]);
     const onChange = require$$0.useCallback((value) => {
         setValue(value);
@@ -3058,452 +3200,82 @@ function RlsFieldClock({ children, disabled: disabledProps, formControl, identif
         }
     }, [timeValue, formControl, valueInitial, onChange]);
     const onListener = require$$0.useCallback(({ event, value }) => {
-        event !== components.PickerListenerEvent.Cancel && onChange(value);
+        if (event !== components.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 = require$$0.useRef(new Date()); // Initial current date in component
-    const _date = require$$0.useMemo(() => {
-        return formControl?.value ?? date ?? today.current;
-    }, [formControl?.value, date]);
-    const yearControl = reactForms.useReactControl(_date.getFullYear());
-    const dayControl = reactForms.useReactControl(_date.getDate());
-    const monthControl = reactForms.useReactControl(_date.getMonth());
-    const [visibility, setVisibility] = require$$0.useState('DAY');
+function RlsPickerColor({ color, formControl, onListener, rlsTheme }) {
+    const initialColor = require$$0.useMemo(() => formControl?.value ?? color ?? DEFAULT_COLOR, []);
+    const initialHsv = require$$0.useMemo(() => hexToHsv(initialColor) ?? { h: 258, s: 100, v: 100 }, []);
+    const canvasRef = require$$0.useRef(null);
+    const hueRef = require$$0.useRef(null);
+    const alphaRef = require$$0.useRef(null);
+    const selectionIsActive = require$$0.useRef(false);
+    const activeSlider = require$$0.useRef(null);
+    const hexEditing = require$$0.useRef(false);
+    const [hsv, setHsv] = require$$0.useState(initialHsv);
+    const [alpha, setAlpha] = require$$0.useState(1);
+    const [hexInput, setHexInput] = require$$0.useState(initialColor);
     const [labels, setLabels] = require$$0.useState({
-        dateActionCancel: reactI18n('dateActionCancel'),
-        dateActionSelect: reactI18n('dateActionSelect'),
-        dateActionToday: reactI18n('dateActionToday')
+        colorActionCancel: reactI18n('dateActionCancel'),
+        colorActionSelect: reactI18n('dateActionSelect')
     });
-    const value = require$$0.useMemo(() => {
-        return new Date(yearControl.value, monthControl.value, dayControl.value);
-    }, [yearControl.value, monthControl.value, dayControl.value]);
-    const classNameComponent = require$$0.useMemo(() => {
-        return renderClassStatus('rls-picker-date__component', {
-            day: visibility === 'DAY',
-            month: visibility === 'MONTH',
-            year: visibility === 'YEAR'
-        });
-    }, [visibility]);
-    const title = require$$0.useMemo(() => {
-        return dates.dateFormatTemplate(value, DATE_FORMAT_TITLE);
-    }, [value]);
-    const itIsDisabledToday = require$$0.useMemo(() => components.dateOutRange({
-        date: today.current,
-        maxDate,
-        minDate
-    }), [maxDate, minDate]);
+    const hexColor = require$$0.useMemo(() => hsvToHex(hsv), [hsv]);
+    const hexValue = require$$0.useMemo(() => {
+        return hexInput.replace('#', '');
+    }, [hexInput]);
+    const canvasStyle = require$$0.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 = require$$0.useMemo(() => {
+        return {
+            left: `${(hsv.s / 100) * 100}%`,
+            top: `${100 - (hsv.v / 100) * 100}%`
+        };
+    }, [hsv.s, hsv.v]);
+    const hueSliderStyle = require$$0.useMemo(() => {
+        return {
+            background: 'linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)'
+        };
+    }, []);
+    const hueIndicatorStyle = require$$0.useMemo(() => {
+        return { left: `${(hsv.h / 360) * 100}%`, backgroundColor: hexColor };
+    }, [hsv.h, hexColor]);
+    const alphaSliderStyle = require$$0.useMemo(() => {
+        return {
+            background: `linear-gradient(to right, transparent, ${hexColor})`
+        };
+    }, [hexColor]);
+    const alphaIndicatorStyle = require$$0.useMemo(() => {
+        return { left: `${alpha * 100}%`, backgroundColor: hexColor };
+    }, [alpha, hexColor]);
+    require$$0.useEffect(() => {
+        if (!hexEditing.current) {
+            setHexInput(hexColor);
+        }
+    }, [hexColor]);
     require$$0.useEffect(() => {
-        const date = components.verifyDateRange({ date: _date, minDate, maxDate });
-        yearControl.setValue(date.getFullYear());
-        monthControl.setValue(date.getMonth());
-        dayControl.setValue(date.getDate());
-        formControl?.setValue(date);
         return i18n.i18nSubscribe(() => {
             setLabels({
-                dateActionCancel: reactI18n('dateActionCancel'),
-                dateActionSelect: reactI18n('dateActionSelect'),
-                dateActionToday: reactI18n('dateActionToday')
+                colorActionCancel: reactI18n('dateActionCancel'),
+                colorActionSelect: reactI18n('dateActionSelect')
             });
         });
     }, []);
-    const onVisibilityDay = require$$0.useCallback(() => {
-        setVisibility('DAY');
-    }, []);
-    const onVisibilityTitle = require$$0.useCallback((type) => {
-        type === 'month' ? setVisibility('MONTH') : setVisibility('YEAR');
-    }, []);
-    const onCancel = require$$0.useCallback(() => {
-        onListener?.({ event: components.PickerListenerEvent.Cancel });
-    }, [onListener]);
-    const onToday = require$$0.useCallback(() => {
-        yearControl.setValue(today.current.getFullYear());
-        dayControl.setValue(today.current.getDate());
-        monthControl.setValue(today.current.getMonth());
-        formControl?.setValue(today.current);
-        onListener?.({
-            event: components.PickerListenerEvent.Now,
-            value: today.current
-        });
-    }, [formControl, onListener]);
-    const onSelect = require$$0.useCallback(() => {
-        formControl?.setValue(value);
-        onListener?.({
-            event: components.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 = require$$0.useRef(new Date()); // Initial current date in component
-    const [value, setValue] = require$$0.useState(formControl?.value ?? valueInitial);
-    const [modalIsVisible, setModalIsVisible] = require$$0.useState(false);
-    const disabled = require$$0.useMemo(() => {
-        return formControl?.disabled || disabledProps;
-    }, [formControl?.disabled, disabledProps]);
-    const className = require$$0.useMemo(() => {
-        return renderClassStatus('rls-field-box', {
-            disabled,
-            readonly: readOnly
-        });
-    }, [disabled, readOnly]);
-    const dateValue = require$$0.useMemo(() => {
-        return formControl ? formControl.value : value;
-    }, [formControl?.value, value]);
-    const status = require$$0.useMemo(() => {
-        return {
-            icon: dateValue ? 'trash-2' : 'calendar',
-            label: dateValue
-                ? dates.dateFormatTemplate(dateValue, format ?? DATE_FORMAT)
-                : ''
-        };
-    }, [dateValue, format]);
-    require$$0.useEffect(() => {
-        const dateSecure = components.verifyDateRange({
-            date: formControl?.value ?? date ?? today.current,
-            minDate,
-            maxDate
-        });
-        setValue(dateSecure);
-        formControl?.setValue(dateSecure);
-    }, []);
-    const onClickInput = require$$0.useCallback(() => {
-        !readOnly && setModalIsVisible(true);
-    }, [readOnly]);
-    const onChange = require$$0.useCallback((value) => {
-        setValue(value);
-        onValue?.(value);
-    }, [onValue]);
-    const onClickAction = require$$0.useCallback(() => {
-        if (dateValue) {
-            formControl?.setValue(valueInitial);
-            formControl?.touch();
-            onChange(valueInitial);
-        }
-        else {
-            setModalIsVisible(true);
-        }
-    }, [dateValue, formControl, valueInitial, onChange]);
-    const onListener = require$$0.useCallback(({ event, value }) => {
-        event !== components.PickerListenerEvent.Cancel && onChange(value);
-        formControl?.touch();
-        setModalIsVisible(false);
-    }, [formControl, onChange]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("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 = dates.dateFormatTemplate(minDate, DATE_RANGE_FORMAT);
-    const maxFormat = dates.dateFormatTemplate(maxDate, DATE_RANGE_FORMAT);
-    return `${minFormat} - ${maxFormat}`;
-}
-
-function RlsPickerDateRange({ automatic, date: datePicker, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
-    const _date = require$$0.useMemo(() => dates.normalizeMinTime(datePicker ?? new Date()), [datePicker]);
-    const _range = require$$0.useMemo(() => formControl?.value ?? dates.DateRange.now(), [formControl?.value]);
-    const yearControl = reactForms.useReactControl(_date.getFullYear());
-    const monthControl = reactForms.useReactControl(_date.getMonth());
-    const rangeControl = reactForms.useReactControl(_range);
-    const [visibility, setVisibility] = require$$0.useState('DAY');
-    const [labels, setLabels] = require$$0.useState({
-        dateActionCancel: reactI18n('dateActionCancel'),
-        dateActionSelect: reactI18n('dateActionSelect')
-    });
-    const value = require$$0.useMemo(() => {
-        return rangeControl.value ?? _range;
-    }, [rangeControl.value, _range]);
-    const date = require$$0.useMemo(() => {
-        let value = _date;
-        if (commons.valueIsDefined(yearControl.value)) {
-            value = dates.assignYearInDate(value, yearControl.value);
-        }
-        if (commons.valueIsDefined(monthControl.value)) {
-            value = dates.assignMonthInDate(value, monthControl.value);
-        }
-        return value;
-    }, [_date, yearControl.value, monthControl.value]);
-    const classNameComponent = require$$0.useMemo(() => {
-        return renderClassStatus('rls-picker-date-range__component', {
-            day: visibility === 'DAY',
-            month: visibility === 'MONTH',
-            year: visibility === 'YEAR'
-        });
-    }, [visibility]);
-    const classNameFooter = require$$0.useMemo(() => {
-        return renderClassStatus('rls-picker-date-range__footer', { automatic });
-    }, [automatic]);
-    const title = require$$0.useMemo(() => rangeFormatTemplate(value), [value]);
-    require$$0.useEffect(() => {
-        return i18n.i18nSubscribe(() => {
-            setLabels({
-                dateActionCancel: reactI18n('dateActionCancel'),
-                dateActionSelect: reactI18n('dateActionSelect')
-            });
-        });
-    }, []);
-    require$$0.useEffect(() => {
-        setVisibility('DAY');
-    }, [rangeControl.value]);
-    const onVisibilityDay = require$$0.useCallback(() => {
-        setVisibility('DAY');
-    }, []);
-    const onVisibilityTitle = require$$0.useCallback((type) => {
-        type === 'month' ? setVisibility('MONTH') : setVisibility('YEAR');
-    }, []);
-    const onCancel = require$$0.useCallback(() => {
-        onListener?.({ event: components.PickerListenerEvent.Cancel });
-    }, [onListener]);
-    const onSelect = require$$0.useCallback(() => {
-        formControl?.setValue(value);
-        onListener?.({ event: components.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 = require$$0.useMemo(() => date ?? new Date(), [date]);
-    const [value, setValue] = require$$0.useState(formControl?.value || valueInitial);
-    const [modalIsVisible, setModalIsVisible] = require$$0.useState(false);
-    const disabled = require$$0.useMemo(() => {
-        return formControl?.disabled || disabledProps;
-    }, [formControl?.disabled, disabledProps]);
-    const className = require$$0.useMemo(() => {
-        return renderClassStatus('rls-field-box', {
-            disabled,
-            readonly: readOnly
-        });
-    }, [disabled, readOnly]);
-    const dateRangeValue = require$$0.useMemo(() => {
-        return formControl ? formControl.value : value;
-    }, [formControl?.value, value]);
-    const status = require$$0.useMemo(() => {
-        return {
-            icon: dateRangeValue ? 'trash-2' : 'calendar',
-            valueInput: dateRangeValue ? rangeFormatTemplate(dateRangeValue) : ''
-        };
-    }, [dateRangeValue]);
-    const onClickInput = require$$0.useCallback(() => {
-        !readOnly && setModalIsVisible(true);
-    }, [readOnly]);
-    const onChange = require$$0.useCallback((value) => {
-        setValue(value);
-        onValue?.(value);
-    }, [onValue]);
-    const onClickAction = require$$0.useCallback(() => {
-        if (dateRangeValue) {
-            formControl?.setValue(valueInitial);
-            formControl?.touch();
-            onChange(valueInitial);
-        }
-        else {
-            setModalIsVisible(true);
-        }
-    }, [dateRangeValue, formControl, valueInitial, onChange]);
-    const onListener = require$$0.useCallback(({ event, value }) => {
-        event !== components.PickerListenerEvent.Cancel && onChange(value);
-        formControl?.touch();
-        setModalIsVisible(false);
-    }, [formControl, onChange]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("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);
-    require$$0.useEffect(() => {
-        props.disabled && controller.setState({ focused: false });
-    }, [props.disabled]);
-    const onFocusInput = require$$0.useCallback(() => {
-        controller.setState({ focused: true });
-    }, [controller.setState]);
-    const onBlurInput = require$$0.useCallback(() => {
-        controller.setState({ focused: false });
-    }, [controller.setState]);
-    const onClickInput = require$$0.useCallback(() => {
-        !props.readOnly && controller.setState({ listIsVisible: true });
-    }, [controller.setState, props.readOnly]);
-    const onKeydownInput = require$$0.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 = require$$0.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 = require$$0.useCallback(() => {
-        controller.setState({ listIsVisible: false });
-    }, [controller.setState]);
-    const onChange = require$$0.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 = require$$0.useCallback((element) => {
-        return () => {
-            onChange(element);
-        };
-    }, [onChange]);
-    const onKeydownElement = require$$0.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 = require$$0.useMemo(() => {
-        return formControl?.disabled || props.disabled;
-    }, [formControl?.disabled, props.disabled]);
-    const className = require$$0.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 = require$$0.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 = require$$0.useMemo(() => formControl?.value ?? color ?? DEFAULT_COLOR, []);
-    const initialHsv = require$$0.useMemo(() => hexToHsv(initialColor) ?? { h: 258, s: 100, v: 100 }, []);
-    const canvasRef = require$$0.useRef(null);
-    const hueRef = require$$0.useRef(null);
-    const alphaRef = require$$0.useRef(null);
-    const selectionIsActive = require$$0.useRef(false);
-    const activeSlider = require$$0.useRef(null);
-    const hexEditing = require$$0.useRef(false);
-    const [hsv, setHsv] = require$$0.useState(initialHsv);
-    const [alpha, setAlpha] = require$$0.useState(1);
-    const [hexInput, setHexInput] = require$$0.useState(initialColor);
-    const [labels, setLabels] = require$$0.useState({
-        colorActionCancel: reactI18n('dateActionCancel'),
-        colorActionSelect: reactI18n('dateActionSelect')
-    });
-    const hexColor = require$$0.useMemo(() => hsvToHex(hsv), [hsv]);
-    const hexValue = require$$0.useMemo(() => {
-        return hexInput.replace('#', '');
-    }, [hexInput]);
-    const canvasStyle = require$$0.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 = require$$0.useMemo(() => {
-        return {
-            left: `${(hsv.s / 100) * 100}%`,
-            top: `${100 - (hsv.v / 100) * 100}%`
-        };
-    }, [hsv.s, hsv.v]);
-    const hueSliderStyle = require$$0.useMemo(() => {
-        return {
-            background: 'linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)'
-        };
-    }, []);
-    const hueIndicatorStyle = require$$0.useMemo(() => {
-        return { left: `${(hsv.h / 360) * 100}%`, backgroundColor: hexColor };
-    }, [hsv.h, hexColor]);
-    const alphaSliderStyle = require$$0.useMemo(() => {
-        return {
-            background: `linear-gradient(to right, transparent, ${hexColor})`
-        };
-    }, [hexColor]);
-    const alphaIndicatorStyle = require$$0.useMemo(() => {
-        return { left: `${alpha * 100}%`, backgroundColor: hexColor };
-    }, [alpha, hexColor]);
-    require$$0.useEffect(() => {
-        !hexEditing.current && setHexInput(hexColor);
-    }, [hexColor]);
-    require$$0.useEffect(() => {
-        return i18n.i18nSubscribe(() => {
-            setLabels({
-                colorActionCancel: reactI18n('dateActionCancel'),
-                colorActionSelect: reactI18n('dateActionSelect')
-            });
-        });
-    }, []);
-    const getPositionInElement = require$$0.useCallback((element, clientX, clientY) => {
-        const rect = element.getBoundingClientRect();
-        return {
-            x: (clientX - rect.left) / rect.width,
-            y: (clientY - rect.top) / rect.height
-        };
+    const getPositionInElement = require$$0.useCallback((element, clientX, clientY) => {
+        const rect = element.getBoundingClientRect();
+        return {
+            x: (clientX - rect.left) / rect.width,
+            y: (clientY - rect.top) / rect.height
+        };
     }, []);
     const updateColorOnCanvas = require$$0.useEffectEvent((clientX, clientY) => {
         if (!canvasRef.current)
@@ -3601,55 +3373,324 @@ function RlsPickerColor({ color, formControl, onListener, rlsTheme }) {
                 updateAlphaOnSlider(touch.clientX, touch.clientY);
                 break;
         }
-    }, [updateColorOnCanvas, updateHueOnSlider, updateAlphaOnSlider]);
-    const onInactiveSelection = require$$0.useCallback(() => {
-        selectionIsActive.current = false;
-        activeSlider.current = null;
-    }, []);
-    const onHexChange = require$$0.useCallback((value) => {
-        setHexInput(value);
-        const normalized = normalizeHex(value);
-        if (normalized) {
-            const hsv = hexToHsv(normalized);
-            hsv && setHsv(hsv);
+    }, [updateColorOnCanvas, updateHueOnSlider, updateAlphaOnSlider]);
+    const onInactiveSelection = require$$0.useCallback(() => {
+        selectionIsActive.current = false;
+        activeSlider.current = null;
+    }, []);
+    const onHexChange = require$$0.useCallback((value) => {
+        setHexInput(value);
+        const normalized = normalizeHex(value);
+        if (normalized) {
+            const hsv = hexToHsv(normalized);
+            if (hsv) {
+                setHsv(hsv);
+            }
+        }
+    }, []);
+    const onHexFocus = require$$0.useCallback(() => {
+        hexEditing.current = true;
+    }, []);
+    const onHexBlur = require$$0.useEffectEvent(() => {
+        hexEditing.current = false;
+        const normalized = normalizeHex(hexInput);
+        if (normalized) {
+            setHexInput(normalized);
+        }
+        else {
+            setHexInput(hexColor);
+        }
+    });
+    const onHexKeyDown = require$$0.useCallback((event) => {
+        if (event.key === 'Enter') {
+            onHexBlur();
+        }
+    }, [onHexBlur]);
+    const onHexInputChange = require$$0.useCallback((event) => onHexChange(event.target.value ? `#${event.target.value}` : ''), [onHexChange]);
+    const onCancel = require$$0.useCallback(() => {
+        onListener?.({ event: components.PickerListenerEvent.Cancel });
+    }, [onListener]);
+    const onSelect = require$$0.useCallback(() => {
+        formControl?.setValue(hexColor);
+        onListener?.({ event: components.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] = require$$0.useState(formControl?.value ?? valueInitial);
+    const [modalIsVisible, setModalIsVisible] = require$$0.useState(false);
+    const colorValue = require$$0.useMemo(() => {
+        return formControl ? formControl.value : value;
+    }, [formControl?.value, value]);
+    const disabled = require$$0.useMemo(() => {
+        return formControl?.disabled || disabledProps;
+    }, [formControl?.disabled, disabledProps]);
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-field-box', {
+            disabled,
+            readonly: readOnly
+        });
+    }, [disabled, readOnly]);
+    const displayHex = require$$0.useMemo(() => {
+        const hex = colorValue && hexIsValid(colorValue) ? colorValue : '';
+        return normalizeHex(hex);
+    }, [colorValue]);
+    const onClickInput = require$$0.useCallback(() => {
+        if (!readOnly) {
+            setModalIsVisible(true);
+        }
+    }, [readOnly]);
+    const onChange = require$$0.useCallback((value) => {
+        setValue(value);
+        onValue?.(value);
+    }, [onValue]);
+    const onClickAction = require$$0.useCallback(() => {
+        if (colorValue) {
+            formControl?.setValue(valueInitial);
+            formControl?.touch();
+            onChange(valueInitial);
+        }
+        else {
+            setModalIsVisible(true);
+        }
+    }, [colorValue, formControl, valueInitial, onChange]);
+    const onListener = require$$0.useCallback(({ event, value }) => {
+        if (event !== components.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 = require$$0.useRef(new Date()); // Initial current date in component
+    const _date = require$$0.useMemo(() => {
+        return formControl?.value ?? date ?? today.current;
+    }, [formControl?.value, date]);
+    const yearControl = reactForms.useReactControl(_date.getFullYear());
+    const dayControl = reactForms.useReactControl(_date.getDate());
+    const monthControl = reactForms.useReactControl(_date.getMonth());
+    const [visibility, setVisibility] = require$$0.useState('DAY');
+    const [labels, setLabels] = require$$0.useState({
+        dateActionCancel: reactI18n('dateActionCancel'),
+        dateActionSelect: reactI18n('dateActionSelect'),
+        dateActionToday: reactI18n('dateActionToday')
+    });
+    const value = require$$0.useMemo(() => {
+        return new Date(yearControl.value, monthControl.value, dayControl.value);
+    }, [yearControl.value, monthControl.value, dayControl.value]);
+    const classNameComponent = require$$0.useMemo(() => {
+        return renderClassStatus('rls-picker-date__component', {
+            day: visibility === 'DAY',
+            month: visibility === 'MONTH',
+            year: visibility === 'YEAR'
+        });
+    }, [visibility]);
+    const title = require$$0.useMemo(() => {
+        return dates.dateFormatTemplate(value, DATE_FORMAT_TITLE);
+    }, [value]);
+    const itIsDisabledToday = require$$0.useMemo(() => components.dateOutRange({
+        date: today.current,
+        maxDate,
+        minDate
+    }), [maxDate, minDate]);
+    require$$0.useEffect(() => {
+        const date = components.verifyDateRange({ date: _date, minDate, maxDate });
+        yearControl.setValue(date.getFullYear());
+        monthControl.setValue(date.getMonth());
+        dayControl.setValue(date.getDate());
+        formControl?.setValue(date);
+        return i18n.i18nSubscribe(() => {
+            setLabels({
+                dateActionCancel: reactI18n('dateActionCancel'),
+                dateActionSelect: reactI18n('dateActionSelect'),
+                dateActionToday: reactI18n('dateActionToday')
+            });
+        });
+    }, []);
+    const onVisibilityDay = require$$0.useCallback(() => {
+        setVisibility('DAY');
+    }, []);
+    const onVisibilityTitle = require$$0.useCallback((type) => {
+        if (type === 'month') {
+            setVisibility('MONTH');
+        }
+        else {
+            setVisibility('YEAR');
+        }
+    }, []);
+    const onCancel = require$$0.useCallback(() => {
+        onListener?.({ event: components.PickerListenerEvent.Cancel });
+    }, [onListener]);
+    const onToday = require$$0.useCallback(() => {
+        yearControl.setValue(today.current.getFullYear());
+        dayControl.setValue(today.current.getDate());
+        monthControl.setValue(today.current.getMonth());
+        formControl?.setValue(today.current);
+        onListener?.({
+            event: components.PickerListenerEvent.Now,
+            value: today.current
+        });
+    }, [formControl, onListener]);
+    const onSelect = require$$0.useCallback(() => {
+        formControl?.setValue(value);
+        onListener?.({
+            event: components.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 = require$$0.useRef(new Date()); // Initial current date in component
+    const [value, setValue] = require$$0.useState(formControl?.value ?? valueInitial);
+    const [modalIsVisible, setModalIsVisible] = require$$0.useState(false);
+    const disabled = require$$0.useMemo(() => {
+        return formControl?.disabled || disabledProps;
+    }, [formControl?.disabled, disabledProps]);
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-field-box', {
+            disabled,
+            readonly: readOnly
+        });
+    }, [disabled, readOnly]);
+    const dateValue = require$$0.useMemo(() => {
+        return formControl ? formControl.value : value;
+    }, [formControl?.value, value]);
+    const status = require$$0.useMemo(() => {
+        return {
+            icon: dateValue ? 'trash-2' : 'calendar',
+            label: dateValue
+                ? dates.dateFormatTemplate(dateValue, format ?? DATE_FORMAT)
+                : ''
+        };
+    }, [dateValue, format]);
+    require$$0.useEffect(() => {
+        const dateSecure = components.verifyDateRange({
+            date: formControl?.value ?? date ?? today.current,
+            minDate,
+            maxDate
+        });
+        setValue(dateSecure);
+        formControl?.setValue(dateSecure);
+    }, []);
+    const onClickInput = require$$0.useCallback(() => {
+        if (!readOnly) {
+            setModalIsVisible(true);
+        }
+    }, [readOnly]);
+    const onChange = require$$0.useCallback((value) => {
+        setValue(value);
+        onValue?.(value);
+    }, [onValue]);
+    const onClickAction = require$$0.useCallback(() => {
+        if (dateValue) {
+            formControl?.setValue(valueInitial);
+            formControl?.touch();
+            onChange(valueInitial);
+        }
+        else {
+            setModalIsVisible(true);
+        }
+    }, [dateValue, formControl, valueInitial, onChange]);
+    const onListener = require$$0.useCallback(({ event, value }) => {
+        if (event !== components.PickerListenerEvent.Cancel) {
+            onChange(value);
+        }
+        formControl?.touch();
+        setModalIsVisible(false);
+    }, [formControl, onChange]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("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 = dates.dateFormatTemplate(minDate, DATE_RANGE_FORMAT);
+    const maxFormat = dates.dateFormatTemplate(maxDate, DATE_RANGE_FORMAT);
+    return `${minFormat} - ${maxFormat}`;
+}
+
+function RlsPickerDateRange({ automatic, date: datePicker, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
+    const _date = require$$0.useMemo(() => dates.normalizeMinTime(datePicker ?? new Date()), [datePicker]);
+    const _range = require$$0.useMemo(() => formControl?.value ?? dates.DateRange.now(), [formControl?.value]);
+    const yearControl = reactForms.useReactControl(_date.getFullYear());
+    const monthControl = reactForms.useReactControl(_date.getMonth());
+    const rangeControl = reactForms.useReactControl(_range);
+    const [visibility, setVisibility] = require$$0.useState('DAY');
+    const [labels, setLabels] = require$$0.useState({
+        dateActionCancel: reactI18n('dateActionCancel'),
+        dateActionSelect: reactI18n('dateActionSelect')
+    });
+    const value = require$$0.useMemo(() => {
+        return rangeControl.value ?? _range;
+    }, [rangeControl.value, _range]);
+    const date = require$$0.useMemo(() => {
+        let value = _date;
+        if (commons.valueIsDefined(yearControl.value)) {
+            value = dates.assignYearInDate(value, yearControl.value);
+        }
+        if (commons.valueIsDefined(monthControl.value)) {
+            value = dates.assignMonthInDate(value, monthControl.value);
         }
+        return value;
+    }, [_date, yearControl.value, monthControl.value]);
+    const classNameComponent = require$$0.useMemo(() => {
+        return renderClassStatus('rls-picker-date-range__component', {
+            day: visibility === 'DAY',
+            month: visibility === 'MONTH',
+            year: visibility === 'YEAR'
+        });
+    }, [visibility]);
+    const classNameFooter = require$$0.useMemo(() => {
+        return renderClassStatus('rls-picker-date-range__footer', { automatic });
+    }, [automatic]);
+    const title = require$$0.useMemo(() => rangeFormatTemplate(value), [value]);
+    require$$0.useEffect(() => {
+        return i18n.i18nSubscribe(() => {
+            setLabels({
+                dateActionCancel: reactI18n('dateActionCancel'),
+                dateActionSelect: reactI18n('dateActionSelect')
+            });
+        });
     }, []);
-    const onHexFocus = require$$0.useCallback(() => {
-        hexEditing.current = true;
+    require$$0.useEffect(() => {
+        setVisibility('DAY');
+    }, [rangeControl.value]);
+    const onVisibilityDay = require$$0.useCallback(() => {
+        setVisibility('DAY');
     }, []);
-    const onHexBlur = require$$0.useEffectEvent(() => {
-        hexEditing.current = false;
-        const normalized = normalizeHex(hexInput);
-        if (normalized) {
-            setHexInput(normalized);
+    const onVisibilityTitle = require$$0.useCallback((type) => {
+        if (type === 'month') {
+            setVisibility('MONTH');
         }
         else {
-            setHexInput(hexColor);
+            setVisibility('YEAR');
         }
-    });
-    const onHexKeyDown = require$$0.useCallback((event) => {
-        event.key === 'Enter' && onHexBlur();
-    }, [onHexBlur]);
-    const onHexInputChange = require$$0.useCallback((event) => onHexChange(event.target.value ? `#${event.target.value}` : ''), [onHexChange]);
+    }, []);
     const onCancel = require$$0.useCallback(() => {
         onListener?.({ event: components.PickerListenerEvent.Cancel });
     }, [onListener]);
     const onSelect = require$$0.useCallback(() => {
-        formControl?.setValue(hexColor);
-        onListener?.({ event: components.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: components.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] = require$$0.useState(formControl?.value ?? valueInitial);
+function RlsFieldDateRange({ children, date, disabled: disabledProps, formControl, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
+    const currentDate = require$$0.useMemo(() => date ?? new Date(), [date]);
+    const [value, setValue] = require$$0.useState(formControl?.value || valueInitial);
     const [modalIsVisible, setModalIsVisible] = require$$0.useState(false);
-    const colorValue = require$$0.useMemo(() => {
-        return formControl ? formControl.value : value;
-    }, [formControl?.value, value]);
     const disabled = require$$0.useMemo(() => {
         return formControl?.disabled || disabledProps;
     }, [formControl?.disabled, disabledProps]);
@@ -3659,19 +3700,26 @@ function RlsFieldColor({ children, color, disabled: disabledProps, formControl,
             readonly: readOnly
         });
     }, [disabled, readOnly]);
-    const displayHex = require$$0.useMemo(() => {
-        const hex = colorValue && hexIsValid(colorValue) ? colorValue : '';
-        return normalizeHex(hex);
-    }, [colorValue]);
+    const dateRangeValue = require$$0.useMemo(() => {
+        return formControl ? formControl.value : value;
+    }, [formControl?.value, value]);
+    const status = require$$0.useMemo(() => {
+        return {
+            icon: dateRangeValue ? 'trash-2' : 'calendar',
+            valueInput: dateRangeValue ? rangeFormatTemplate(dateRangeValue) : ''
+        };
+    }, [dateRangeValue]);
     const onClickInput = require$$0.useCallback(() => {
-        !readOnly && setModalIsVisible(true);
+        if (!readOnly) {
+            setModalIsVisible(true);
+        }
     }, [readOnly]);
     const onChange = require$$0.useCallback((value) => {
         setValue(value);
         onValue?.(value);
     }, [onValue]);
     const onClickAction = require$$0.useCallback(() => {
-        if (colorValue) {
+        if (dateRangeValue) {
             formControl?.setValue(valueInitial);
             formControl?.touch();
             onChange(valueInitial);
@@ -3679,13 +3727,15 @@ function RlsFieldColor({ children, color, disabled: disabledProps, formControl,
         else {
             setModalIsVisible(true);
         }
-    }, [colorValue, formControl, valueInitial, onChange]);
+    }, [dateRangeValue, formControl, valueInitial, onChange]);
     const onListener = require$$0.useCallback(({ event, value }) => {
-        event !== components.PickerListenerEvent.Cancel && onChange(value);
+        if (event !== components.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;
@@ -3726,8 +3776,9 @@ function useFieldList(props) {
     const [selected, setSelected] = require$$0.useState([]);
     require$$0.useEffect(() => {
         function onCloseSuggestions({ target }) {
-            !refContent?.current?.contains(target) &&
+            if (!refContent?.current?.contains(target)) {
                 setState((state) => ({ ...state, listIsVisible: false }));
+            }
         }
         document.addEventListener('click', onCloseSuggestions);
         return () => {
@@ -3802,7 +3853,9 @@ function useFieldList(props) {
     }, [selected, formControl, props.onValue]);
     const onKeydownElement = require$$0.useCallback((element) => {
         return (event) => {
-            event.code === 'Enter' && toggleElement(element);
+            if (event.code === 'Enter') {
+                toggleElement(element);
+            }
         };
     }, [toggleElement]);
     return {
@@ -3851,6 +3904,141 @@ function RlsFieldList(props) {
     return jsxRuntimeExports.jsx(RlsFieldListInner, { ...props, render: render, fieldList: fieldList });
 }
 
+function useFieldSelect(props) {
+    const controller = useListController(props);
+    require$$0.useEffect(() => {
+        if (props.disabled) {
+            controller.setState({ focused: false });
+        }
+    }, [props.disabled]);
+    const onFocusInput = require$$0.useCallback(() => {
+        controller.setState({ focused: true });
+    }, [controller.setState]);
+    const onBlurInput = require$$0.useCallback(() => {
+        controller.setState({ focused: false });
+    }, [controller.setState]);
+    const onClickInput = require$$0.useCallback(() => {
+        if (!props.readOnly) {
+            controller.setState({ listIsVisible: true });
+        }
+    }, [controller.setState, props.readOnly]);
+    const onKeydownInput = require$$0.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 = require$$0.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 = require$$0.useCallback(() => {
+        controller.setState({ listIsVisible: false });
+    }, [controller.setState]);
+    const onChange = require$$0.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 = require$$0.useCallback((element) => {
+        return () => {
+            onChange(element);
+        };
+    }, [onChange]);
+    const onKeydownElement = require$$0.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 = require$$0.useMemo(() => {
+        return formControl?.disabled || props.disabled;
+    }, [formControl?.disabled, props.disabled]);
+    const className = require$$0.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 = require$$0.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 = require$$0.useMemo(() => {
         return renderClassStatus('rls-form-navigation', { visible: controller?.visible ?? visible }, className);
@@ -3955,7 +4143,7 @@ function useResize(props) {
     const dimension = require$$0.useRef({ height: 0, width: 0 });
     const observer = require$$0.useCallback((entries) => {
         const { height, width } = entries[0].contentRect;
-        onResize &&
+        if (onResize) {
             onResize({
                 current: dimension.current,
                 dimension: {
@@ -3963,6 +4151,7 @@ function useResize(props) {
                     width
                 }
             });
+        }
         dimension.current = { height, width };
     }, []);
     require$$0.useEffect(() => {
@@ -4254,7 +4443,9 @@ function useImageEditorController(options) {
     }, []);
     const onEditorValue = require$$0.useCallback((image) => {
         setSrcEditor(undefined);
-        options.onValue && options.onValue(image);
+        if (options.onValue) {
+            options.onValue(image);
+        }
     }, [options.onValue]);
     const onCancel = require$$0.useCallback(() => {
         setSrcEditor(undefined);
@@ -4273,7 +4464,9 @@ function useImageEditorController(options) {
         onCancel
     ]);
     const onImageChooser = require$$0.useCallback(() => {
-        !options.disabled && refInput.current.click();
+        if (!options.disabled) {
+            refInput.current.click();
+        }
     }, [options.disabled]);
     return { onImageChooser, RlsImageEditorChooser };
 }
@@ -4286,7 +4479,9 @@ function RlsImageChooser(props) {
     }, [props.onValue]);
     const controller = useImageEditorController({ ...props, onValue });
     require$$0.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] }));
 }
@@ -4296,12 +4491,68 @@ function RlsModalSheet({ autoclose, children, className, controller, onAutoClose
         return renderClassStatus('rls-modal-sheet', { visible: controller?.visible ?? visible }, className);
     }, [className, visible, controller?.visible]);
     const onClickBackdrop = require$$0.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);
 }
 
+const DURATION_ANIMATION$1 = 240;
+const DURATION_DEFAULT = 4000;
+let _id = 0;
+function generateId() {
+    return `rls-notification-${++_id}`;
+}
+function RlsNotification({ content, icon, onClose, rlsTheme, title, visible }) {
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-notification', { visible });
+    }, [visible]);
+    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [icon && (jsxRuntimeExports.jsx("div", { className: "rls-notification__avatar", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })), jsxRuntimeExports.jsxs("div", { className: "rls-notification__component", children: [jsxRuntimeExports.jsxs("div", { className: "rls-notification__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-notification__title", children: title }), jsxRuntimeExports.jsx("button", { onClick: onClose, children: jsxRuntimeExports.jsx(RlsIcon, { value: "close" }) })] }), jsxRuntimeExports.jsx("div", { className: "rls-notification__content", children: content })] })] }));
+}
+function useNotifications() {
+    const [notifications, setNotifications] = require$$0.useState([]);
+    const timersRef = require$$0.useRef(new Map());
+    require$$0.useEffect(() => {
+        const timers = timersRef.current;
+        return () => {
+            timers.forEach((timer) => clearTimeout(timer));
+            timers.clear();
+        };
+    }, []);
+    const remove = require$$0.useCallback((id) => {
+        const timer = timersRef.current.get(id);
+        if (timer) {
+            clearTimeout(timer);
+            timersRef.current.delete(id);
+        }
+        setNotifications((notifications) => notifications.map((notification) => notification.id === id
+            ? { ...notification, visible: false }
+            : notification));
+        setTimeout(() => {
+            setNotifications((notifications) => notifications.filter((notification) => notification.id !== id));
+        }, DURATION_ANIMATION$1);
+    }, []);
+    const notify = require$$0.useCallback((config) => {
+        const id = generateId();
+        const duration = config.duration ?? DURATION_DEFAULT;
+        setNotifications((notifications) => [
+            ...notifications,
+            { id, config, visible: true }
+        ]);
+        const timer = setTimeout(() => {
+            remove(id);
+        }, duration);
+        timersRef.current.set(id, timer);
+    }, [remove]);
+    const RlsNotifications = ReactDOM.createPortal(jsxRuntimeExports.jsx("div", { className: "rls-notifications", children: notifications.map((notification) => (jsxRuntimeExports.jsx(RlsNotification, { ...notification.config, visible: notification.visible, onClose: () => remove(notification.id) }, notification.id))) }), document.body);
+    return {
+        RlsNotifications,
+        notify
+    };
+}
+
 const DURATION_ANIMATION = 240;
 const DURATION_CHAR = 75;
 const DURATION_MAX = 9000;
@@ -4331,7 +4582,9 @@ function useSnackbar() {
         visible: false
     });
     const onClose = require$$0.useCallback(() => {
-        timeoutId.current && clearTimeout(timeoutId.current);
+        if (timeoutId.current) {
+            clearTimeout(timeoutId.current);
+        }
         timeoutId.current = undefined;
         setState((state) => ({ ...state, visible: false }));
     }, []);
@@ -4365,17 +4618,17 @@ function useSnackbar() {
     };
 }
 
-const RlsContext = require$$0.createContext({
-    confirmation: () => {
-        return Promise.resolve(ConfirmationResult.approved());
-    },
-    snackbar: () => { },
-    setIsMobile: () => { },
-    setNavbarInApp: () => { },
-    setNavbarIsCondense: () => { }
-});
+const RlsContext = require$$0.createContext(null);
+function useRlsContext() {
+    const state = require$$0.useContext(RlsContext);
+    if (!state) {
+        throw new Error('RlsApplication not wrapped in Project');
+    }
+    return state;
+}
 function RlsApplication({ children }) {
     const { RlsConfirmation, confirmation } = useConfirmation();
+    const { RlsNotifications, notify } = useNotifications();
     const { RlsSnackbar, snackbar } = useSnackbar();
     const [navbarInApp, setNavbarInApp] = require$$0.useState(false);
     const [navbarIsCondense, setNavbarIsCondense] = require$$0.useState(false);
@@ -4389,11 +4642,12 @@ function RlsApplication({ children }) {
     }, [appIsMobile, navbarInApp, navbarIsCondense]);
     return (jsxRuntimeExports.jsxs(RlsContext, { value: {
             confirmation,
+            notify,
             snackbar,
             setIsMobile,
             setNavbarInApp,
             setNavbarIsCondense
-        }, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, RlsSnackbar] }), RlsConfirmation] }));
+        }, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, RlsSnackbar] }), RlsNotifications, RlsConfirmation] }));
 }
 
 const DEFAULT_DESIGN_SYSTEM = 'bordered';
@@ -4445,9 +4699,9 @@ function useDropdownController(effect = '0% 0%') {
     const openWithEvent = require$$0.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;
@@ -4654,8 +4908,10 @@ exports.useFormSingleSelectionController = useFormSingleSelectionController;
 exports.useFormToggleController = useFormToggleController;
 exports.useImageEditorController = useImageEditorController;
 exports.useListController = useListController;
+exports.useNotifications = useNotifications;
 exports.usePortalController = usePortalController;
 exports.useRelocationOnComponent = useRelocationOnComponent;
 exports.useResize = useResize;
+exports.useRlsContext = useRlsContext;
 exports.useSnackbar = useSnackbar;
 //# sourceMappingURL=index.cjs.map