@rolster/react-components 19.6.10 → 19.7.0

package/dist/es/index.mjs

@@ -1,4 +1,4 @@
-import require$$0, { useMemo, useState, useRef, useCallback, useEffect, useEffectEvent, createContext, useContext } from 'react';
+import require$$0, { memo, useMemo, useState, useRef, useCallback, useEffect, useEffectEvent, createContext, useContext } from 'react';
 import { currencyFormat, BigDecimal, valueIsDefined, SealedPartial } from '@rolster/commons';
 import { i18n, i18nSubscribe } from '@rolster/i18n';
 import { PaginationController, verifyDayPicker, createDayPicker, createDayRangePicker, verifyMonthPicker, createMonthPicker, monthLimitTemplate, createYearPicker, verifyYearPicker, ListCollection, navigationListFromInput, navigationListFromElement, createAutocompleteStore, PickerListenerEvent, dateOutRange, verifyDateRange } from '@rolster/components';
@@ -429,16 +429,16 @@ function requireJsxRuntime () {
 var jsxRuntimeExports = requireJsxRuntime();
 
 function renderClassStatus(base, status = {}, additionals) {
-    const _classElement = [base];
+    const classElement = [base];
     Object.entries(status).forEach(([key, state]) => {
         if (state) {
-            _classElement.push(typeof state === 'string' ? `${base}--${state}` : `${base}--${key}`);
+            classElement.push(typeof state === 'string' ? `${base}--${state}` : `${base}--${key}`);
         }
     });
     if (additionals) {
-        _classElement.push(additionals);
+        classElement.push(additionals);
     }
-    return _classElement.join(' ').trim();
+    return classElement.join(' ').trim();
 }
 
 const className = 'rls-tabular-text';
@@ -448,7 +448,7 @@ function getCharClass(char) {
         ? `${className}__pointer`
         : `${className}__char`;
 }
-function RlsTabularText({ className, value }) {
+function RlsTabularTextComponent({ className, value }) {
     const codes = useMemo(() => {
         return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: value?.split('').map((char, index) => (jsxRuntimeExports.jsx("span", { className: getCharClass(char), children: char }, index))) }));
     }, [value]);
@@ -457,8 +457,9 @@ function RlsTabularText({ className, value }) {
     }, [className]);
     return jsxRuntimeExports.jsx("div", { className: _className, children: codes });
 }
+const RlsTabularText = memo(RlsTabularTextComponent);
 
-function RlsAmount({ value, className, decimals, rlsTheme, symbol }) {
+function RlsAmountComponent({ value, className, decimals, rlsTheme, symbol }) {
     const classNameAmount = useMemo(() => {
         return renderClassStatus('rls-amount', {}, className);
     }, [className]);
@@ -475,8 +476,9 @@ function RlsAmount({ value, className, decimals, rlsTheme, symbol }) {
     }, [value, decimals]);
     return (jsxRuntimeExports.jsxs("div", { className: classNameAmount, "rls-theme": rlsTheme, children: [symbol && jsxRuntimeExports.jsx("span", { className: "rls-amount__symbol", children: symbol }), jsxRuntimeExports.jsxs("div", { className: "rls-amount__content", children: [jsxRuntimeExports.jsx(RlsTabularText, { className: "rls-amount__integer", value: integer }), decimal && (jsxRuntimeExports.jsx(RlsTabularText, { className: "rls-amount__decimal", value: decimal }))] })] }));
 }
+const RlsAmount = memo(RlsAmountComponent);
 
-function RlsAreaText({ autoComplete, disabled, formControl, identifier, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, resize, rows = 1, value }) {
+function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, resize, rows = 1, value }) {
     const valueInitial = String(formControl?.value ?? value ?? '');
     const [valueArea, setValueArea] = useState(valueInitial);
     const [focused, setFocused] = useState(false);
@@ -545,20 +547,23 @@ function RlsAreaText({ autoComplete, disabled, formControl, identifier, onBlur,
     ]);
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, children: [jsxRuntimeExports.jsx("textarea", { ref: areaRef, className: "rls-area-text__component", autoComplete: autoComplete ?? 'off', placeholder: placeholder, disabled: formControl?.disabled || disabled, readOnly: readOnly, rows: rows, style: { resize }, onFocus: onFocusArea, onBlur: onBlurArea, onChange: onChangeArea, onKeyDown: onKeyDownArea, onKeyUp: onKeyUpArea, value: valueArea }), jsxRuntimeExports.jsx("span", { className: "rls-area-text__value", children: valueArea })] }));
 }
+const RlsAreaText = memo(RlsAreaTextComponent);
 
-function RlsAvatar({ children, contrasted, rounded, skeleton, rlsTheme }) {
+function RlsAvatarComponent({ children, contrasted, rounded, skeleton, rlsTheme }) {
     const className = useMemo(() => {
         return renderClassStatus('rls-avatar', { contrasted, rounded, skeleton });
     }, [contrasted, rounded, skeleton]);
     return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: children }));
 }
+const RlsAvatar = memo(RlsAvatarComponent);
 
-function RlsBadge({ children, contrasted, rlsTheme }) {
+function RlsBadgeComponent({ children, contrasted, rlsTheme }) {
     const className = useMemo(() => {
         return renderClassStatus('rls-badge', { contrasted });
     }, [contrasted]);
     return (jsxRuntimeExports.jsx("span", { className: className, "rls-theme": rlsTheme, children: children }));
 }
+const RlsBadge = memo(RlsBadgeComponent);
 
 function RlsBreadcrumbLabel({ label }) {
     const className = useMemo(() => {
@@ -568,44 +573,50 @@ function RlsBreadcrumbLabel({ label }) {
     }, [label.onClick]);
     return (jsxRuntimeExports.jsx("span", { className: "rls-breadcrumb__label", onClick: label.onClick, children: jsxRuntimeExports.jsx("a", { className: className, "rls-theme": label.rlsTheme, children: label.label }) }));
 }
-function RlsBreadcrumb({ labels }) {
+function RlsBreadcrumbComponent({ labels }) {
     const children = useMemo(() => {
         return labels.map((label, index) => (jsxRuntimeExports.jsx(RlsBreadcrumbLabel, { label: label }, index)));
     }, [labels]);
     return jsxRuntimeExports.jsx("div", { className: "rls-breadcrumb", children: children });
 }
+const RlsBreadcrumb = memo(RlsBreadcrumbComponent);
 
-function RlsIcon({ value, className, rlsTheme, skeleton }) {
+function RlsIconComponent({ value, className, rlsTheme, skeleton }) {
     const classNameIcon = useMemo(() => {
         return renderClassStatus('rls-icon', { skeleton }, className);
     }, [className, skeleton]);
     return (jsxRuntimeExports.jsx("div", { className: classNameIcon, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("i", { className: `rls-icon-${value}` }) }));
 }
+const RlsIcon = memo(RlsIconComponent);
 
-function RlsSpinner() {
+function RlsSpinnerComponent() {
     return (jsxRuntimeExports.jsxs("div", { className: "rls-spinner", children: [jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--1", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--2", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--3", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--4", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--5", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--6", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--7", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--8", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--9", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) })] }));
 }
+const RlsSpinner = memo(RlsSpinnerComponent);
 
-function RlsButton({ type, children, disabled, identifier, onClick, prefixIcon, requesting, rlsTheme, suffixIcon }) {
+function RlsButtonComponent({ type, children, disabled, identifier, onClick, prefixIcon, requesting, rlsTheme, suffixIcon }) {
     const className = useMemo(() => {
         return renderClassStatus('rls-button__content', { type });
     }, [type]);
     return (jsxRuntimeExports.jsx("button", { id: identifier, className: "rls-button", onClick: onClick, "rls-theme": rlsTheme, disabled: disabled, children: jsxRuntimeExports.jsxs("div", { className: className, children: [requesting && jsxRuntimeExports.jsx(RlsSpinner, {}), prefixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: prefixIcon }), children && jsxRuntimeExports.jsx("div", { className: "rls-button__description", children: children }), suffixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: suffixIcon })] }) }));
 }
+const RlsButton = memo(RlsButtonComponent);
 
-function RlsButtonAction({ icon, disabled, identifier, onClick, rlsTheme, tooltip, type }) {
+function RlsButtonActionComponent({ icon, disabled, identifier, onClick, rlsTheme, tooltip, type }) {
     const className = useMemo(() => {
         return renderClassStatus('rls-button-action', { type });
     }, [type]);
     return (jsxRuntimeExports.jsxs("button", { id: identifier, className: className, onClick: onClick, disabled: disabled, "rls-theme": rlsTheme, 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 }) }))] }));
 }
+const RlsButtonAction = memo(RlsButtonActionComponent);
 
-function RlsButtonIcon({ icon, className, disabled, onClick, skeleton }) {
+function RlsButtonIconComponent({ icon, className, disabled, onClick, skeleton }) {
     const classNameButton = 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 }) }));
 }
+const RlsButtonIcon = memo(RlsButtonIconComponent);
 
 function useFormSingleSelectionController({ disabled, formControl, onValue, value }) {
     const [checked, setChecked] = useState(formControl?.value === value);
@@ -621,7 +632,7 @@ function useFormSingleSelectionController({ disabled, formControl, onValue, valu
     return { checked, onSelect };
 }
 
-function RlsButtonOption({ icon, children, disabled, formControl, identifier, onClick, onValue, value }) {
+function RlsButtonOptionComponent({ icon, children, disabled, formControl, identifier, onClick, onValue, value }) {
     const { checked, onSelect } = useFormSingleSelectionController({
         disabled,
         formControl,
@@ -637,25 +648,29 @@ function RlsButtonOption({ icon, children, disabled, formControl, identifier, on
     }, [onSelect, onClick]);
     return (jsxRuntimeExports.jsxs("button", { id: identifier, className: className, onClick: onAction, disabled: disabled, children: [jsxRuntimeExports.jsx(RlsIcon, { value: icon }), children] }));
 }
+const RlsButtonOption = memo(RlsButtonOptionComponent);
 
-function RlsCheckBox({ checked, disabled, identifier, onClick, rlsTheme }) {
+function RlsCheckBoxComponent({ checked, disabled, identifier, onClick, rlsTheme }) {
     const className = useMemo(() => {
         return renderClassStatus('rls-checkbox', { checked, disabled });
     }, [checked, disabled]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: className, onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx(RlsIcon, { value: "checkmark" }) }));
 }
-function RlsCheckBoxControl({ formControl, disabled, identifier, rlsTheme }) {
+const RlsCheckBox = memo(RlsCheckBoxComponent);
+function RlsCheckBoxControlComponent({ formControl, disabled, identifier, rlsTheme }) {
     const onClick = useCallback(() => {
         formControl.setValue(!formControl.value);
     }, [formControl.value]);
     return (jsxRuntimeExports.jsx(RlsCheckBox, { identifier: identifier, checked: !!formControl.value, disabled: disabled, onClick: onClick, rlsTheme: rlsTheme }));
 }
+const RlsCheckBoxControl = memo(RlsCheckBoxControlComponent);
 
-function RlsSkeleton({ rlsTheme }) {
+function RlsSkeletonComponent({ rlsTheme }) {
     return jsxRuntimeExports.jsx("div", { className: "rls-skeleton", "rls-theme": rlsTheme });
 }
+const RlsSkeleton = memo(RlsSkeletonComponent);
 
-function RlsImage({ src, rlsTheme }) {
+function RlsImageComponent({ src, rlsTheme }) {
     const [srcIsComplet, setSrcIsComplet] = useState(false);
     const refImage = useRef(null);
     const className = useMemo(() => {
@@ -669,8 +684,9 @@ function RlsImage({ src, rlsTheme }) {
     }, []);
     return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [!srcIsComplet && jsxRuntimeExports.jsx(RlsSkeleton, { rlsTheme: rlsTheme }), jsxRuntimeExports.jsx("img", { ref: refImage, src: src, onLoad: onLoad })] }));
 }
+const RlsImage = memo(RlsImageComponent);
 
-function RlsInput({ children, decimals, disabled, formControl, identifier, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, type, value }) {
+function RlsInputComponent({ children, decimals, disabled, formControl, identifier, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, type, value }) {
     const valueInitial = (formControl?.value ?? value) ? String(value) : '';
     const [valueInput, setValueInput] = useState(valueInitial);
     const [focused, setFocused] = useState(false);
@@ -721,8 +737,9 @@ function RlsInput({ children, decimals, disabled, formControl, identifier, onBlu
     }, [formControl?.focused, formControl?.disabled, focused, disabled]);
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, children: [jsxRuntimeExports.jsx("input", { ref: formControl?.elementRef, className: "rls-input__component", autoComplete: "off", type: type ?? 'text', placeholder: placeholder, disabled: formControl?.disabled || disabled, readOnly: readOnly, onFocus: onFocusInput, onBlur: onBlurInput, onChange: onChangeInput, onKeyDown: onKeyDownInput, onKeyUp: onKeyUpInput, value: valueInput }), jsxRuntimeExports.jsx("span", { className: "rls-input__value", children: children })] }));
 }
+const RlsInput = memo(RlsInputComponent);
 
-function RlsInputCounter({ className, disabled, formControl, identifier, max, min, onBlur, onFocus, onValue, readOnly, rlsTheme, step = 1, value: valueProp }) {
+function RlsInputCounterComponent({ className, disabled, formControl, identifier, max, min, onBlur, onFocus, onValue, readOnly, rlsTheme, step = 1, value: valueProp }) {
     const changeIsInternal = useRef(false);
     const [value, setValue] = useState(formControl?.value ?? valueProp ?? 0);
     const [focused, setFocused] = useState(false);
@@ -776,8 +793,9 @@ function RlsInputCounter({ className, disabled, formControl, identifier, max, mi
     }, [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 })] }));
 }
+const RlsInputCounter = memo(RlsInputCounterComponent);
 
-function RlsInputDecimal(props) {
+function RlsInputDecimalComponent(props) {
     const { decimals, formControl, identifier, onValue, symbol, value } = props;
     const [valueInput, setValueInput] = useState((formControl?.value ?? value ?? BigDecimal.zero()).rounded);
     const amount = useMemo(() => {
@@ -796,8 +814,9 @@ function RlsInputDecimal(props) {
     const decimalProps = { ...props, formControl: undefined };
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-decimal", children: jsxRuntimeExports.jsx(RlsInput, { ...decimalProps, type: "number", value: valueInput, onValue: onValueInput, children: jsxRuntimeExports.jsx(RlsAmount, { value: amount, symbol: symbol, decimals: decimals }) }) }));
 }
+const RlsInputDecimal = memo(RlsInputDecimalComponent);
 
-function RlsInputMoney(props) {
+function RlsInputMoneyComponent(props) {
     const { decimals, formControl, identifier, onValue, symbol, value } = props;
     const [valueInput, setValueInput] = useState(formControl?.value ?? value ?? 0);
     const onValueInput = useCallback((value) => {
@@ -808,8 +827,9 @@ function RlsInputMoney(props) {
     }, [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 }) }) }));
 }
+const RlsInputMoney = memo(RlsInputMoneyComponent);
 
-function RlsInputNumber(props) {
+function RlsInputNumberComponent(props) {
     const { formControl, identifier, onValue, value } = props;
     const [valueInput, setValueInput] = useState(formControl?.value ?? value ?? 0);
     const onValueInput = useCallback((value) => {
@@ -820,8 +840,9 @@ function RlsInputNumber(props) {
     }, [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 }) }));
 }
+const RlsInputNumber = memo(RlsInputNumberComponent);
 
-function RlsInputPassword({ disabled, formControl, identifier, onEnter, onKeyDown, onKeyUp, onValue, placeholder, readOnly, type }) {
+function RlsInputPasswordComponent({ disabled, formControl, identifier, onEnter, onKeyDown, onKeyUp, onValue, placeholder, readOnly, type }) {
     const [focused, setFocused] = useState(false);
     const _onChange = useCallback((event) => {
         formControl?.setValue(event.target.value);
@@ -852,8 +873,9 @@ function RlsInputPassword({ disabled, formControl, identifier, onEnter, onKeyDow
     }, [formControl?.focused, formControl?.disabled, focused, disabled]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: className, children: jsxRuntimeExports.jsx("input", { className: "rls-input-password__component", autoComplete: "off", type: type ?? 'password', placeholder: placeholder, disabled: disabled, readOnly: readOnly, onFocus: _onFocus, onBlur: _onBlur, onChange: _onChange, onKeyDown: _onKeyDown, onKeyUp: _onKeyUp }) }));
 }
+const RlsInputPassword = memo(RlsInputPasswordComponent);
 
-function RlsInputPercentage(props) {
+function RlsInputPercentageComponent(props) {
     const { formControl, identifier, onValue, value } = props;
     const [valueInput, setValueInput] = useState(formControl?.value ?? value ?? 0);
     const onValueInput = useCallback((value) => {
@@ -864,8 +886,9 @@ function RlsInputPercentage(props) {
     }, [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, "%"] }) }));
 }
+const RlsInputPercentage = memo(RlsInputPercentageComponent);
 
-function RlsInputSearch({ formControl, disabled, identifier, onEnter, onSearch, placeholder }) {
+function RlsInputSearchComponent({ formControl, disabled, identifier, onEnter, onSearch, placeholder }) {
     const [value, setValue] = useState('');
     const className = useMemo(() => {
         return renderClassStatus('rls-input-search', { disabled });
@@ -877,8 +900,9 @@ function RlsInputSearch({ formControl, disabled, identifier, onEnter, onSearch,
     }, [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 }))] }));
 }
+const RlsInputSearch = memo(RlsInputSearchComponent);
 
-function RlsInputText(props) {
+function RlsInputTextComponent(props) {
     const { formControl, identifier, onValue, value } = props;
     const [valueInput, setValueInput] = useState(formControl?.value ?? value ?? '');
     const onValueInput = useCallback((value) => {
@@ -889,10 +913,12 @@ function RlsInputText(props) {
     }, [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 }) }));
 }
+const RlsInputText = memo(RlsInputTextComponent);
 
-function RlsLabel({ children, rlsTheme }) {
+function RlsLabelComponent({ children, rlsTheme }) {
     return (jsxRuntimeExports.jsx("span", { className: "rls-label", "rls-theme": rlsTheme, children: children }));
 }
+const RlsLabel = memo(RlsLabelComponent);
 
 function msgInvalidColor(color) {
     return `Invalid color: "${color}". Use format "#FF6600".`;
@@ -1139,69 +1165,12 @@ function generateThemeCSS(colors, theme) {
         ...shadowProps
     ];
 }
-const srgbToLinear = (channel) => {
-    const x = channel / 255;
-    return x <= 0.04045 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4;
-};
-const linearToSrgb = (channel) => {
-    const v = channel <= 0.0031308
-        ? 12.92 * channel
-        : 1.055 * channel ** (1 / 2.4) - 0.055;
-    return clamp(Math.round(v * 255), 0, 255);
-};
-function rgbToOklch({ r, g, b }) {
-    const lr = srgbToLinear(r);
-    const lg = srgbToLinear(g);
-    const lb = srgbToLinear(b);
-    const l = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
-    const m = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
-    const s = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);
-    const okL = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
-    const okA = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
-    const okB = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
-    return { l: okL, c: Math.hypot(okA, okB), h: Math.atan2(okB, okA) };
-}
-function oklabToLinearRgb(l, a, b) {
-    const l_ = (l + 0.3963377774 * a + 0.2158037573 * b) ** 3;
-    const m_ = (l - 0.1055613458 * a - 0.0638541728 * b) ** 3;
-    const s_ = (l - 0.0894841775 * a - 1.291485548 * b) ** 3;
-    return [
-        4.0767416621 * l_ - 3.3077115913 * m_ + 0.2309699292 * s_,
-        -1.2684380046 * l_ + 2.6097574011 * m_ - 0.3413193965 * s_,
-        -0.0041960863 * l_ - 0.7034186147 * m_ + 1.707614701 * s_
-    ];
-}
-const inGamut = ([r, g, b]) => {
-    const e = 1e-4;
-    return (r >= -e && r <= 1 + e && g >= -e && g <= 1 + e && b >= -e && b <= 1 + e);
-};
-function oklchToRgb({ l, c, h }) {
-    const a = Math.cos(h);
-    const b = Math.sin(h);
-    const linearAt = (chroma) => oklabToLinearRgb(l, a * chroma, b * chroma);
-    if (!inGamut(linearAt(c))) {
-        let lo = 0;
-        let hi = c;
-        for (let i = 0; i < 20; i++) {
-            const mid = (lo + hi) / 2;
-            if (inGamut(linearAt(mid))) {
-                lo = mid;
-            }
-            else {
-                hi = mid;
-            }
-        }
-        c = lo;
-    }
-    const [lr, lg, lb] = linearAt(c);
-    return { r: linearToSrgb(lr), g: linearToSrgb(lg), b: linearToSrgb(lb) };
-}
-const chromaFactor = (lightness) => 0.4 + 0.6 * (1 - Math.abs(lightness - 0.5) * 2);
-function detectShadeLevel(lightness) {
+function detectShadeLevel(hsl) {
     let bestLevel = '500';
     let minDiff = Infinity;
-    SHADE_LABELS.forEach((level) => {
-        const diff = Math.abs(lightness - STANDARD_LUMINANCE[level]);
+    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;
@@ -1210,29 +1179,50 @@ function detectShadeLevel(lightness) {
     return bestLevel;
 }
 function generateThemePalette(baseColor, theme = 'primary') {
-    const rgb = hexToRgb(baseColor);
-    if (!rgb) {
+    const hsl = hexToHsl(baseColor);
+    if (!hsl) {
         throw new Error(msgInvalidColor(baseColor));
     }
-    const base = rgbToOklch(rgb);
-    const matchedLevel = detectShadeLevel(base.l * 100);
+    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] = rgbToHex(rgb); // preserve the base color exactly
+            colors[label] = baseColor.toUpperCase();
             return;
         }
-        const lightness = STANDARD_LUMINANCE[label] / 100;
-        colors[label] = rgbToHex(oklchToRgb({
-            l: lightness,
-            c: base.c * chromaFactor(lightness),
-            h: base.h
-        }));
+        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 properties = generateThemeCSS(colors, theme);
+    const shades = colors;
+    const properties = generateThemeCSS(shades, theme);
     return {
         theme,
-        colors,
+        colors: shades,
         css: properties.map((p) => `${p.name}: ${p.value};`).join('\n'),
         properties
     };
@@ -1250,7 +1240,7 @@ function setThemeColor(baseColor, theme = 'primary') {
 const DEFAULT_COLOR = '#1780e0';
 
 const CONTENT_BACKGROUND = '--pvt-content-background';
-function RlsLed({ color, rlsTheme }) {
+function RlsLedComponent({ color, rlsTheme }) {
     const refLed = useRef(null);
     const refColor = useRef(undefined);
     useEffect(() => {
@@ -1265,54 +1255,63 @@ function RlsLed({ color, rlsTheme }) {
     }, [color]);
     return jsxRuntimeExports.jsx("div", { ref: refLed, className: "rls-led", "rls-theme": rlsTheme });
 }
+const RlsLed = memo(RlsLedComponent);
 
-function RlsMessageIcon({ icon, children, rlsTheme }) {
+function RlsMessageIconComponent({ icon, children, rlsTheme }) {
     return (jsxRuntimeExports.jsxs("div", { className: "rls-message-icon", "rls-theme": rlsTheme, children: [icon && jsxRuntimeExports.jsx(RlsIcon, { value: icon }), jsxRuntimeExports.jsx("span", { className: "truncate", children: children })] }));
 }
+const RlsMessageIcon = memo(RlsMessageIconComponent);
 
-function RlsPoster({ children, contrasted, rlsTheme }) {
+function RlsPosterComponent({ children, contrasted, rlsTheme }) {
     const className = useMemo(() => {
         return renderClassStatus('rls-poster', { contrasted });
     }, [contrasted]);
     return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: children }));
 }
+const RlsPoster = memo(RlsPosterComponent);
 
-function RlsProgressBar({ indeterminate, percentage, rlsTheme }) {
+function RlsProgressBarComponent({ indeterminate, percentage, rlsTheme }) {
     const className = useMemo(() => {
         return renderClassStatus('rls-progress-bar', { indeterminate });
     }, [indeterminate]);
     return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-progress-bar__component", style: { width: `${percentage ?? 0}%` } }) }));
 }
+const RlsProgressBar = memo(RlsProgressBarComponent);
 
-function RlsProgressCircular({ rlsTheme }) {
+function RlsProgressCircularComponent({ rlsTheme }) {
     return (jsxRuntimeExports.jsx("div", { className: "rls-progress-circular", "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("svg", { className: "rls-progress-circular__svg", viewBox: "0 0 36 36", children: jsxRuntimeExports.jsx("circle", { className: "rls-progress-circular__circle", cx: "18", cy: "18", r: "12" }) }) }));
 }
+const RlsProgressCircular = memo(RlsProgressCircularComponent);
 
-function RlsRadioButton({ checked, disabled, identifier, rlsTheme, onClick }) {
+function RlsRadioButtonComponent({ checked, disabled, identifier, rlsTheme, onClick }) {
     const className = useMemo(() => {
         return renderClassStatus('rls-radiobutton', { checked, disabled });
     }, [checked, disabled]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: className, onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-radiobutton__component" }) }));
 }
+const RlsRadioButton = memo(RlsRadioButtonComponent);
 
-function RlsSkeletonText({ active, children, rlsTheme }) {
+function RlsSkeletonTextComponent({ active, children, rlsTheme }) {
     return (jsxRuntimeExports.jsx("div", { className: "rls-skeleton-text", "rls-theme": rlsTheme, children: active ? (jsxRuntimeExports.jsx(RlsSkeleton, {})) : (jsxRuntimeExports.jsx("div", { className: "rls-skeleton-text__value", children: children })) }));
 }
+const RlsSkeletonText = memo(RlsSkeletonTextComponent);
 
-function RlsSwitch({ checked, capsule, disabled, identifier, onClick, rlsTheme }) {
+function RlsSwitchComponent({ checked, capsule, disabled, identifier, onClick, rlsTheme }) {
     const className = useMemo(() => {
         return renderClassStatus('rls-switch', { checked, capsule, disabled });
     }, [checked, capsule, disabled]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: className, onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-switch__component", children: jsxRuntimeExports.jsx("div", { className: "rls-switch__component__element" }) }) }));
 }
-function RlsSwitchControl({ formControl, disabled, identifier, rlsTheme }) {
+const RlsSwitch = memo(RlsSwitchComponent);
+function RlsSwitchControlComponent({ formControl, disabled, identifier, rlsTheme }) {
     const onClick = useCallback(() => {
         formControl.setValue(!formControl.value);
     }, [formControl.value]);
     return (jsxRuntimeExports.jsx(RlsSwitch, { identifier: identifier, checked: formControl.value, disabled: disabled, onClick: onClick, rlsTheme: rlsTheme }));
 }
+const RlsSwitchControl = memo(RlsSwitchControlComponent);
 
-function RlsAccordion({ bordered, children, className, disabled, identifier, onToggle, opened, rlsTheme, title }) {
+function RlsAccordionComponent({ bordered, children, className, disabled, identifier, onToggle, opened, rlsTheme, title }) {
     const [open, setOpen] = useState(opened);
     const [animating, setAnimating] = useState(false);
     const contentRef = useRef(null);
@@ -1365,33 +1364,38 @@ function RlsAccordion({ bordered, children, className, disabled, identifier, onT
     }, [open]);
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: classNameAccordion, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("button", { type: "button", className: "rls-accordion__header", "aria-expanded": open, disabled: disabled, onClick: onClickHeader, children: [jsxRuntimeExports.jsx("span", { className: "rls-accordion__title", children: title }), jsxRuntimeExports.jsx("span", { className: "rls-accordion__indicator", children: jsxRuntimeExports.jsx(RlsIcon, { value: "chevron-down" }) })] }), jsxRuntimeExports.jsx("div", { ref: contentRef, className: "rls-accordion__body", "aria-hidden": !open, onTransitionEnd: onTransitionEnd, children: jsxRuntimeExports.jsx("div", { className: "rls-accordion__content", children: children }) })] }));
 }
+const RlsAccordion = memo(RlsAccordionComponent);
 
-function RlsAlert({ bordered, children, icon, identifier, rlsTheme }) {
+function RlsAlertComponent({ bordered, children, icon, identifier, rlsTheme }) {
     const className = useMemo(() => {
         return renderClassStatus('rls-alert', { bordered });
     }, [bordered]);
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [icon && (jsxRuntimeExports.jsx("div", { className: "rls-alert__icon", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })), jsxRuntimeExports.jsx("div", { className: "rls-alert__content", children: children })] }));
 }
+const RlsAlert = memo(RlsAlertComponent);
 
-function RlsBallot({ bordered, className, children, img, initials, skeleton, subtitle, rlsTheme }) {
+function RlsBallotComponent({ bordered, className, children, img, initials, skeleton, subtitle, rlsTheme }) {
     const classNameBallot = useMemo(() => {
         return renderClassStatus('rls-ballot', { bordered, skeleton }, className);
     }, [bordered, skeleton, className]);
     return (jsxRuntimeExports.jsxs("div", { className: classNameBallot, "rls-theme": rlsTheme, children: [(img || initials) && (jsxRuntimeExports.jsxs(RlsAvatar, { skeleton: skeleton, children: [img && jsxRuntimeExports.jsx("img", { src: img }), initials && jsxRuntimeExports.jsx("span", { children: initials })] })), jsxRuntimeExports.jsxs("div", { className: "rls-ballot__component", children: [jsxRuntimeExports.jsx("div", { className: "rls-ballot__title", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: children }) }), subtitle && (jsxRuntimeExports.jsx("div", { className: "rls-ballot__subtitle", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: subtitle }) }))] })] }));
 }
+const RlsBallot = memo(RlsBallotComponent);
 
-function RlsBody({ children, identifier, rlsTheme }) {
+function RlsBodyComponent({ children, identifier, rlsTheme }) {
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-app__page__body", "rls-theme": rlsTheme, children: children }));
 }
+const RlsBody = memo(RlsBodyComponent);
 
-function RlsButtonProgress({ icon, disabled, onClick, progressing, rlsTheme }) {
+function RlsButtonProgressComponent({ icon, disabled, onClick, progressing, rlsTheme }) {
     const className = useMemo(() => {
         return renderClassStatus('rls-button-progress', { progressing });
     }, [progressing]);
     return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [!progressing && (jsxRuntimeExports.jsx(RlsButtonAction, { icon: icon, onClick: onClick, disabled: disabled })), progressing && jsxRuntimeExports.jsx(RlsProgressCircular, {})] }));
 }
+const RlsButtonProgress = memo(RlsButtonProgressComponent);
 
-function RlsButtonStepper({ disabled, onAction, rlsTheme }) {
+function RlsButtonStepperComponent({ disabled, onAction, rlsTheme }) {
     const onDown = useCallback(() => {
         onAction?.('down');
     }, [onAction]);
@@ -1400,8 +1404,9 @@ function RlsButtonStepper({ disabled, onAction, rlsTheme }) {
     }, [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 })] }));
 }
+const RlsButtonStepper = memo(RlsButtonStepperComponent);
 
-function RlsButtonToggle({ onAction, options, type, automatic, disabled, rlsTheme }) {
+function RlsButtonToggleComponent({ onAction, options, type, automatic, disabled, rlsTheme }) {
     const componentRef = useRef(null);
     const [action, setAction] = useState(options[0]);
     const [visible, setVisible] = useState(false);
@@ -1446,10 +1451,12 @@ function RlsButtonToggle({ onAction, options, type, automatic, disabled, rlsThem
     }, [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))) }) })] }));
 }
+const RlsButtonToggle = memo(RlsButtonToggleComponent);
 
-function RlsContent({ children, identifier, rlsTheme }) {
+function RlsContentComponent({ children, identifier, rlsTheme }) {
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-app__page__content", "rls-theme": rlsTheme, children: children }));
 }
+const RlsContent = memo(RlsContentComponent);
 
 const errors = {
     es: {
@@ -1560,7 +1567,7 @@ function msgErrorsI18n(key, language, interpolators) {
     return _msgErrorsI18n(key, { language, interpolators });
 }
 
-function RlsMessageFormError({ className, formControl }) {
+function RlsMessageFormErrorComponent({ className, formControl }) {
     const [language, setLanguage] = useState('es');
     useEffect(() => {
         return i18nSubscribe((language) => {
@@ -1574,8 +1581,9 @@ function RlsMessageFormError({ className, formControl }) {
     }, [formControl?.error, language]);
     return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: formControl?.wrong && (jsxRuntimeExports.jsx("div", { className: className, children: jsxRuntimeExports.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: msgError }) })) }));
 }
+const RlsMessageFormError = memo(RlsMessageFormErrorComponent);
 
-function RlsFieldArea(props) {
+function RlsFieldAreaComponent(props) {
     const { children, formControl, identifier, rlsTheme } = props;
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
@@ -1590,8 +1598,9 @@ function RlsFieldArea(props) {
     }, [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 }))] }));
 }
+const RlsFieldArea = memo(RlsFieldAreaComponent);
 
-function RlsFieldDecimal(props) {
+function RlsFieldDecimalComponent(props) {
     const { children, formControl, identifier, rlsTheme } = props;
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
@@ -1606,8 +1615,9 @@ function RlsFieldDecimal(props) {
     }, [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 }))] }));
 }
+const RlsFieldDecimal = memo(RlsFieldDecimalComponent);
 
-function RlsFieldFile({ accept, children, disabled: _disabled, formControl, identifier, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value }) {
+function RlsFieldFileComponent({ accept, children, disabled: _disabled, formControl, identifier, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value }) {
     const inputRef = useRef(null);
     const disabled = useMemo(() => formControl?.disabled || _disabled, [formControl?.disabled, _disabled]);
     const className = useMemo(() => renderClassStatus('rls-field-box', {
@@ -1645,6 +1655,7 @@ function RlsFieldFile({ accept, children, disabled: _disabled, formControl, iden
     }, [readOnly, disabled]);
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", onClick: onClickControl, children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-input__component", readOnly: true, type: "text", value: displayValue, placeholder: placeholder }), jsxRuntimeExports.jsx("input", { ref: inputRef, className: "rls-field-file__input", type: "file", accept: accept, disabled: disabled || readOnly, onChange: onChangeInput }), jsxRuntimeExports.jsx(RlsButtonAction, { icon: currentFile ? 'close' : 'attach', disabled: disabled, onClick: onClickAction })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
+const RlsFieldFile = memo(RlsFieldFileComponent);
 
 const reactI18n = i18n({
     es: {
@@ -1682,7 +1693,7 @@ function RlsFieldListLi({ element, onClickElement, onKeydownElement, render }) {
     }, [element, onKeydownElement]);
     return (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: onClick, onKeyDown: onKeyDown, children: render(element) }));
 }
-function RlsFieldListSuggestions({ elements, action, disabled, higher, render, renderEmpty, searchControl, visible, onClickBackdrop, onClickElement, onKeydownElement, refList, rlsTheme }) {
+function RlsFieldListSuggestionsComponent({ elements, action, disabled, higher, render, renderEmpty, searchControl, visible, onClickBackdrop, onClickElement, onKeydownElement, refList, rlsTheme }) {
     const [labels, setLabels] = useState({
         listEmptyDescription: reactI18n('listEmptyDescription'),
         listEmptyTitle: reactI18n('listEmptyTitle')
@@ -1714,8 +1725,9 @@ function RlsFieldListSuggestions({ elements, action, disabled, higher, render, r
     const searching = searchControl?.searching ?? false;
     return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__suggestions__body", children: [jsxRuntimeExports.jsxs("ul", { ref: refList, className: "rls-field-list__ul", children: [searchControl && (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__ul__control", ref: searchControl.refInput, type: "text", placeholder: searchControl.placeholder, value: searchControl.pattern, onChange: onChangePattern, onFocus: searchControl.onFocus, onBlur: searchControl.onBlur, onKeyDown: searchControl.onKeyDown, disabled: disabled || searching }), searchControl.onSearch && (jsxRuntimeExports.jsx("button", { disabled: disabled || searching, onClick: searchControl.onSearch, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] })), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), elements.map((element, index) => (jsxRuntimeExports.jsx(RlsFieldListLi, { element: element, onClickElement: onClickElement, onKeydownElement: onKeydownElement, render: render }, index))), !elements.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: renderEmpty ? (renderEmpty()) : (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("span", { className: "rls-label-font-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-font-regular", children: labels.listEmptyDescription })] })) }))] }), action && (jsxRuntimeExports.jsx("div", { className: "rls-field-list__action", children: jsxRuntimeExports.jsxs("button", { type: "button", disabled: disabled || action.disabled, onClick: onClickAction, children: [action.icon && jsxRuntimeExports.jsx(RlsIcon, { value: action.icon }), jsxRuntimeExports.jsx("span", { className: "rls-field-list__action__description", children: action.description })] }) }))] }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: onClickBackdrop })] }));
 }
+const RlsFieldListSuggestions = memo(RlsFieldListSuggestionsComponent);
 
-function RlsFieldMoney(props) {
+function RlsFieldMoneyComponent(props) {
     const { action, children, formControl, identifier, rlsTheme } = props;
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
@@ -1730,8 +1742,9 @@ function RlsFieldMoney(props) {
     }, [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.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 }))] }));
 }
+const RlsFieldMoney = memo(RlsFieldMoneyComponent);
 
-function RlsFieldNumber(props) {
+function RlsFieldNumberComponent(props) {
     const { action, children, formControl, identifier, rlsTheme } = props;
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
@@ -1746,8 +1759,9 @@ function RlsFieldNumber(props) {
     }, [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.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 }))] }));
 }
+const RlsFieldNumber = memo(RlsFieldNumberComponent);
 
-function RlsFieldPassword(props) {
+function RlsFieldPasswordComponent(props) {
     const { children, formControl, identifier, rlsTheme } = props;
     const [passwordIsActive, setPasswordIsActive] = useState(true);
     const disabled = useMemo(() => {
@@ -1766,8 +1780,9 @@ function RlsFieldPassword(props) {
     }, []);
     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(RlsInputPassword, { ...props, type: passwordIsActive ? 'password' : 'text' }), jsxRuntimeExports.jsx(RlsButtonAction, { icon: passwordIsActive ? 'eye' : 'eye-off', onClick: onTogglePassword })] }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
+const RlsFieldPassword = memo(RlsFieldPasswordComponent);
 
-function RlsFieldPercentage(props) {
+function RlsFieldPercentageComponent(props) {
     const { action, children, formControl, identifier, rlsTheme } = props;
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
@@ -1782,12 +1797,14 @@ function RlsFieldPercentage(props) {
     }, [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.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 }))] }));
 }
+const RlsFieldPercentage = memo(RlsFieldPercentageComponent);
 
-function RlsFieldReadonly({ children, identifier, rlsTheme, value }) {
+function RlsFieldReadonlyComponent({ children, identifier, rlsTheme, value }) {
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-readonly rls-field-box", "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("input", { className: "rls-input__component", autoComplete: "off", type: 'text', readOnly: true, value: value }) }) })] }));
 }
+const RlsFieldReadonly = memo(RlsFieldReadonlyComponent);
 
-function RlsFieldText(props) {
+function RlsFieldTextComponent(props) {
     const { action, children, formControl, identifier, rlsTheme } = props;
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
@@ -1802,6 +1819,7 @@ function RlsFieldText(props) {
     }, [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.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 }))] }));
 }
+const RlsFieldText = memo(RlsFieldTextComponent);
 
 function useFormToggleController({ disabled, formControl }) {
     const [checked, setChecked] = useState(!!formControl?.value);
@@ -1823,7 +1841,7 @@ function useFormToggleController({ disabled, formControl }) {
     return { checked, onToggle };
 }
 
-function RlsLabelCheckBox({ children, disabled, extended, identifier, formControl, reverse, rlsTheme }) {
+function RlsLabelCheckBoxComponent({ children, disabled, extended, identifier, formControl, reverse, rlsTheme }) {
     const { checked, onToggle } = useFormToggleController({
         disabled,
         formControl
@@ -1837,8 +1855,9 @@ function RlsLabelCheckBox({ children, disabled, extended, identifier, formContro
     }, [disabled, extended, reverse]);
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-checkbox__component", onClick: onToggle, children: jsxRuntimeExports.jsx(RlsCheckBox, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("div", { className: "rls-label-checkbox__text", children: children })] }));
 }
+const RlsLabelCheckBox = memo(RlsLabelCheckBoxComponent);
 
-function RlsLabelRadioButton({ children, disabled, extended, identifier, formControl, onValue, reverse, rlsTheme, value }) {
+function RlsLabelRadioButtonComponent({ children, disabled, extended, identifier, formControl, onValue, reverse, rlsTheme, value }) {
     const { checked, onSelect } = useFormSingleSelectionController({
         disabled,
         formControl,
@@ -1854,8 +1873,9 @@ function RlsLabelRadioButton({ children, disabled, extended, identifier, formCon
     }, [disabled, extended, reverse]);
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-radiobutton__component", onClick: onSelect, children: jsxRuntimeExports.jsx(RlsRadioButton, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("div", { className: "rls-label-radiobutton__text", children: children })] }));
 }
+const RlsLabelRadioButton = memo(RlsLabelRadioButtonComponent);
 
-function RlsLabelSwitch({ capsule, children, disabled, extended, identifier, formControl, reverse, rlsTheme }) {
+function RlsLabelSwitchComponent({ capsule, children, disabled, extended, identifier, formControl, reverse, rlsTheme }) {
     const { checked, onToggle } = useFormToggleController({
         disabled,
         formControl
@@ -1869,8 +1889,9 @@ function RlsLabelSwitch({ capsule, children, disabled, extended, identifier, for
     }, [disabled, extended, reverse]);
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-switch__component", onClick: onToggle, children: jsxRuntimeExports.jsx(RlsSwitch, { checked: checked, capsule: capsule, disabled: disabled }) }), jsxRuntimeExports.jsx("div", { className: "rls-label-switch__text", children: children })] }));
 }
+const RlsLabelSwitch = memo(RlsLabelSwitchComponent);
 
-function RlsMessageEmpty({ children, className, emoji, icon, identifier, image, rlsTheme, title }) {
+function RlsMessageEmptyComponent({ children, className, emoji, icon, identifier, image, rlsTheme, title }) {
     const classNameMessageEmpty = useMemo(() => {
         return renderClassStatus('rls-message-empty', {}, className);
     }, [className]);
@@ -1888,10 +1909,12 @@ function RlsMessageEmpty({ children, className, emoji, icon, identifier, image,
     }, [icon, emoji, image]);
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: classNameMessageEmpty, "rls-theme": rlsTheme, children: [logo, jsxRuntimeExports.jsxs("div", { className: "rls-message-empty__body", children: [title && jsxRuntimeExports.jsx("div", { className: "rls-message-empty__title", children: title }), children && (jsxRuntimeExports.jsx("div", { className: "rls-message-empty__content", children: children }))] })] }));
 }
+const RlsMessageEmpty = memo(RlsMessageEmptyComponent);
 
-function RlsNavbar({ children, identifier, rlsTheme }) {
+function RlsNavbarComponent({ children, identifier, rlsTheme }) {
     return (jsxRuntimeExports.jsxs("nav", { id: identifier, className: "rls-app__page__nav", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-app__page__nav__content", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-app__page__nav__backdrop" })] }));
 }
+const RlsNavbar = memo(RlsNavbarComponent);
 
 function RlsNavbarMenuOption({ option, onOption }) {
     const onClick = useCallback(() => {
@@ -1899,9 +1922,10 @@ function RlsNavbarMenuOption({ option, onOption }) {
     }, [onOption]);
     return (jsxRuntimeExports.jsxs("li", { className: "rls-app__page__nav__option", onClick: onClick, children: [jsxRuntimeExports.jsx(RlsIcon, { value: option.icon }), jsxRuntimeExports.jsx("span", { className: "rls-label-font", children: option.label })] }));
 }
-function RlsNavbarMenu({ options, onOption }) {
+function RlsNavbarMenuComponent({ options, onOption }) {
     return (jsxRuntimeExports.jsx("ul", { className: "rls-app__page__nav__menu", children: options.map((option) => (jsxRuntimeExports.jsx(RlsNavbarMenuOption, { option: option, onOption: onOption }, option.id))) }));
 }
+const RlsNavbarMenu = memo(RlsNavbarMenuComponent);
 
 function PageButton({ page, onSelect }) {
     const className = useMemo(() => renderClassStatus('rls-pagination__page', { active: page.active }), [page.active]);
@@ -1910,7 +1934,7 @@ function PageButton({ page, onSelect }) {
     }, [page, onSelect]);
     return (jsxRuntimeExports.jsx("button", { type: "button", className: className, onClick: onClick, children: page.label }));
 }
-function RlsPagination({ suggestions, count, filter, onPagination }) {
+function RlsPaginationComponent({ suggestions, count, filter, onPagination }) {
     const [template, setTemplate] = useState();
     const controller = useRef(undefined);
     const refreshTemplate = useCallback((template, suggestions) => {
@@ -1952,6 +1976,7 @@ function RlsPagination({ suggestions, count, filter, onPagination }) {
     }, [refreshPagination]);
     return (jsxRuntimeExports.jsxs("div", { className: "rls-pagination", children: [jsxRuntimeExports.jsxs("div", { className: "rls-pagination__actions", children: [jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goFirstPagination, disabled: template?.firstPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrowhead-left" }) }), jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goPreviousPagination, disabled: template?.firstPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-left" }) })] }), jsxRuntimeExports.jsxs("div", { className: "rls-pagination__body", children: [jsxRuntimeExports.jsx("div", { className: "rls-pagination__pages", children: template?.pages.map((page) => (jsxRuntimeExports.jsx(PageButton, { page: page, onSelect: goToPagination }, page.value))) }), jsxRuntimeExports.jsx("div", { className: "rls-pagination__description", children: template?.description }), jsxRuntimeExports.jsx("span", { className: "rls-pagination__count", children: suggestions.length })] }), jsxRuntimeExports.jsxs("div", { className: "rls-pagination__actions", children: [jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goNextPagination, disabled: template?.lastPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-right" }) }), jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goLastPagination, disabled: template?.lastPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrowhead-right" }) })] })] }));
 }
+const RlsPagination = memo(RlsPaginationComponent);
 
 function RlsPickerDayHeaders() {
     return (jsxRuntimeExports.jsx("div", { className: "rls-picker-day__header", children: DAY_LABELS().map((title, index) => (jsxRuntimeExports.jsx("span", { className: "rls-picker-day__label", children: title }, index))) }));
@@ -1973,7 +1998,7 @@ function RlsPickerDayElement({ day, onSelect, disabled }) {
     }, [day.value, day.disabled, disabled, onSelect]);
     return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-day__element__span", children: day.value || '??' }) }));
 }
-function RlsPickerDay({ date, disabled, formControl, maxDate, month, minDate, onValue, rlsTheme, year }) {
+function RlsPickerDayComponent({ date, disabled, formControl, maxDate, month, minDate, onValue, rlsTheme, year }) {
     const dateDay = useMemo(() => date ?? new Date(), [date]);
     const [weeks, setWeeks] = useState([]);
     const [value, setValue] = useState(formControl?.value ?? dateDay.getDate());
@@ -2026,6 +2051,7 @@ function RlsPickerDay({ date, disabled, formControl, maxDate, month, minDate, on
     }, [dateDay, formControl?.value, value, month, year, minDate, maxDate]);
     return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-day", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx(RlsPickerDayHeaders, {}), jsxRuntimeExports.jsx("div", { className: "rls-picker-day__component", children: weeks.map(({ days }, index) => (jsxRuntimeExports.jsx("div", { className: "rls-picker-day__week", children: days.map((day, index) => (jsxRuntimeExports.jsx(RlsPickerDayElement, { day: day, onSelect: onSelect, disabled: disabled }, index))) }, index))) })] }));
 }
+const RlsPickerDay = memo(RlsPickerDayComponent);
 
 function RlsPickerDayRangeHeaders() {
     return (jsxRuntimeExports.jsx("div", { className: "rls-picker-day__header", children: DAY_LABELS().map((title, index) => (jsxRuntimeExports.jsx("span", { className: "rls-picker-day__label", children: title }, index))) }));
@@ -2047,7 +2073,7 @@ function RlsPickerDayRangeElement({ day, onSelect, disabled }) {
     }, [day.value, day.disabled, disabled, onSelect]);
     return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-day-range__element__span", children: day.value || '??' }) }));
 }
-function RlsPickerDayRange({ date, disabled, formControl, maxDate, minDate, rlsTheme }) {
+function RlsPickerDayRangeComponent({ date, disabled, formControl, maxDate, minDate, rlsTheme }) {
     const rangeDay = useMemo(() => {
         return formControl?.value ?? DateRange.now();
     }, [formControl?.value]);
@@ -2083,6 +2109,7 @@ function RlsPickerDayRange({ date, disabled, formControl, maxDate, minDate, rlsT
     }, [dateDayRange, range, minDate, maxDate]);
     return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-day-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx(RlsPickerDayRangeHeaders, {}), jsxRuntimeExports.jsx("div", { className: "rls-picker-day-range__component", children: weeks.map(({ days }, index) => (jsxRuntimeExports.jsx("div", { className: "rls-picker-day-range__week", children: days.map((day, index) => (jsxRuntimeExports.jsx(RlsPickerDayRangeElement, { day: day, onSelect: onSelect, disabled: disabled }, index))) }, index))) })] }));
 }
+const RlsPickerDayRange = memo(RlsPickerDayRangeComponent);
 
 function RlsPickerMonthElement({ month, onSelect, disabled }) {
     const [label, setLabel] = useState(MONTH_NAMES(month.value));
@@ -2105,7 +2132,7 @@ function RlsPickerMonthElement({ month, onSelect, disabled }) {
     }, [month.value, month.disabled, disabled, onSelect]);
     return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-month__span", children: label }) }));
 }
-function RlsPickerMonth({ date, disabled, formControl, maxDate, minDate, onValue, rlsTheme, year }) {
+function RlsPickerMonthComponent({ date, disabled, formControl, maxDate, minDate, onValue, rlsTheme, year }) {
     const dateMonth = useMemo(() => date ?? new Date(), [date]);
     const [months, setMonths] = useState([]);
     const [value, setValue] = useState(formControl?.value ?? dateMonth.getMonth());
@@ -2154,8 +2181,9 @@ function RlsPickerMonth({ date, disabled, formControl, maxDate, minDate, onValue
     }, [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))) }));
 }
+const RlsPickerMonth = memo(RlsPickerMonthComponent);
 
-function RlsPickerSelectorTitle({ monthControl, type, yearControl, date, disabled, maxDate, minDate, onClick }) {
+function RlsPickerSelectorTitleComponent({ monthControl, type, yearControl, date, disabled, maxDate, minDate, onClick }) {
     const { limitNext, limitPrevious } = useMemo(() => {
         return monthLimitTemplate({
             date,
@@ -2231,6 +2259,7 @@ function RlsPickerSelectorTitle({ monthControl, type, yearControl, date, disable
     }, [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 })] }));
 }
+const RlsPickerSelectorTitle = memo(RlsPickerSelectorTitleComponent);
 
 function RlsPickerYearElement({ onSelect, year, disabled }) {
     const className = useMemo(() => {
@@ -2247,7 +2276,7 @@ function RlsPickerYearElement({ onSelect, year, disabled }) {
     }, [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 || '????' }) }));
 }
-function RlsPickerYear({ date, disabled, formControl, maxDate, minDate, onValue, rlsTheme }) {
+function RlsPickerYearComponent({ date, disabled, formControl, maxDate, minDate, onValue, rlsTheme }) {
     const dateYear = useMemo(() => date ?? new Date(), [date]);
     const [year, setYear] = useState(formControl?.value ?? dateYear.getFullYear());
     const createPickerOptions = useCallback(() => {
@@ -2292,6 +2321,7 @@ function RlsPickerYear({ date, disabled, formControl, maxDate, minDate, onValue,
     }, []);
     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))) })] }));
 }
+const RlsPickerYear = memo(RlsPickerYearComponent);
 
 function calculateInitialValue(value, minValue, maxValue) {
     return minValue > value ? minValue : maxValue < value ? maxValue : value;
@@ -2301,7 +2331,7 @@ function calculateInitialRate(value, minValue, maxValue) {
     const rateValue = value - minValue;
     return Math.ceil((rateValue / rateMax) * 100);
 }
-function RlsSlider({ children, className, disabled, formControl, identifier, maxValue, minValue, onValue, prefixIcon, rlsTheme, value }) {
+function RlsSliderComponent({ children, className, disabled, formControl, identifier, maxValue, minValue, onValue, prefixIcon, rlsTheme, value }) {
     const minValueSlider = useMemo(() => {
         return minValue ?? 0;
     }, [minValue]);
@@ -2347,6 +2377,7 @@ function RlsSlider({ children, className, disabled, formControl, identifier, max
     }, [minValueSlider, maxValueSlider]);
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: classNameSlider, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-slider__label", children: children }), jsxRuntimeExports.jsxs("div", { className: "rls-slider__body", children: [prefixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: prefixIcon }), jsxRuntimeExports.jsxs("div", { ref: refComponent, className: "rls-slider__component", children: [jsxRuntimeExports.jsx("div", { ref: refTrack, className: "rls-slider__track", onClick: onClickTrack, children: jsxRuntimeExports.jsx("div", { ref: refTrackOn, className: "rls-slider__track__on" }) }), jsxRuntimeExports.jsxs("div", { ref: refThumb, className: "rls-slider__thumb", children: [rate, "%"] })] })] })] }));
 }
+const RlsSlider = memo(RlsSliderComponent);
 
 function RlsTab({ onSelect, tab, value }) {
     const className = useMemo(() => {
@@ -2362,7 +2393,7 @@ function RlsTab({ onSelect, tab, value }) {
     }, [tab.disabled]);
     return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { children: tab.label }) }));
 }
-function RlsTabs({ tabs, onValue, rlsTheme }) {
+function RlsTabsComponent({ tabs, onValue, rlsTheme }) {
     const [value, setValue] = useState();
     const onSelect = useCallback((value) => {
         setValue(value);
@@ -2378,12 +2409,14 @@ function RlsTabs({ tabs, onValue, rlsTheme }) {
             return (jsxRuntimeExports.jsx(RlsTab, { tab: tab, value: value, onSelect: onSelect }, index));
         }) }));
 }
+const RlsTabs = memo(RlsTabsComponent);
 
-function RlsToolbar({ actions, children, subtitle }) {
+function RlsToolbarComponent({ actions, children, subtitle }) {
     return (jsxRuntimeExports.jsxs("div", { className: "rls-toolbar", children: [jsxRuntimeExports.jsxs("div", { className: "rls-toolbar__description", children: [children && jsxRuntimeExports.jsx("label", { className: "rls-toolbar__title", children: children }), subtitle && (jsxRuntimeExports.jsx("label", { className: "rls-toolbar__subtitle smalltext-semibold", children: subtitle }))] }), actions && (jsxRuntimeExports.jsx("div", { className: "rls-toolbar__actions", children: actions.map((action, index) => (jsxRuntimeExports.jsx("div", { children: action }, index))) }))] }));
 }
+const RlsToolbar = memo(RlsToolbarComponent);
 
-function RlsBottomSheet({ autoclose, children, className, controller, onBackdrop, visible, rlsTheme }) {
+function RlsBottomSheetComponent({ autoclose, children, className, controller, onBackdrop, visible, rlsTheme }) {
     const classNameSheet = useMemo(() => {
         return renderClassStatus('rls-bottom-sheet', { visible: controller?.visible ?? visible }, className);
     }, [className, visible, controller?.visible]);
@@ -2395,13 +2428,15 @@ function RlsBottomSheet({ autoclose, children, className, controller, 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);
 }
+const RlsBottomSheet = memo(RlsBottomSheetComponent);
 
-function RlsCard({ children, className, outline, rlsTheme }) {
+function RlsCardComponent({ children, className, outline, rlsTheme }) {
     const classNameCard = useMemo(() => {
         return renderClassStatus('rls-card', { outline }, className);
     }, [outline, className]);
     return (jsxRuntimeExports.jsx("div", { className: classNameCard, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-card__content", children: children }) }));
 }
+const RlsCard = memo(RlsCardComponent);
 
 class ConfirmationResult extends SealedPartial {
     static approved() {
@@ -2411,12 +2446,13 @@ class ConfirmationResult extends SealedPartial {
         return new ConfirmationResult('reject');
     }
 }
-function RlsConfirmation({ approved, className, content, reject, rlsTheme, subtitle, title, visible }) {
+function RlsConfirmationComponent({ approved, className, content, reject, rlsTheme, subtitle, title, visible }) {
     const classConfirmation = useMemo(() => {
         return renderClassStatus('rls-confirmation', { visible }, className);
     }, [visible, className]);
     return (jsxRuntimeExports.jsxs("div", { className: classConfirmation, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__component", children: [jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__header", children: [title && jsxRuntimeExports.jsx("div", { className: "rls-confirmation__title", children: title }), subtitle && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__subtitle", children: subtitle }))] }), jsxRuntimeExports.jsx("div", { className: "rls-confirmation__body", children: content && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__content", children: content })) }), (approved || reject) && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__footer", children: jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__actions", children: [approved && (jsxRuntimeExports.jsx(RlsButton, { identifier: approved.identifier, type: approved.type, onClick: approved.onClick, disabled: approved.disabled, rlsTheme: approved.rlsTheme, children: approved.label })), reject && (jsxRuntimeExports.jsx(RlsButton, { identifier: reject.identifier, type: reject.type, onClick: reject.onClick, disabled: reject.disabled, rlsTheme: reject.rlsTheme, children: reject.label }))] }) }))] }), jsxRuntimeExports.jsx("div", { className: "rls-confirmation__backdrop" })] }));
 }
+const RlsConfirmation = memo(RlsConfirmationComponent);
 function useConfirmation() {
     const [config, setConfig] = useState({});
     const [visible, setVisible] = useState(false);
@@ -2482,7 +2518,7 @@ function useDatatable(table) {
     return { refTable, scrolleable };
 }
 
-function RlsDatatable({ children, footer, header, identifier, rlsTheme, resizable, summary, table, toolbar }) {
+function RlsDatatableComponent({ children, footer, header, identifier, rlsTheme, resizable, summary, table, toolbar }) {
     const datatable = useDatatable(table);
     const className = useMemo(() => {
         return renderClassStatus('rls-datatable', {
@@ -2492,53 +2528,62 @@ function RlsDatatable({ children, footer, header, identifier, rlsTheme, resizabl
     }, [resizable, datatable.scrolleable]);
     return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [toolbar && jsxRuntimeExports.jsx("div", { className: "rls-datatable__toolbar", children: toolbar }), jsxRuntimeExports.jsx("div", { className: "rls-datatable__table", children: jsxRuntimeExports.jsxs("table", { id: identifier, children: [header && jsxRuntimeExports.jsx("thead", { className: "rls-datatable__head", children: header }), jsxRuntimeExports.jsx("tbody", { ref: datatable?.refTable, className: "rls-datatable__body", children: children })] }) }), summary && jsxRuntimeExports.jsx("div", { className: "rls-datatable__summary", children: summary }), footer && jsxRuntimeExports.jsx("div", { className: "rls-datatable__footer", children: footer })] }));
 }
-function RlsDatatableHeader({ children, identifier, rlsTheme }) {
+const RlsDatatable = memo(RlsDatatableComponent);
+function RlsDatatableHeaderComponent({ children, identifier, rlsTheme }) {
     return (jsxRuntimeExports.jsx("tr", { id: identifier, className: "rls-datatable__header", "rls-theme": rlsTheme, children: children }));
 }
-function RlsDatatableTitle({ children, className, control, identifier, rlsTheme, truncated }) {
+const RlsDatatableHeader = memo(RlsDatatableHeaderComponent);
+function RlsDatatableTitleComponent({ actions, children, className, control, identifier, rlsTheme, truncated }) {
     const classNameTitle = useMemo(() => {
-        return renderClassStatus('rls-datatable__title', { truncated, control }, className);
-    }, [className, truncated, control]);
+        return renderClassStatus('rls-datatable__title', { actions, control, truncated }, className);
+    }, [className, truncated, control, actions]);
     return (jsxRuntimeExports.jsx("th", { id: identifier, className: classNameTitle, "rls-theme": rlsTheme, children: children }));
 }
-function RlsDatatableSubheader({ children, className, identifier, rlsTheme }) {
+const RlsDatatableTitle = memo(RlsDatatableTitleComponent);
+function RlsDatatableSubheaderComponent({ children, className, identifier, rlsTheme }) {
     const classNameSubheader = useMemo(() => {
         return renderClassStatus('rls-datatable__subheader', {}, className);
     }, [className]);
     return (jsxRuntimeExports.jsx("tr", { id: identifier, className: classNameSubheader, "rls-theme": rlsTheme, children: children }));
 }
-function RlsDatatableRecord({ children, className, error, identifier, info, rlsTheme, success, truncated, warning }) {
+const RlsDatatableSubheader = memo(RlsDatatableSubheaderComponent);
+function RlsDatatableRecordComponent({ children, className, error, identifier, info, rlsTheme, success, truncated, warning }) {
     const classNameRecord = useMemo(() => {
         return renderClassStatus('rls-datatable__record', { error, info, truncated, success, warning }, className);
     }, [className, truncated, error, info, success, warning]);
     return (jsxRuntimeExports.jsx("tr", { id: identifier, className: classNameRecord, "rls-theme": rlsTheme, children: children }));
 }
-function RlsDatatableTotals({ children, className, error, identifier, info, rlsTheme, success, truncated, warning }) {
+const RlsDatatableRecord = memo(RlsDatatableRecordComponent);
+function RlsDatatableTotalsComponent({ children, className, error, identifier, info, rlsTheme, success, truncated, warning }) {
     const classNameTotals = useMemo(() => {
         return renderClassStatus('rls-datatable__totals', { error, info, truncated, success, warning }, className);
     }, [className, truncated, error, info, success, warning]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: classNameTotals, "rls-theme": rlsTheme, children: children }));
 }
-function RlsDatatableCell({ children, className, control, identifier, rlsTheme, truncated }) {
+const RlsDatatableTotals = memo(RlsDatatableTotalsComponent);
+function RlsDatatableCellComponent({ actions, children, className, control, identifier, rlsTheme, truncated }) {
     const classNameCell = useMemo(() => {
-        return renderClassStatus('rls-datatable__cell', { control, truncated }, className);
-    }, [className, truncated, control]);
+        return renderClassStatus('rls-datatable__cell', { actions, control, truncated }, className);
+    }, [className, truncated, control, actions]);
     return (jsxRuntimeExports.jsx("td", { id: identifier, className: classNameCell, "rls-theme": rlsTheme, children: children }));
 }
-function RlsDatatableData({ children, className, control, identifier, truncated }) {
+const RlsDatatableCell = memo(RlsDatatableCellComponent);
+function RlsDatatableDataComponent({ actions, children, className, control, identifier, truncated }) {
     const classNameData = useMemo(() => {
-        return renderClassStatus('rls-datatable__data', { control, truncated }, className);
-    }, [className, truncated, control]);
+        return renderClassStatus('rls-datatable__data', { actions, control, truncated }, className);
+    }, [className, truncated, control, actions]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: classNameData, children: children }));
 }
-function RlsDatatableFloating({ children, className, identifier, invested, rlsTheme }) {
+const RlsDatatableData = memo(RlsDatatableDataComponent);
+function RlsDatatableFloatingComponent({ children, className, identifier, invested, rlsTheme }) {
     const classNameFloating = useMemo(() => {
         return renderClassStatus('rls-datatable__floating', { invested }, className);
     }, [className, invested]);
     return (jsxRuntimeExports.jsx("td", { id: identifier, className: classNameFloating, "rls-theme": rlsTheme, children: children }));
 }
+const RlsDatatableFloating = memo(RlsDatatableFloatingComponent);
 
-function RlsDropdown({ children, controller, rlsTheme }) {
+function RlsDropdownComponent({ children, controller, rlsTheme }) {
     const className = useMemo(() => {
         return renderClassStatus('rls-dropdown', {
             visible: controller.visible
@@ -2557,6 +2602,7 @@ 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 RlsDropdown = memo(RlsDropdownComponent);
 
 const MAX_LIST_HEIGHT_REM$1 = 90;
 const FALLBACK_REM_SIZE$1 = 16;
@@ -2567,6 +2613,17 @@ function getRemSize$1() {
     const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
     return fontSize > 0 ? fontSize : FALLBACK_REM_SIZE$1;
 }
+function suggestionsShallowEqual(a, b) {
+    return (a === b ||
+        (a.length === b.length && a.every((element, index) => element === b[index])));
+}
+function useStableSuggestions(suggestions) {
+    const suggestionsRef = useRef(suggestions);
+    if (!suggestionsShallowEqual(suggestionsRef.current, suggestions)) {
+        suggestionsRef.current = suggestions;
+    }
+    return suggestionsRef.current;
+}
 function shouldDisplayHigher$1(content, list) {
     if (!content) {
         return false;
@@ -2584,13 +2641,13 @@ function shouldDisplayHigher$1(content, list) {
     }
     return spaceAbove > spaceBelow;
 }
-function useListController(props) {
-    const { suggestions, automatic, formControl, reference } = props;
+function useListController({ suggestions, automatic, formControl, reference }) {
     const refContent = useRef(null);
     const refList = useRef(null);
     const refInput = useRef(null);
     const listIsOpen = useRef(false);
-    const [collection, setCollection] = useState(new ListCollection(suggestions));
+    const stableSuggestions = useStableSuggestions(suggestions);
+    const collection = useMemo(() => new ListCollection(stableSuggestions, reference), [stableSuggestions]);
     const [state, refreshState] = useState({
         focused: false,
         higher: false,
@@ -2619,9 +2676,6 @@ function useListController(props) {
             formControl?.touch();
         }
     }, [state.listIsVisible]);
-    useEffect(() => {
-        setCollection(new ListCollection(suggestions, reference));
-    }, [suggestions]);
     useEffect(() => {
         if (!changeValueInternal.current) {
             if (formControl?.value) {
@@ -2645,7 +2699,7 @@ function useListController(props) {
                     setFormValue(element);
                 }
                 else {
-                    refreshState({ ...state, value: '' });
+                    refreshState((state) => ({ ...state, value: '' }));
                 }
             }
             else {
@@ -2653,20 +2707,20 @@ function useListController(props) {
                     setFormValue(collection.value[0], true);
                 }
                 else {
-                    refreshState({ ...state, value: '' });
+                    refreshState((state) => ({ ...state, value: '' }));
                 }
             }
         }
         changeValueInternal.current = false;
     }, [collection, formControl?.value]);
     const setState = useCallback((state) => {
-        const _state = state.listIsVisible
+        const newState = state.listIsVisible
             ? {
                 ...state,
                 higher: shouldDisplayHigher$1(refContent.current, refList.current)
             }
             : state;
-        refreshState((state) => ({ ...state, ..._state }));
+        refreshState((currentState) => ({ ...currentState, ...newState }));
     }, []);
     const setFormValue = useCallback((element, valueIsDefault = false) => {
         refreshState((state) => ({
@@ -2683,23 +2737,25 @@ function useListController(props) {
     }, [formControl]);
     const navigationInput = useCallback((event) => {
         if (state.listIsVisible) {
-            const _position = navigationListFromInput({
+            const newPosition = navigationListFromInput({
                 content: refContent.current,
                 event: event,
+                higher: state.higher,
                 list: refList.current
             });
-            position.current = _position ?? 0;
+            position.current = newPosition ?? 0;
         }
-    }, [state.listIsVisible]);
+    }, [state.listIsVisible, state.higher]);
     const navigationElement = useCallback((event) => {
         position.current = navigationListFromElement({
             content: refContent.current,
             event: event,
+            higher: state.higher,
             input: refInput.current,
             list: refList.current,
             position: position.current
         });
-    }, [state.listIsVisible]);
+    }, [state.higher]);
     return {
         ...state,
         navigationElement,
@@ -2855,7 +2911,7 @@ function useFieldAutocomplete(props) {
     };
 }
 
-function RlsFieldAutocompleteTemplate(props) {
+function RlsFieldAutocompleteTemplateComponent(props) {
     const autocomplete = useFieldAutocomplete(props);
     const { render, action, children, formControl, msgErrorDisabled, onSearch, placeholder, rlsTheme, searching } = props;
     const [listInputPlaceholder, setListInputPlaceholder] = useState(reactI18n('listInputPlaceholder'));
@@ -2919,12 +2975,14 @@ function RlsFieldAutocompleteTemplate(props) {
     ]);
     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 RlsFieldAutocompleteTemplate = memo(RlsFieldAutocompleteTemplateComponent);
+function RlsFieldAutocompleteComponent(props) {
     const render = useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { className: "rls-field-list__ballot", subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
     return jsxRuntimeExports.jsx(RlsFieldAutocompleteTemplate, { ...props, render: render });
 }
+const RlsFieldAutocomplete = memo(RlsFieldAutocompleteComponent);
 
-function RlsModal({ autoclose, children, className, controller, onBackdrop, visible, rlsTheme }) {
+function RlsModalComponent({ autoclose, children, className, controller, onBackdrop, visible, rlsTheme }) {
     const classNameModal = useMemo(() => {
         return renderClassStatus('rls-modal', { visible: controller?.visible ?? visible }, className);
     }, [className, visible, controller?.visible]);
@@ -2936,6 +2994,7 @@ function RlsModal({ autoclose, children, className, controller, onBackdrop, visi
     }, [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);
 }
+const RlsModal = memo(RlsModalComponent);
 
 function formatTime(value) {
     return String(value).padStart(2, '0');
@@ -2969,7 +3028,7 @@ function RlsPickerClockTick({ onValue, selectionIsHours, value }) {
     }, [onValue]);
     return (jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__tick", style: styleTick, onClick: onClick, children: label }));
 }
-function RlsPickerClock({ formControl, onListener, rlsTheme, time }) {
+function RlsPickerClockComponent({ formControl, onListener, rlsTheme, time }) {
     const timeInitial = useMemo(() => {
         return formControl?.value ?? time ?? Time.now();
     }, [formControl?.value, time]);
@@ -3156,8 +3215,18 @@ function RlsPickerClock({ formControl, onListener, rlsTheme, time }) {
                                 return (jsxRuntimeExports.jsx(RlsPickerClockTick, { value: value, selectionIsHours: selectionIsHours, onValue: onClickValue }, value));
                             }) })] }) }), jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__footer", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__footer--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", onClick: onCancel, children: labels.timeActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__footer--today", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "timer", onClick: onCurrentTime }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__footer--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.timeActionSelect }) })] })] }));
 }
+const RlsPickerClock = memo(RlsPickerClockComponent);
 
-function RlsFieldClock({ children, disabled: disabledProps, formControl, identifier, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, time, value: valueInitial }) {
+function RlsModalClockComponent({ controller, disabled, formControl, onClose, rlsTheme, time, visible }) {
+    const onListener = useCallback(({ event, value }) => {
+        onClose?.(event !== PickerListenerEvent.Cancel ? value : undefined);
+        controller?.close();
+    }, [onClose, controller]);
+    return (jsxRuntimeExports.jsx(RlsModal, { className: "rls-modal-clock", controller: controller, visible: visible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerClock, { formControl: formControl, time: time, disabled: disabled, onListener: onListener }) }));
+}
+const RlsModalClock = memo(RlsModalClockComponent);
+
+function RlsFieldClockComponent({ children, disabled: disabledProps, formControl, identifier, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, time, value: valueInitial }) {
     const [value, setValue] = useState(formControl?.value ?? valueInitial);
     const [modalIsVisible, setModalIsVisible] = useState(false);
     const disabled = useMemo(() => {
@@ -3197,17 +3266,18 @@ function RlsFieldClock({ children, disabled: disabledProps, formControl, identif
             setModalIsVisible(true);
         }
     }, [timeValue, formControl, valueInitial, onChange]);
-    const onListener = useCallback(({ event, value }) => {
-        if (event !== PickerListenerEvent.Cancel) {
-            onChange(value);
+    const onCloseModal = useCallback((time) => {
+        if (time) {
+            onChange(time);
         }
         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 }) })] }));
+    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(RlsModalClock, { visible: modalIsVisible, time: time, disabled: disabled, onClose: onCloseModal, rlsTheme: rlsTheme })] }));
 }
+const RlsFieldClock = memo(RlsFieldClockComponent);
 
-function RlsPickerColor({ color, formControl, onListener, rlsTheme }) {
+function RlsPickerColorComponent({ color, formControl, onListener, rlsTheme }) {
     const initialColor = useMemo(() => formControl?.value ?? color ?? DEFAULT_COLOR, []);
     const initialHsv = useMemo(() => hexToHsv(initialColor) ?? { h: 258, s: 100, v: 100 }, []);
     const canvasRef = useRef(null);
@@ -3417,8 +3487,9 @@ function RlsPickerColor({ color, formControl, onListener, rlsTheme }) {
                             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 }) })] })] }));
 }
+const RlsPickerColor = memo(RlsPickerColorComponent);
 
-function RlsFieldColor({ children, color, disabled: disabledProps, formControl, identifier, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
+function RlsFieldColorComponent({ children, color, disabled: disabledProps, formControl, identifier, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
     const [value, setValue] = useState(formControl?.value ?? valueInitial);
     const [modalIsVisible, setModalIsVisible] = useState(false);
     const colorValue = useMemo(() => {
@@ -3465,12 +3536,13 @@ function RlsFieldColor({ children, color, disabled: disabledProps, formControl,
     }, [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 RlsFieldColor = memo(RlsFieldColorComponent);
 
 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 }) {
+function RlsPickerDateComponent({ automatic, date, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
     const today = useRef(new Date()); // Initial current date in component
     const _date = useMemo(() => {
         return formControl?.value ?? date ?? today.current;
@@ -3549,8 +3621,18 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
     }, [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 }) })] }) }))] }));
 }
+const RlsPickerDate = memo(RlsPickerDateComponent);
+
+function RlsModalDateComponent({ automatic, controller, date, disabled, formControl, maxDate, minDate, onClose, rlsTheme, visible }) {
+    const onListener = useCallback(({ event, value }) => {
+        onClose?.(event !== PickerListenerEvent.Cancel ? value : undefined);
+        controller?.close();
+    }, [onClose, controller]);
+    return (jsxRuntimeExports.jsx(RlsModal, { className: "rls-modal-date", controller: controller, visible: visible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { automatic: automatic, formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) }));
+}
+const RlsModalDate = memo(RlsModalDateComponent);
 
-function RlsFieldDate({ children, date, disabled: disabledProps, formControl, format, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
+function RlsFieldDateComponent({ children, date, disabled: disabledProps, formControl, format, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
     const today = useRef(new Date()); // Initial current date in component
     const [value, setValue] = useState(formControl?.value ?? valueInitial);
     const [modalIsVisible, setModalIsVisible] = useState(false);
@@ -3602,15 +3684,16 @@ function RlsFieldDate({ children, date, disabled: disabledProps, formControl, fo
             setModalIsVisible(true);
         }
     }, [dateValue, formControl, valueInitial, onChange]);
-    const onListener = useCallback(({ event, value }) => {
-        if (event !== PickerListenerEvent.Cancel) {
-            onChange(value);
+    const onCloseModal = useCallback((date) => {
+        if (date) {
+            onChange(date);
         }
         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 }) })] }));
+    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(RlsModalDate, { visible: modalIsVisible, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onClose: onCloseModal, rlsTheme: rlsTheme })] }));
 }
+const RlsFieldDate = memo(RlsFieldDateComponent);
 
 function rangeFormatTemplate({ maxDate, minDate }) {
     const minFormat = dateFormatTemplate(minDate, DATE_RANGE_FORMAT);
@@ -3618,7 +3701,7 @@ function rangeFormatTemplate({ maxDate, minDate }) {
     return `${minFormat} - ${maxFormat}`;
 }
 
-function RlsPickerDateRange({ automatic, date: datePicker, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
+function RlsPickerDateRangeComponent({ automatic, date: datePicker, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
     const _date = useMemo(() => normalizeMinTime(datePicker ?? new Date()), [datePicker]);
     const _range = useMemo(() => formControl?.value ?? DateRange.now(), [formControl?.value]);
     const yearControl = useReactControl(_date.getFullYear());
@@ -3684,8 +3767,18 @@ function RlsPickerDateRange({ automatic, date: datePicker, disabled, formControl
     }, [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 }) })] }) })] }));
 }
+const RlsPickerDateRange = memo(RlsPickerDateRangeComponent);
 
-function RlsFieldDateRange({ children, date, disabled: disabledProps, formControl, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
+function RlsModalDateRangeComponent({ automatic, controller, date, disabled, formControl, maxDate, minDate, onClose, rlsTheme, visible }) {
+    const onListener = useCallback(({ event, value }) => {
+        onClose?.(event !== PickerListenerEvent.Cancel ? value : undefined);
+        controller?.close();
+    }, [onClose, controller]);
+    return (jsxRuntimeExports.jsx(RlsModal, { className: "rls-modal-date-range", controller: controller, visible: visible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { automatic: automatic, formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) }));
+}
+const RlsModalDateRange = memo(RlsModalDateRangeComponent);
+
+function RlsFieldDateRangeComponent({ children, date, disabled: disabledProps, formControl, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
     const currentDate = useMemo(() => date ?? new Date(), [date]);
     const [value, setValue] = useState(formControl?.value || valueInitial);
     const [modalIsVisible, setModalIsVisible] = useState(false);
@@ -3726,15 +3819,16 @@ function RlsFieldDateRange({ children, date, disabled: disabledProps, formContro
             setModalIsVisible(true);
         }
     }, [dateRangeValue, formControl, valueInitial, onChange]);
-    const onListener = useCallback(({ event, value }) => {
-        if (event !== PickerListenerEvent.Cancel) {
-            onChange(value);
+    const onCloseModal = useCallback((dateRange) => {
+        if (dateRange) {
+            onChange(dateRange);
         }
         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 }) })] }));
+    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(RlsModalDateRange, { visible: modalIsVisible, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onClose: onCloseModal, rlsTheme: rlsTheme })] }));
 }
+const RlsFieldDateRange = memo(RlsFieldDateRangeComponent);
 
 const MAX_LIST_HEIGHT_REM = 90;
 const FALLBACK_REM_SIZE = 16;
@@ -3786,26 +3880,25 @@ function useFieldList(props) {
     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);
+            setSelected(suggestions.filter((state) => formValue.some((value) => state.compareTo(value))));
         }
         else {
             setSelected([]);
         }
     }, [formControl?.value, suggestions]);
-    const setListState = useCallback((updates) => {
+    const setListState = useCallback((controllerState) => {
         setState((state) => {
-            const _updates = updates.listIsVisible !== undefined
+            const newState = controllerState.listIsVisible !== undefined
                 ? {
-                    ...updates,
-                    ...(updates.listIsVisible
+                    ...controllerState,
+                    ...(controllerState.listIsVisible
                         ? {
                             higher: shouldDisplayHigher(refContent.current, refList.current)
                         }
                         : {})
                 }
-                : updates;
-            return { ...state, ..._updates };
+                : controllerState;
+            return { ...state, ...newState };
         });
     }, []);
     const toggleElement = useCallback((element) => {
@@ -3892,15 +3985,17 @@ function RlsFieldListInner({ render, suggestions, action, children, formControl,
     const renderWithCheckbox = 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) {
+function RlsFieldListTemplateComponent(props) {
     const fieldList = useFieldList(props);
     return jsxRuntimeExports.jsx(RlsFieldListInner, { ...props, fieldList: fieldList });
 }
-function RlsFieldList(props) {
+const RlsFieldListTemplate = memo(RlsFieldListTemplateComponent);
+function RlsFieldListComponent(props) {
     const fieldList = useFieldList(props);
     const render = useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { className: "rls-field-list__ballot", subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
     return jsxRuntimeExports.jsx(RlsFieldListInner, { ...props, render: render, fieldList: fieldList });
 }
+const RlsFieldList = memo(RlsFieldListComponent);
 
 function useFieldSelect(props) {
     const controller = useListController(props);
@@ -4010,7 +4105,7 @@ function useFieldSelect(props) {
     };
 }
 
-function RlsFieldSelectTemplate(props) {
+function RlsFieldSelectTemplateComponent(props) {
     const select = useFieldSelect(props);
     const { render, suggestions, action, children, formControl, msgErrorDisabled, placeholder, rlsTheme, unremovable } = props;
     const disabled = useMemo(() => {
@@ -4032,17 +4127,20 @@ function RlsFieldSelectTemplate(props) {
     ]);
     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 RlsFieldSelectTemplate = memo(RlsFieldSelectTemplateComponent);
+function RlsFieldSelectComponent(props) {
     const render = useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { className: "rls-field-list__ballot", subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
     return jsxRuntimeExports.jsx(RlsFieldSelectTemplate, { ...props, render: render });
 }
+const RlsFieldSelect = memo(RlsFieldSelectComponent);
 
-function RlsFormNavigation({ children, className, controller, visible, rlsTheme }) {
+function RlsFormNavigationComponent({ children, className, controller, visible, rlsTheme }) {
     const classNameForm = useMemo(() => {
         return renderClassStatus('rls-form-navigation', { visible: controller?.visible ?? visible }, className);
     }, [className, visible, controller?.visible]);
     return ReactDOM.createPortal(jsxRuntimeExports.jsx("div", { className: classNameForm, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-form-navigation__component", children: children }) }), document.body);
 }
+const RlsFormNavigation = memo(RlsFormNavigationComponent);
 
 function useRelocationOnComponent({ container, element, onDrag }) {
     const position = useRef({ x: 0, y: 0 });
@@ -4136,20 +4234,19 @@ function useRelocationOnComponent({ container, element, onDrag }) {
     }, []);
 }
 
-function useResize(props) {
-    const { refElement, onResize } = props;
+function useResize({ refElement, onResize }) {
     const dimension = useRef({ height: 0, width: 0 });
+    const onResizeRef = useRef(onResize);
+    onResizeRef.current = onResize;
     const observer = useCallback((entries) => {
         const { height, width } = entries[0].contentRect;
-        if (onResize) {
-            onResize({
-                current: dimension.current,
-                dimension: {
-                    height,
-                    width
-                }
-            });
-        }
+        onResizeRef.current?.({
+            current: dimension.current,
+            dimension: {
+                height,
+                width
+            }
+        });
         dimension.current = { height, width };
     }, []);
     useEffect(() => {
@@ -4197,7 +4294,7 @@ function calculateImgDimension(image, dimension) {
     height = simpleThreeRule(image.width, width, height);
     return { height, width };
 }
-function RlsImageEditor(props) {
+function RlsImageEditorComponent(props) {
     const [selection, setSelection] = useState(props.selection ?? 60);
     const [labels, setLabels] = useState({
         actionRestore: reactI18n('editorImageActionRestore'),
@@ -4395,10 +4492,12 @@ function RlsImageEditor(props) {
     }, []);
     return (jsxRuntimeExports.jsxs("div", { className: "rls-image-editor", children: [jsxRuntimeExports.jsx("div", { ref: refBody, className: "rls-image-editor__body", children: jsxRuntimeExports.jsxs("div", { ref: refImage, className: "rls-image-editor__body__image", children: [jsxRuntimeExports.jsx("div", { ref: refSelection, className: "rls-image-editor__body__selection" }), jsxRuntimeExports.jsx("div", { ref: refOverlayTop, className: "rls-image-editor__body__overlay--top" }), jsxRuntimeExports.jsx("div", { ref: refOverlayRight, className: "rls-image-editor__body__overlay--right" }), jsxRuntimeExports.jsx("div", { ref: refOverlayBottom, className: "rls-image-editor__body__overlay--bottom" }), jsxRuntimeExports.jsx("div", { ref: refOverlayLeft, className: "rls-image-editor__body__overlay--left" }), jsxRuntimeExports.jsx("canvas", { ref: refCanvas })] }) }), jsxRuntimeExports.jsxs("div", { className: "rls-image-editor__footer", children: [jsxRuntimeExports.jsx("div", { className: "rls-image-editor__sliders", children: jsxRuntimeExports.jsx(RlsSlider, { prefixIcon: "external-link", value: selection, minValue: MIN_SLIDER_VALUE, maxValue: MAX_SLIDER_VALUE, onValue: setSelection, disabled: props.disabled }) }), jsxRuntimeExports.jsxs("div", { className: "rls-image-editor__actions", children: [props.children, jsxRuntimeExports.jsx(RlsButton, { type: "flat", rlsTheme: "standard", prefixIcon: "refresh", onClick: onRestore, disabled: props.disabled, children: labels.actionRestore }), jsxRuntimeExports.jsx(RlsButton, { type: "raised", rlsTheme: "primary", prefixIcon: "crop", onClick: onCropImage, disabled: props.disabled, children: labels.actionSelect })] })] }), jsxRuntimeExports.jsx("canvas", { ref: refPicture })] }));
 }
+const RlsImageEditor = memo(RlsImageEditorComponent);
 
-function RlsImageEditorModal(props) {
+function RlsImageEditorModalComponent(props) {
     return (jsxRuntimeExports.jsx(RlsModal, { className: "rls-image-editor-modal", visible: props.visible, children: jsxRuntimeExports.jsx(RlsImageEditor, { ...props, children: props.children }) }));
 }
+const RlsImageEditorModal = memo(RlsImageEditorModalComponent);
 
 const MIME_TYPE_SUPPORTS = [
     'image/png',
@@ -4469,7 +4568,7 @@ function useImageEditorController(options) {
     return { onImageChooser, RlsImageEditorChooser };
 }
 
-function RlsImageChooser(props) {
+function RlsImageChooserComponent(props) {
     const [src, setSrc] = useState();
     const onValue = useCallback((image) => {
         setSrc(image.base64);
@@ -4483,8 +4582,9 @@ function RlsImageChooser(props) {
     }, [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] }));
 }
+const RlsImageChooser = memo(RlsImageChooserComponent);
 
-function RlsModalSheet({ autoclose, children, className, controller, onAutoClose, visible, rlsTheme }) {
+function RlsModalSheetComponent({ autoclose, children, className, controller, onAutoClose, visible, rlsTheme }) {
     const classNameModal = useMemo(() => {
         return renderClassStatus('rls-modal-sheet', { visible: controller?.visible ?? visible }, className);
     }, [className, visible, controller?.visible]);
@@ -4496,6 +4596,7 @@ function RlsModalSheet({ autoclose, children, className, controller, 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 RlsModalSheet = memo(RlsModalSheetComponent);
 
 const DURATION_ANIMATION$1 = 240;
 const DURATION_DEFAULT = 4000;
@@ -4566,12 +4667,13 @@ function calculateDuration({ length }) {
     }
     return duration + DURATION_RESET;
 }
-function RlsSnackbar({ content, onClose, icon, rlsTheme, title, visible }) {
+function RlsSnackbarComponent({ content, onClose, icon, rlsTheme, title, visible }) {
     const className = useMemo(() => {
         return renderClassStatus('rls-snackbar', { visible });
     }, [visible]);
     return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [icon && (jsxRuntimeExports.jsx("div", { className: "rls-snackbar__avatar", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })), jsxRuntimeExports.jsxs("div", { className: "rls-snackbar__component", children: [jsxRuntimeExports.jsxs("div", { className: "rls-snackbar__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-snackbar__title", children: title }), jsxRuntimeExports.jsx("button", { onClick: onClose, children: jsxRuntimeExports.jsx(RlsIcon, { value: "close" }) })] }), jsxRuntimeExports.jsx("div", { className: "rls-snackbar__content", children: content })] })] }));
 }
+const RlsSnackbar = memo(RlsSnackbarComponent);
 function useSnackbar() {
     const timeoutId = useRef(undefined);
     const duration = useRef(4000);
@@ -4638,14 +4740,15 @@ function RlsApplication({ children }) {
             'navbar-condense': navbarIsCondense
         });
     }, [appIsMobile, navbarInApp, navbarIsCondense]);
-    return (jsxRuntimeExports.jsxs(RlsContext, { value: {
-            confirmation,
-            notify,
-            snackbar,
-            setIsMobile,
-            setNavbarInApp,
-            setNavbarIsCondense
-        }, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, RlsSnackbar] }), RlsNotifications, RlsConfirmation] }));
+    const state = useMemo(() => ({
+        confirmation,
+        notify,
+        setIsMobile,
+        setNavbarInApp,
+        setNavbarIsCondense,
+        snackbar
+    }), [confirmation, notify, snackbar]);
+    return (jsxRuntimeExports.jsxs(RlsContext, { value: state, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, RlsSnackbar] }), RlsNotifications, RlsConfirmation] }));
 }
 
 const DEFAULT_DESIGN_SYSTEM = 'bordered';
@@ -4771,5 +4874,26 @@ function usePortalController() {
     return { close, open, visible };
 }
 
-export { ConfirmationResult, DEFAULT_COLOR, RlsAccordion, RlsAlert, RlsAmount, RlsApplication, RlsAreaText, RlsAvatar, RlsBadge, RlsBallot, RlsBody, RlsBottomSheet, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonIcon, RlsButtonOption, RlsButtonProgress, RlsButtonStepper, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContent, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsDropdown, RlsFieldArea, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldClock, RlsFieldColor, RlsFieldDate, RlsFieldDateRange, RlsFieldDecimal, RlsFieldFile, RlsFieldList, RlsFieldListSuggestions, RlsFieldListTemplate, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldPercentage, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputCounter, RlsInputDecimal, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputPercentage, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsLed, RlsMessageEmpty, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsModalSheet, RlsNavbar, RlsNavbarMenu, RlsPagination, RlsPickerClock, RlsPickerColor, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSpinner, RlsSwitch, RlsSwitchControl, RlsTabs, RlsTabularText, RlsToolbar, calculateImgDimension, generateThemePalette, hexIsValid, hexToHsl, hexToHsv, hexToRgb, hslToHex, hsvToHex, hsvToRgb, normalizeHex, rangeFormatTemplate, renderClassStatus, rgbToHex, rgbToHsl, rgbToHsv, setDesignSystem, setErrorsI18n, setThemeColor, useConfirmation, useDatatable, useDesingSystemController, useDropdownController, useFieldAutocomplete, useFieldList, useFieldSelect, useFormSingleSelectionController, useFormToggleController, useImageEditorController, useListController, useNotifications, usePortalController, useRelocationOnComponent, useResize, useRlsContext, useSnackbar };
+const APP_THEME_ATTRIBUTE = 'app-theme';
+function getAppTheme() {
+    if (typeof document === 'undefined') {
+        return 'light';
+    }
+    return document.body.getAttribute(APP_THEME_ATTRIBUTE) === 'dark'
+        ? 'dark'
+        : 'light';
+}
+function setAppTheme(theme) {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    document.body.setAttribute(APP_THEME_ATTRIBUTE, theme);
+}
+function toggleAppTheme() {
+    const theme = getAppTheme() === 'dark' ? 'light' : 'dark';
+    setAppTheme(theme);
+    return theme;
+}
+
+export { ConfirmationResult, DEFAULT_COLOR, RlsAccordion, RlsAlert, RlsAmount, RlsApplication, RlsAreaText, RlsAvatar, RlsBadge, RlsBallot, RlsBody, RlsBottomSheet, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonIcon, RlsButtonOption, RlsButtonProgress, RlsButtonStepper, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContent, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsDropdown, RlsFieldArea, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldClock, RlsFieldColor, RlsFieldDate, RlsFieldDateRange, RlsFieldDecimal, RlsFieldFile, RlsFieldList, RlsFieldListSuggestions, RlsFieldListTemplate, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldPercentage, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputCounter, RlsInputDecimal, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputPercentage, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsLed, RlsMessageEmpty, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsModalClock, RlsModalDate, RlsModalDateRange, RlsModalSheet, RlsNavbar, RlsNavbarMenu, RlsPagination, RlsPickerClock, RlsPickerColor, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSpinner, RlsSwitch, RlsSwitchControl, RlsTabs, RlsTabularText, RlsToolbar, calculateImgDimension, generateThemePalette, getAppTheme, hexIsValid, hexToHsl, hexToHsv, hexToRgb, hslToHex, hsvToHex, hsvToRgb, normalizeHex, rangeFormatTemplate, renderClassStatus, rgbToHex, rgbToHsl, rgbToHsv, setAppTheme, setDesignSystem, setErrorsI18n, setThemeColor, toggleAppTheme, useConfirmation, useDatatable, useDesingSystemController, useDropdownController, useFieldAutocomplete, useFieldList, useFieldSelect, useFormSingleSelectionController, useFormToggleController, useImageEditorController, useListController, useNotifications, usePortalController, useRelocationOnComponent, useResize, useRlsContext, useSnackbar };
 //# sourceMappingURL=index.mjs.map