@rolster/react-components 19.5.4 → 19.6.0

package/dist/cjs/index.cjs

@@ -586,6 +586,13 @@ function RlsButtonAction({ icon, disabled, identifier, onClick, tooltip }) {
     return (jsxRuntimeExports.jsxs("button", { id: identifier, className: "rls-button-action", onClick: onClick, disabled: disabled, children: [jsxRuntimeExports.jsx("div", { className: "rls-button-action__content", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }), tooltip && (jsxRuntimeExports.jsx("div", { className: "rls-button-action__tooltip rls-overline-font-medium", children: jsxRuntimeExports.jsx("span", { children: tooltip }) }))] }));
 }
 
+function RlsButtonIcon({ icon, className, disabled, onClick, skeleton }) {
+    const classNameButton = require$$0.useMemo(() => {
+        return renderClassStatus('rls-button-icon', { skeleton }, className);
+    }, [className, skeleton]);
+    return (jsxRuntimeExports.jsx("button", { className: classNameButton, onClick: onClick, disabled: disabled, children: !skeleton && jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }));
+}
+
 function useFormSingleSelectionController({ disabled, formControl, onValue, value }) {
     const [checked, setChecked] = require$$0.useState(formControl?.value === value);
     require$$0.useEffect(() => {
@@ -697,6 +704,59 @@ function RlsInput({ children, decimals, disabled, formControl, identifier, onBlu
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, children: [jsxRuntimeExports.jsx("input", { ref: formControl?.elementRef, className: "rls-input__component", autoComplete: "off", type: type ?? 'text', placeholder: placeholder, disabled: formControl?.disabled || disabled, readOnly: readOnly, onFocus: onFocusInput, onBlur: onBlurInput, onChange: onChangeInput, onKeyDown: onKeyDownInput, onKeyUp: onKeyUpInput, value: valueInput }), jsxRuntimeExports.jsx("span", { className: "rls-input__value", children: children })] }));
 }
 
+function RlsInputCounter({ className, disabled, formControl, identifier, max, min, onBlur, onFocus, onValue, readOnly, rlsTheme, step = 1, value: valueProp }) {
+    const changeIsInternal = require$$0.useRef(false);
+    const [value, setValue] = require$$0.useState(formControl?.value ?? valueProp ?? 0);
+    const [focused, setFocused] = require$$0.useState(false);
+    const _disabled = require$$0.useMemo(() => formControl?.disabled || disabled, [formControl?.disabled, disabled]);
+    const classNameCounter = require$$0.useMemo(() => {
+        return renderClassStatus('rls-input-counter', {
+            disabled: _disabled,
+            focused: formControl?.focused ?? focused,
+            readonly: readOnly
+        }, className);
+    }, [_disabled, formControl?.focused, focused, readOnly, className]);
+    require$$0.useEffect(() => {
+        if (!changeIsInternal.current && formControl) {
+            const counterValue = formControl.value;
+            counterValue !== undefined &&
+                counterValue !== value &&
+                setValue(counterValue);
+        }
+        changeIsInternal.current = false;
+    }, [formControl?.value]);
+    const onUpdate = require$$0.useCallback((nextValue) => {
+        const clamped = Math.min(max ?? Infinity, Math.max(min ?? -Infinity, nextValue));
+        changeIsInternal.current = true;
+        setValue(clamped);
+        formControl?.setValue(clamped);
+        onValue?.(clamped);
+    }, [formControl, max, min, onValue]);
+    const onDecrement = require$$0.useCallback(() => {
+        onUpdate(value - step);
+    }, [onUpdate, value, step]);
+    const onIncrement = require$$0.useCallback(() => {
+        onUpdate(value + step);
+    }, [onUpdate, value, step]);
+    const decrementIsAllowed = require$$0.useMemo(() => min !== undefined && value <= min, [min, value]);
+    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);
+    }, [onUpdate]);
+    const onFocusInput = require$$0.useCallback(() => {
+        setFocused(true);
+        formControl?.focus();
+        onFocus?.();
+    }, [formControl, onFocus]);
+    const onBlurInput = require$$0.useCallback(() => {
+        setFocused(false);
+        formControl?.blur();
+        onBlur?.();
+    }, [formControl, onBlur]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: classNameCounter, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx(RlsButtonIcon, { className: "rls-input-counter__down", icon: "minus", onClick: onDecrement, disabled: _disabled || decrementIsAllowed }), jsxRuntimeExports.jsx("div", { className: "rls-input-counter__body", children: jsxRuntimeExports.jsx("input", { ref: formControl?.elementRef, className: "rls-input-counter__control", type: "text", inputMode: "numeric", value: value, disabled: _disabled, readOnly: readOnly, onChange: onChangeInput, onFocus: onFocusInput, onBlur: onBlurInput }) }), jsxRuntimeExports.jsx(RlsButtonIcon, { className: "rls-input-counter__up", icon: "plus", onClick: onIncrement, disabled: _disabled || incrementIsAllowed })] }));
+}
+
 function RlsInputDecimal(props) {
     const { decimals, formControl, identifier, onValue, symbol, value } = props;
     const [valueInput, setValueInput] = require$$0.useState((formControl?.value ?? value ?? commons.BigDecimal.zero()).rounded);
@@ -926,6 +986,16 @@ function RlsButtonProgress({ icon, disabled, onClick, progressing, rlsTheme }) {
     return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [!progressing && (jsxRuntimeExports.jsx(RlsButtonAction, { icon: icon, onClick: onClick, disabled: disabled })), progressing && jsxRuntimeExports.jsx(RlsProgressCircular, {})] }));
 }
 
+function RlsButtonStepper({ disabled, onAction, rlsTheme }) {
+    const onDown = require$$0.useCallback(() => {
+        onAction?.('down');
+    }, [onAction]);
+    const onUp = require$$0.useCallback(() => {
+        onAction?.('up');
+    }, [onAction]);
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-button-stepper", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-down", disabled: disabled, onClick: onDown }), jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-up", disabled: disabled, onClick: onUp })] }));
+}
+
 function RlsButtonToggle({ onAction, options, type, automatic, disabled, rlsTheme }) {
     const componentRef = require$$0.useRef(null);
     const [action, setAction] = require$$0.useState(options[0]);
@@ -1699,7 +1769,7 @@ function RlsPickerSelectorTitle({ monthControl, type, yearControl, date, disable
     const onNext = require$$0.useCallback(() => {
         type === 'month' ? onNextMonth() : onNextYear();
     }, [type, onNextMonth, onNextYear]);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-selector-title", children: [jsxRuntimeExports.jsx("button", { onClick: onPrevious, disabled: limitPrevious || disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-left" }) }), 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("button", { onClick: onNext, disabled: limitNext || disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-right" }) })] }));
+    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 })] }));
 }
 
 function RlsPickerYearElement({ onSelect, year, disabled }) {
@@ -1717,7 +1787,6 @@ function RlsPickerYearElement({ onSelect, year, disabled }) {
 }
 function RlsPickerYear({ date, disabled, formControl, maxDate, minDate, onValue, rlsTheme }) {
     const dateYear = require$$0.useMemo(() => date ?? new Date(), [date]);
-    const [value, setValue] = require$$0.useState(formControl?.value ?? dateYear.getFullYear());
     const [year, setYear] = require$$0.useState(formControl?.value ?? dateYear.getFullYear());
     const createPickerOptions = require$$0.useCallback(() => {
         return {
@@ -1728,32 +1797,26 @@ function RlsPickerYear({ date, disabled, formControl, maxDate, minDate, onValue,
         };
     }, [dateYear, year, minDate, maxDate]);
     const [template, setTemplate] = require$$0.useState(components.createYearPicker(createPickerOptions()));
-    const setYearValue = require$$0.useCallback((value) => {
-        formControl ? formControl.setValue(value) : setValue(value);
-        setYear(value);
-    }, [formControl]);
-    const onSelect = require$$0.useCallback((value) => {
-        setYearValue(value);
-        onValue?.(value);
-    }, [setYearValue, onValue]);
     require$$0.useEffect(() => {
-        const options = createPickerOptions(); // YearPickerProps
-        const year = components.verifyYearPicker(options);
-        year ? setYearValue(year) : setTemplate(components.createYearPicker(options));
-    }, [dateYear, year, value, minDate, maxDate]);
+        const options = createPickerOptions();
+        const validYear = components.verifyYearPicker(options);
+        validYear ? setYear(validYear) : setTemplate(components.createYearPicker(options));
+    }, [dateYear, year, minDate, maxDate]);
     require$$0.useEffect(() => {
-        const year = components.verifyYearPicker(createPickerOptions());
-        commons.valueIsDefined(year)
-            ? formControl?.setValue(year)
-            : setValue(formControl?.value ?? dateYear.getFullYear());
+        const yearValue = formControl?.value;
+        commons.valueIsDefined(yearValue) && yearValue !== year && setYear(yearValue);
     }, [formControl?.value]);
+    const onSelect = require$$0.useCallback((value) => {
+        formControl ? formControl.setValue(value) : setYear(value);
+        onValue?.(value);
+    }, [formControl, onValue]);
     const onClickPrev = require$$0.useCallback(() => {
         setYear((year) => year - 8);
     }, []);
     const onClickNext = require$$0.useCallback(() => {
         setYear((year) => year + 8);
     }, []);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-year", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-year__header", children: [jsxRuntimeExports.jsx("button", { className: "rls-picker-year__action rls-picker-year__action--prev", onClick: onClickPrev, disabled: !template.canPrevious || disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-left" }) }), jsxRuntimeExports.jsxs("span", { children: [template.minRange, " - ", template.maxRange] }), jsxRuntimeExports.jsx("button", { className: "rls-picker-year__action rls-picker-year__action--next", onClick: onClickNext, disabled: !template.canNext || disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-right" }) })] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-year__component", children: template.years.map((year, index) => (jsxRuntimeExports.jsx(RlsPickerYearElement, { year: year, onSelect: onSelect, disabled: disabled }, index))) })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-year", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-year__header", children: [jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-left", onClick: onClickPrev, disabled: !template.canPrevious || disabled }), jsxRuntimeExports.jsxs("span", { children: [template.minRange, " - ", template.maxRange] }), jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-right", onClick: onClickNext, disabled: !template.canNext || disabled })] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-year__component", children: template.years.map((year, index) => (jsxRuntimeExports.jsx(RlsPickerYearElement, { year: year, onSelect: onSelect, disabled: disabled }, index))) })] }));
 }
 
 function calculateInitialValue(value, minValue, maxValue) {
@@ -2014,23 +2077,23 @@ function RlsDropdown({ children, controller, rlsTheme }) {
     return (jsxRuntimeExports.jsx("div", { ref: controller.component, className: className, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-dropdown__content", children: children }) }));
 }
 
-const MAX_LIST_HEIGHT_REM = 90;
-const FALLBACK_REM_SIZE = 16;
-function getRemSize() {
+const MAX_LIST_HEIGHT_REM$1 = 90;
+const FALLBACK_REM_SIZE$1 = 16;
+function getRemSize$1() {
     if (typeof window === 'undefined') {
-        return FALLBACK_REM_SIZE;
+        return FALLBACK_REM_SIZE$1;
     }
     const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
-    return fontSize > 0 ? fontSize : FALLBACK_REM_SIZE;
+    return fontSize > 0 ? fontSize : FALLBACK_REM_SIZE$1;
 }
-function shouldDisplayHigher(content, list) {
+function shouldDisplayHigher$1(content, list) {
     if (!content) {
         return false;
     }
     const { top, bottom } = content.getBoundingClientRect();
     const spaceAbove = top;
     const spaceBelow = window.innerHeight - bottom;
-    const maxHeight = MAX_LIST_HEIGHT_REM * getRemSize();
+    const maxHeight = MAX_LIST_HEIGHT_REM$1 * getRemSize$1();
     const desiredHeight = Math.min(list?.scrollHeight || maxHeight, maxHeight);
     if (spaceBelow >= desiredHeight) {
         return false;
@@ -2107,7 +2170,7 @@ function useListController(props) {
         const _state = state.listIsVisible
             ? {
                 ...state,
-                higher: shouldDisplayHigher(refContent.current, refList.current)
+                higher: shouldDisplayHigher$1(refContent.current, refList.current)
             }
             : state;
         refreshState((state) => ({ ...state, ..._state }));
@@ -2349,7 +2412,7 @@ function RlsFieldAutocompleteTemplate(props) {
         onClickPattern,
         onSearch
     ]);
-    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.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", { className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: autocomplete.value, onClick: autocomplete.onClickControl }), !props.readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-box__action", disabled: disabled, onClick: autocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: autocomplete.value ? 'trash-2' : 'arrow-ios-down' }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx(RlsFieldListSuggestions, { elements: autocomplete.coincidences, visible: autocomplete.listIsVisible, action: action, disabled: disabled, higher: autocomplete.higher, render: render, refList: autocomplete.refList, searchControl: searchControl, onClickElement: autocomplete.onClickElement, onKeydownElement: autocomplete.onKeydownElement, onClickBackdrop: autocomplete.onClickBackdrop })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.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", { className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: autocomplete.value, onClick: autocomplete.onClickControl }), !props.readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: autocomplete.value ? 'trash-2' : 'arrow-ios-down', onClick: autocomplete.onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx(RlsFieldListSuggestions, { elements: autocomplete.coincidences, visible: autocomplete.listIsVisible, action: action, disabled: disabled, higher: autocomplete.higher, render: render, refList: autocomplete.refList, searchControl: searchControl, onClickElement: autocomplete.onClickElement, onKeydownElement: autocomplete.onKeydownElement, onClickBackdrop: autocomplete.onClickBackdrop })] }));
 }
 function RlsFieldAutocomplete(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 }) })), []);
@@ -2620,7 +2683,7 @@ function RlsFieldClock({ children, disabled: disabledProps, formControl, identif
         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("button", { className: "rls-field-box__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: status.icon }) }))] }) }), !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 }) })] }));
+    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}';
@@ -2757,7 +2820,7 @@ function RlsFieldDate({ children, date, disabled: disabledProps, formControl, fo
         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("button", { className: "rls-field-box__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: status.icon }) }))] }) }), !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 }) })] }));
+    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 }) {
@@ -2872,7 +2935,7 @@ function RlsFieldDateRange({ children, date, disabled: disabledProps, formContro
         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("button", { className: "rls-field-box__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: status.icon }) }))] }) }), !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 }) })] }));
+    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) {
@@ -2990,13 +3053,756 @@ function RlsFieldSelectTemplate(props) {
         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("button", { className: 'rls-field-box__action', disabled: disabled, onClick: select.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: !unremovable && !!select.value ? 'close' : 'arrow-ios-down' }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx(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 })] }));
+    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 hsvToRgb({ h, s, v }) {
+    const _h = h / 360;
+    const _s = s / 100;
+    const _v = v / 100;
+    const i = Math.floor(_h * 6);
+    const f = _h * 6 - i;
+    const p = _v * (1 - _s);
+    const q = _v * (1 - f * _s);
+    const t = _v * (1 - (1 - f) * _s);
+    let r;
+    let g;
+    let b;
+    switch (i % 6) {
+        case 0:
+            r = _v;
+            g = t;
+            b = p;
+            break;
+        case 1:
+            r = q;
+            g = _v;
+            b = p;
+            break;
+        case 2:
+            r = p;
+            g = _v;
+            b = t;
+            break;
+        case 3:
+            r = p;
+            g = q;
+            b = _v;
+            break;
+        case 4:
+            r = t;
+            g = p;
+            b = _v;
+            break;
+        case 5:
+            r = _v;
+            g = p;
+            b = q;
+            break;
+        default:
+            r = 0;
+            g = 0;
+            b = 0;
+    }
+    return {
+        r: Math.round(r * 255),
+        g: Math.round(g * 255),
+        b: Math.round(b * 255)
+    };
+}
+function rgbToHsv(r, g, b) {
+    const _r = r / 255;
+    const _g = g / 255;
+    const _b = b / 255;
+    const max = Math.max(_r, _g, _b);
+    const min = Math.min(_r, _g, _b);
+    const d = max - min;
+    let h = 0;
+    const s = max === 0 ? 0 : d / max;
+    const v = max;
+    if (max !== min) {
+        switch (max) {
+            case _r:
+                h = ((_g - _b) / d + (_g < _b ? 6 : 0)) / 6;
+                break;
+            case _g:
+                h = ((_b - _r) / d + 2) / 6;
+                break;
+            case _b:
+                h = ((_r - _g) / d + 4) / 6;
+                break;
+        }
+    }
+    return {
+        h: Math.round(h * 360),
+        s: Math.round(s * 100),
+        v: Math.round(v * 100)
+    };
+}
+function rgbToHex(r, g, b) {
+    return ('#' +
+        [r, g, b]
+            .map((x) => x.toString(16).padStart(2, '0'))
+            .join('')
+            .toUpperCase());
+}
+function hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16)
+        }
+        : null;
+}
+function hexToHsv(hex) {
+    const rgb = hexToRgb(hex);
+    return rgb ? rgbToHsv(rgb.r, rgb.g, rgb.b) : null;
+}
+function hsvToHex(hsv) {
+    const rgb = hsvToRgb(hsv);
+    return rgbToHex(rgb.r, rgb.g, rgb.b);
+}
+function hexIsValid(hex) {
+    return /^#?([a-f\d]{3}){1,2}$/i.test(hex);
+}
+function normalizeHex(hex) {
+    let value = hex.replace(/[^a-fA-F\d]/g, '');
+    if (value.length === 3) {
+        value = value
+            .split('')
+            .map((c) => c + c)
+            .join('');
+    }
+    return value.length === 6 ? `#${value.toUpperCase()}` : '';
+}
+function hslToHex({ h, s, l }) {
+    const _s = s / 100;
+    const _l = l / 100;
+    const a = _s * Math.min(_l, 1 - _l);
+    const f = (n) => {
+        const k = (n + h / 30) % 12;
+        return Math.round(255 * (_l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)))
+            .toString(16)
+            .padStart(2, '0');
+    };
+    return `#${f(0)}${f(8)}${f(4)}`.toUpperCase();
+}
+function rgbToHsl(r, g, b) {
+    const _r = r / 255;
+    const _g = g / 255;
+    const _b = b / 255;
+    const max = Math.max(_r, _g, _b);
+    const min = Math.min(_r, _g, _b);
+    const d = max - min;
+    let h = 0;
+    const l = (max + min) / 2;
+    const s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1));
+    if (d !== 0) {
+        switch (max) {
+            case _r:
+                h = ((_g - _b) / d + (_g < _b ? 6 : 0)) / 6;
+                break;
+            case _g:
+                h = ((_b - _r) / d + 2) / 6;
+                break;
+            case _b:
+                h = ((_r - _g) / d + 4) / 6;
+                break;
+        }
+    }
+    return {
+        h: Math.round(h * 360),
+        s: Math.round(s * 100),
+        l: Math.round(l * 100)
+    };
+}
+function hexToHsl(hex) {
+    const rgb = hexToRgb(hex);
+    return rgb ? rgbToHsl(rgb.r, rgb.g, rgb.b) : null;
+}
+const STANDARD_LUMINANCE = {
+    '950': 16,
+    '900': 24,
+    '800': 28,
+    '700': 33,
+    '600': 40,
+    '500': 48,
+    '400': 58,
+    '300': 72,
+    '200': 84,
+    '100': 92,
+    '050': 97
+};
+const SHADE_LABELS = [
+    '950',
+    '900',
+    '800',
+    '700',
+    '600',
+    '500',
+    '400',
+    '300',
+    '200',
+    '100',
+    '050'
+];
+function parseHex(color) {
+    const rgb = hexToRgb(color);
+    if (!rgb)
+        throw new Error(`Invalid color: "${color}". Use format "#FF6600".`);
+    return rgb;
+}
+function generateThemeCSS(colors, theme) {
+    const c900 = colors['900'];
+    const c700 = colors['700'];
+    const c500 = colors['500'];
+    const r900 = parseHex(c900);
+    const r700 = parseHex(c700);
+    const r500 = parseHex(c500);
+    const rgb900 = `${r900.r}, ${r900.g}, ${r900.b}`;
+    const rgb700 = `${r700.r}, ${r700.g}, ${r700.b}`;
+    const rgb500 = `${r500.r}, ${r500.g}, ${r500.b}`;
+    return [
+        { name: `--rls-${theme}-color-950`, value: colors['950'] },
+        { name: `--rls-${theme}-color-900`, value: c900 },
+        { name: `--rls-${theme}-color-800`, value: colors['800'] },
+        { name: `--rls-${theme}-color-700`, value: c700 },
+        { name: `--rls-${theme}-color-600`, value: colors['600'] },
+        { name: `--rls-${theme}-color-500`, value: c500 },
+        { name: `--rls-${theme}-color-400`, value: colors['400'] },
+        { name: `--rls-${theme}-color-300`, value: colors['300'] },
+        { name: `--rls-${theme}-color-200`, value: colors['200'] },
+        { name: `--rls-${theme}-color-100`, value: colors['100'] },
+        { name: `--rls-${theme}-color-050`, value: colors['050'] },
+        {
+            name: `--rls-${theme}-gradient-700`,
+            value: `linear-gradient(180deg, ${c700} 15%, ${colors['800']} 85%)`
+        },
+        {
+            name: `--rls-${theme}-gradient-600`,
+            value: `linear-gradient(180deg, ${colors['600']} 15%, ${c700} 85%)`
+        },
+        {
+            name: `--rls-${theme}-gradient-500`,
+            value: `linear-gradient(180deg, ${c500} 15%, ${colors['600']} 85%)`
+        },
+        {
+            name: `--rls-${theme}-gradient-400`,
+            value: `linear-gradient(180deg, ${colors['400']} 15%, ${c500} 85%)`
+        },
+        {
+            name: `--rls-${theme}-gradient-300`,
+            value: `linear-gradient(180deg, ${colors['300']} 15%, ${colors['400']} 85%)`
+        },
+        { name: `--rls-${theme}-backdrop-900`, value: `rgba(${rgb900}, 0.9)` },
+        { name: `--rls-${theme}-backdrop-800`, value: `rgba(${rgb900}, 0.8)` },
+        { name: `--rls-${theme}-backdrop-700`, value: `rgba(${rgb900}, 0.7)` },
+        { name: `--rls-${theme}-backdrop-600`, value: `rgba(${rgb900}, 0.6)` },
+        { name: `--rls-${theme}-backdrop-500`, value: `rgba(${rgb900}, 0.5)` },
+        { name: `--rls-${theme}-backdrop-400`, value: `rgba(${rgb900}, 0.4)` },
+        { name: `--rls-${theme}-backdrop-300`, value: `rgba(${rgb900}, 0.3)` },
+        { name: `--rls-${theme}-backdrop-200`, value: `rgba(${rgb900}, 0.2)` },
+        { name: `--rls-${theme}-backdrop-100`, value: `rgba(${rgb900}, 0.1)` },
+        { name: `--rls-${theme}-skeleton-500`, value: `rgba(${rgb700}, 0.5)` },
+        { name: `--rls-${theme}-skeleton-400`, value: `rgba(${rgb700}, 0.325)` },
+        { name: `--rls-${theme}-skeleton-300`, value: `rgba(${rgb700}, 0.25)` },
+        { name: `--rls-${theme}-skeleton-200`, value: `rgba(${rgb700}, 0.175)` },
+        { name: `--rls-${theme}-skeleton-100`, value: `rgba(${rgb700}, 0.1)` },
+        { name: `--rls-${theme}-shadow-color-500`, value: `rgba(${rgb500}, 0.24)` },
+        {
+            name: `--rls-${theme}-shadow-500`,
+            value: `0px 0px 0px 3px rgba(${rgb500}, 0.24)`
+        }
+    ];
+}
+function detectShadeLevel(hsl) {
+    let bestLevel = '500';
+    let minDiff = Infinity;
+    Object.keys(STANDARD_LUMINANCE).forEach((level) => {
+        const targetL = STANDARD_LUMINANCE[level];
+        const diff = Math.abs(hsl.l - targetL);
+        if (diff < minDiff) {
+            minDiff = diff;
+            bestLevel = level;
+        }
+    });
+    return bestLevel;
+}
+function generateThemePalette(baseColor, theme = 'primary') {
+    const hsl = hexToHsl(baseColor);
+    if (!hsl)
+        throw new Error(`Invalid color: "${baseColor}". Use format "#FF6600".`);
+    const matchedLevel = detectShadeLevel(hsl);
+    const targetL = STANDARD_LUMINANCE[matchedLevel];
+    const inputL = hsl.l;
+    const colors = {};
+    const matchedIndex = SHADE_LABELS.indexOf(matchedLevel);
+    SHADE_LABELS.forEach((label) => {
+        if (label === matchedLevel) {
+            colors[label] = baseColor.toUpperCase();
+            return;
+        }
+        const shadeTargetL = STANDARD_LUMINANCE[label];
+        const labelIndex = SHADE_LABELS.indexOf(label);
+        let lightL;
+        if (labelIndex < matchedIndex) {
+            const ratio = inputL / targetL;
+            lightL = shadeTargetL * ratio;
+        }
+        else {
+            const remainingInput = 100 - inputL;
+            const remainingTarget = 100 - targetL;
+            const progress = (shadeTargetL - targetL) / remainingTarget;
+            lightL = inputL + progress * remainingInput;
+        }
+        lightL = Math.min(100, Math.max(0, lightL));
+        const satFactor = lightL > 60
+            ? Math.max(0.2, (100 - lightL) / 40)
+            : lightL < 30
+                ? Math.max(0.2, lightL / 30)
+                : 1;
+        colors[label] = hslToHex({
+            h: hsl.h,
+            s: Math.round(Math.min(100, hsl.s * satFactor)),
+            l: Math.round(lightL)
+        });
+    });
+    const shades = colors;
+    const properties = generateThemeCSS(shades, theme);
+    return {
+        theme,
+        colors: shades,
+        css: properties.map((p) => `${p.name}: ${p.value};`).join('\n'),
+        properties
+    };
+}
+function setThemeColor(baseColor, theme = 'primary') {
+    const { properties } = generateThemePalette(baseColor, theme);
+    const target = document.body || document.documentElement;
+    properties.forEach(({ name, value }) => {
+        target.style.setProperty(name, value);
+    });
+}
+const DEFAULT_COLOR = '#1780e0';
+
+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 updateColorOnCanvas = require$$0.useEffectEvent((clientX, clientY) => {
+        if (!canvasRef.current)
+            return;
+        const pos = getPositionInElement(canvasRef.current, clientX, clientY);
+        setHsv((prev) => ({
+            ...prev,
+            s: Math.round(Math.min(1, Math.max(0, pos.x)) * 100),
+            v: Math.round(Math.min(1, Math.max(0, 1 - pos.y)) * 100)
+        }));
+    });
+    const updateHueOnSlider = require$$0.useEffectEvent((clientX, clientY) => {
+        if (!hueRef.current)
+            return;
+        const pos = getPositionInElement(hueRef.current, clientX, clientY);
+        setHsv((prev) => ({
+            ...prev,
+            h: Math.round(Math.min(1, Math.max(0, pos.x)) * 360)
+        }));
+    });
+    const updateAlphaOnSlider = require$$0.useEffectEvent((clientX, clientY) => {
+        if (!alphaRef.current)
+            return;
+        const pos = getPositionInElement(alphaRef.current, clientX, clientY);
+        setAlpha(Math.min(1, Math.max(0, pos.x)));
+    });
+    const onMouseDown = require$$0.useCallback((event) => {
+        const slider = event.currentTarget.dataset.slider;
+        if (!slider)
+            return;
+        event.preventDefault();
+        selectionIsActive.current = true;
+        activeSlider.current = slider;
+        switch (slider) {
+            case 'canvas':
+                updateColorOnCanvas(event.clientX, event.clientY);
+                break;
+            case 'hue':
+                updateHueOnSlider(event.clientX, event.clientY);
+                break;
+            case 'alpha':
+                updateAlphaOnSlider(event.clientX, event.clientY);
+                break;
+        }
+    }, [updateColorOnCanvas, updateHueOnSlider, updateAlphaOnSlider]);
+    const onMouseMove = require$$0.useCallback((event) => {
+        if (!selectionIsActive.current || !activeSlider.current)
+            return;
+        event.preventDefault();
+        switch (activeSlider.current) {
+            case 'canvas':
+                updateColorOnCanvas(event.clientX, event.clientY);
+                break;
+            case 'hue':
+                updateHueOnSlider(event.clientX, event.clientY);
+                break;
+            case 'alpha':
+                updateAlphaOnSlider(event.clientX, event.clientY);
+                break;
+        }
+    }, [updateColorOnCanvas, updateHueOnSlider, updateAlphaOnSlider]);
+    const onTouchStart = require$$0.useCallback((event) => {
+        const slider = event.currentTarget.dataset.slider;
+        if (!slider)
+            return;
+        const touch = event.touches.item(0);
+        if (!touch)
+            return;
+        selectionIsActive.current = true;
+        activeSlider.current = slider;
+        switch (slider) {
+            case 'canvas':
+                updateColorOnCanvas(touch.clientX, touch.clientY);
+                break;
+            case 'hue':
+                updateHueOnSlider(touch.clientX, touch.clientY);
+                break;
+            case 'alpha':
+                updateAlphaOnSlider(touch.clientX, touch.clientY);
+                break;
+        }
+    }, [updateColorOnCanvas, updateHueOnSlider, updateAlphaOnSlider]);
+    const onTouchMove = require$$0.useCallback((event) => {
+        const touch = event.touches.item(0);
+        if (!selectionIsActive.current || !activeSlider.current || !touch)
+            return;
+        switch (activeSlider.current) {
+            case 'canvas':
+                updateColorOnCanvas(touch.clientX, touch.clientY);
+                break;
+            case 'hue':
+                updateHueOnSlider(touch.clientX, touch.clientY);
+                break;
+            case 'alpha':
+                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);
+        }
+    }, []);
+    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) => {
+        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(() => {
+        !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 }) => {
+        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 MAX_LIST_HEIGHT_REM = 90;
+const FALLBACK_REM_SIZE = 16;
+function getRemSize() {
+    if (typeof window === 'undefined') {
+        return FALLBACK_REM_SIZE;
+    }
+    const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    return fontSize > 0 ? fontSize : FALLBACK_REM_SIZE;
+}
+function shouldDisplayHigher(content, list) {
+    if (!content) {
+        return false;
+    }
+    const { top, bottom } = content.getBoundingClientRect();
+    const spaceAbove = top;
+    const spaceBelow = window.innerHeight - bottom;
+    const maxHeight = MAX_LIST_HEIGHT_REM * getRemSize();
+    const desiredHeight = Math.min(list?.scrollHeight || maxHeight, maxHeight);
+    if (spaceBelow >= desiredHeight) {
+        return false;
+    }
+    if (spaceAbove >= desiredHeight) {
+        return true;
+    }
+    return spaceAbove > spaceBelow;
+}
+function useFieldList(props) {
+    const { suggestions, disabled } = props;
+    const refContent = require$$0.useRef(null);
+    const refList = require$$0.useRef(null);
+    const formControl = props.formControl;
+    const [state, setState] = require$$0.useState({
+        higher: false,
+        listIsVisible: false
+    });
+    const [selected, setSelected] = require$$0.useState([]);
+    require$$0.useEffect(() => {
+        function onCloseSuggestions({ target }) {
+            !refContent?.current?.contains(target) &&
+                setState((state) => ({ ...state, listIsVisible: false }));
+        }
+        document.addEventListener('click', onCloseSuggestions);
+        return () => {
+            document.removeEventListener('click', onCloseSuggestions);
+        };
+    }, []);
+    require$$0.useEffect(() => {
+        const formValue = formControl?.value;
+        if (formValue !== undefined && formValue !== null && formValue.length) {
+            const selectedElements = suggestions.filter((state) => formValue.some((value) => state.compareTo(value)));
+            setSelected(selectedElements);
+        }
+        else {
+            setSelected([]);
+        }
+    }, [formControl?.value, suggestions]);
+    const setListState = require$$0.useCallback((updates) => {
+        setState((state) => {
+            const _updates = updates.listIsVisible !== undefined
+                ? {
+                    ...updates,
+                    ...(updates.listIsVisible
+                        ? {
+                            higher: shouldDisplayHigher(refContent.current, refList.current)
+                        }
+                        : {})
+                }
+                : updates;
+            return { ...state, ..._updates };
+        });
+    }, []);
+    const toggleElement = require$$0.useCallback((element) => {
+        const alreadySelected = selected.some((state) => state.compareTo(element.value));
+        const newSelected = alreadySelected
+            ? selected.filter((state) => !state.compareTo(element.value))
+            : [...selected, element];
+        const newValues = newSelected.map((state) => state.value);
+        setSelected(newSelected);
+        formControl?.setValue(newValues);
+        props.onValue?.(newValues);
+    }, [selected, formControl, props.onValue]);
+    const isSelected = require$$0.useCallback((element) => {
+        return selected.some((state) => state.compareTo(element.value));
+    }, [selected]);
+    const onClickInput = require$$0.useCallback(() => {
+        if (!props.readOnly) {
+            setListState({ listIsVisible: true });
+        }
+    }, [setListState, props.readOnly]);
+    const onClickBackdrop = require$$0.useCallback(() => {
+        setListState({ listIsVisible: false });
+    }, [setListState]);
+    const onClickAction = require$$0.useCallback(() => {
+        if (!disabled && !props.readOnly) {
+            setListState({ listIsVisible: !state.listIsVisible });
+        }
+    }, [disabled, props.readOnly, setListState, state.listIsVisible]);
+    const onClickElement = require$$0.useCallback((element) => {
+        return () => {
+            toggleElement(element);
+        };
+    }, [toggleElement]);
+    const onRemoveElement = require$$0.useCallback((element) => {
+        return (event) => {
+            event.stopPropagation();
+            const newSelected = selected.filter((state) => !state.compareTo(element.value));
+            const newValues = newSelected.map((state) => state.value);
+            setSelected(newSelected);
+            formControl?.setValue(newValues);
+            props.onValue?.(newValues);
+        };
+    }, [selected, formControl, props.onValue]);
+    const onKeydownElement = require$$0.useCallback((element) => {
+        return (event) => {
+            event.code === 'Enter' && toggleElement(element);
+        };
+    }, [toggleElement]);
+    return {
+        ...state,
+        selected,
+        refContent,
+        refList,
+        isSelected,
+        onClickAction,
+        onClickBackdrop,
+        onClickElement,
+        onClickInput,
+        onKeydownElement,
+        onRemoveElement
+    };
+}
+
+function RlsFieldListInner({ render, suggestions, action, children, formControl, fieldList, msgErrorDisabled, placeholder, rlsTheme, ...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: fieldList.listIsVisible && !disabled,
+            error: formControl?.wrong,
+            disabled,
+            readonly: props.readOnly
+        }, `rls-field-list rls-field-list__multi ${props.className ?? ''}`);
+    }, [
+        formControl?.wrong,
+        fieldList.listIsVisible,
+        props.className,
+        props.readOnly,
+        disabled
+    ]);
+    const renderWithCheckbox = require$$0.useCallback((element) => (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__multi__element", children: [jsxRuntimeExports.jsx(RlsCheckBox, { checked: fieldList.isSelected(element) }), render(element)] })), [fieldList.isSelected, render]);
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: fieldList.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("div", { className: "rls-field-list__multi__chips", onClick: disabled ? undefined : fieldList.onClickInput, children: !fieldList.selected.length && placeholder ? (jsxRuntimeExports.jsx("span", { className: "rls-field-list__multi__placeholder", children: placeholder })) : (fieldList.selected.map((item, index) => (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__multi__chip", children: [jsxRuntimeExports.jsx("span", { className: "rls-field-list__multi__chip__description", children: item.description }), !props.readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-list__multi__chip__remove", onClick: fieldList.onRemoveElement(item), disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: "close" }) }))] }, index)))) }), !props.readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-down", onClick: fieldList.onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx(RlsFieldListSuggestions, { elements: suggestions, visible: fieldList.listIsVisible, action: action, disabled: disabled, higher: fieldList.higher, render: renderWithCheckbox, refList: fieldList.refList, onClickElement: fieldList.onClickElement, onKeydownElement: fieldList.onKeydownElement, onClickBackdrop: fieldList.onClickBackdrop })] }));
+}
+function RlsFieldListTemplate(props) {
+    const fieldList = useFieldList(props);
+    return jsxRuntimeExports.jsx(RlsFieldListInner, { ...props, fieldList: fieldList });
+}
+function RlsFieldList(props) {
+    const fieldList = useFieldList(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(RlsFieldListInner, { ...props, render: render, fieldList: fieldList });
+}
+
 function RlsFormNavigation({ children, className, controller, visible, rlsTheme }) {
     const classNameForm = require$$0.useMemo(() => {
         return renderClassStatus('rls-form-navigation', { visible: controller?.visible ?? visible }, className);
@@ -3621,6 +4427,7 @@ function usePortalController() {
 }
 
 exports.ConfirmationResult = ConfirmationResult;
+exports.DEFAULT_COLOR = DEFAULT_COLOR;
 exports.RlsAccordion = RlsAccordion;
 exports.RlsAlert = RlsAlert;
 exports.RlsAmount = RlsAmount;
@@ -3634,8 +4441,10 @@ exports.RlsBottomSheet = RlsBottomSheet;
 exports.RlsBreadcrumb = RlsBreadcrumb;
 exports.RlsButton = RlsButton;
 exports.RlsButtonAction = RlsButtonAction;
+exports.RlsButtonIcon = RlsButtonIcon;
 exports.RlsButtonOption = RlsButtonOption;
 exports.RlsButtonProgress = RlsButtonProgress;
+exports.RlsButtonStepper = RlsButtonStepper;
 exports.RlsButtonToggle = RlsButtonToggle;
 exports.RlsCard = RlsCard;
 exports.RlsCheckBox = RlsCheckBox;
@@ -3657,11 +4466,14 @@ exports.RlsFieldArea = RlsFieldArea;
 exports.RlsFieldAutocomplete = RlsFieldAutocomplete;
 exports.RlsFieldAutocompleteTemplate = RlsFieldAutocompleteTemplate;
 exports.RlsFieldClock = RlsFieldClock;
+exports.RlsFieldColor = RlsFieldColor;
 exports.RlsFieldDate = RlsFieldDate;
 exports.RlsFieldDateRange = RlsFieldDateRange;
 exports.RlsFieldDecimal = RlsFieldDecimal;
 exports.RlsFieldFile = RlsFieldFile;
+exports.RlsFieldList = RlsFieldList;
 exports.RlsFieldListSuggestions = RlsFieldListSuggestions;
+exports.RlsFieldListTemplate = RlsFieldListTemplate;
 exports.RlsFieldMoney = RlsFieldMoney;
 exports.RlsFieldNumber = RlsFieldNumber;
 exports.RlsFieldPassword = RlsFieldPassword;
@@ -3676,6 +4488,7 @@ exports.RlsImage = RlsImage;
 exports.RlsImageChooser = RlsImageChooser;
 exports.RlsImageEditor = RlsImageEditor;
 exports.RlsInput = RlsInput;
+exports.RlsInputCounter = RlsInputCounter;
 exports.RlsInputDecimal = RlsInputDecimal;
 exports.RlsInputMoney = RlsInputMoney;
 exports.RlsInputNumber = RlsInputNumber;
@@ -3697,6 +4510,7 @@ exports.RlsNavbar = RlsNavbar;
 exports.RlsNavbarMenu = RlsNavbarMenu;
 exports.RlsPagination = RlsPagination;
 exports.RlsPickerClock = RlsPickerClock;
+exports.RlsPickerColor = RlsPickerColor;
 exports.RlsPickerDate = RlsPickerDate;
 exports.RlsPickerDateRange = RlsPickerDateRange;
 exports.RlsPickerDay = RlsPickerDay;
@@ -3719,13 +4533,27 @@ exports.RlsTabs = RlsTabs;
 exports.RlsTabularText = RlsTabularText;
 exports.RlsToolbar = RlsToolbar;
 exports.calculateImgDimension = calculateImgDimension;
+exports.generateThemePalette = generateThemePalette;
+exports.hexIsValid = hexIsValid;
+exports.hexToHsl = hexToHsl;
+exports.hexToHsv = hexToHsv;
+exports.hexToRgb = hexToRgb;
+exports.hslToHex = hslToHex;
+exports.hsvToHex = hsvToHex;
+exports.hsvToRgb = hsvToRgb;
+exports.normalizeHex = normalizeHex;
 exports.rangeFormatTemplate = rangeFormatTemplate;
 exports.renderClassStatus = renderClassStatus;
+exports.rgbToHex = rgbToHex;
+exports.rgbToHsl = rgbToHsl;
+exports.rgbToHsv = rgbToHsv;
 exports.setErrorsI18n = setErrorsI18n;
+exports.setThemeColor = setThemeColor;
 exports.useConfirmation = useConfirmation;
 exports.useDatatable = useDatatable;
 exports.useDropdownController = useDropdownController;
 exports.useFieldAutocomplete = useFieldAutocomplete;
+exports.useFieldList = useFieldList;
 exports.useFieldSelect = useFieldSelect;
 exports.useFormSingleSelectionController = useFormSingleSelectionController;
 exports.useFormToggleController = useFormToggleController;