@rolster/react-components 19.7.0 → 19.7.3

package/dist/es/index.mjs

@@ -452,17 +452,13 @@ 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]);
-    const _className = useMemo(() => {
-        return renderClassStatus('rls-tabular-text', {}, className);
-    }, [className]);
+    const _className = renderClassStatus('rls-tabular-text', {}, className);
     return jsxRuntimeExports.jsx("div", { className: _className, children: codes });
 }
 const RlsTabularText = memo(RlsTabularTextComponent);
 
 function RlsAmountComponent({ value, className, decimals, rlsTheme, symbol }) {
-    const classNameAmount = useMemo(() => {
-        return renderClassStatus('rls-amount', {}, className);
-    }, [className]);
+    const classNameAmount = renderClassStatus('rls-amount', {}, className);
     const { decimal, integer } = useMemo(() => {
         const currency = currencyFormat({ value, decimals });
         if (!currency.includes(',')) {
@@ -532,45 +528,36 @@ function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier,
         setFocused(() => false);
         onBlur?.();
     }, [formControl, onBlur]);
-    const className = useMemo(() => {
-        return renderClassStatus('rls-area-text', {
-            disabled: formControl?.disabled || disabled,
-            focused: formControl?.focused ?? focused,
-            readonly: readOnly
-        });
-    }, [
-        formControl?.disabled,
-        formControl?.focused,
-        disabled,
-        focused,
-        readOnly
-    ]);
+    const className = renderClassStatus('rls-area-text', {
+        disabled: formControl?.disabled || disabled,
+        focused: formControl?.focused ?? focused,
+        readonly: readOnly
+    });
     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 RlsAvatarComponent({ children, contrasted, rounded, skeleton, rlsTheme }) {
-    const className = useMemo(() => {
-        return renderClassStatus('rls-avatar', { contrasted, rounded, skeleton });
-    }, [contrasted, rounded, skeleton]);
+function RlsAvatarComponent({ children, contrasted, rounded, skeleton, transparent, rlsTheme }) {
+    const className = renderClassStatus('rls-avatar', {
+        contrasted,
+        rounded,
+        skeleton,
+        transparent
+    });
     return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: children }));
 }
 const RlsAvatar = memo(RlsAvatarComponent);
 
 function RlsBadgeComponent({ children, contrasted, rlsTheme }) {
-    const className = useMemo(() => {
-        return renderClassStatus('rls-badge', { contrasted });
-    }, [contrasted]);
+    const className = renderClassStatus('rls-badge', { contrasted });
     return (jsxRuntimeExports.jsx("span", { className: className, "rls-theme": rlsTheme, children: children }));
 }
 const RlsBadge = memo(RlsBadgeComponent);
 
 function RlsBreadcrumbLabel({ label }) {
-    const className = useMemo(() => {
-        return renderClassStatus('rls-breadcrumb__label__a', {
-            actionable: !!label.onClick
-        });
-    }, [label.onClick]);
+    const className = renderClassStatus('rls-breadcrumb__label__a', {
+        actionable: !!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 RlsBreadcrumbComponent({ labels }) {
@@ -582,9 +569,7 @@ function RlsBreadcrumbComponent({ labels }) {
 const RlsBreadcrumb = memo(RlsBreadcrumbComponent);
 
 function RlsIconComponent({ value, className, rlsTheme, skeleton }) {
-    const classNameIcon = useMemo(() => {
-        return renderClassStatus('rls-icon', { skeleton }, className);
-    }, [className, skeleton]);
+    const classNameIcon = renderClassStatus('rls-icon', { skeleton }, className);
     return (jsxRuntimeExports.jsx("div", { className: classNameIcon, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("i", { className: `rls-icon-${value}` }) }));
 }
 const RlsIcon = memo(RlsIconComponent);
@@ -595,25 +580,19 @@ function RlsSpinnerComponent() {
 const RlsSpinner = memo(RlsSpinnerComponent);
 
 function RlsButtonComponent({ type, children, disabled, identifier, onClick, prefixIcon, requesting, rlsTheme, suffixIcon }) {
-    const className = useMemo(() => {
-        return renderClassStatus('rls-button__content', { type });
-    }, [type]);
+    const className = renderClassStatus('rls-button__content', { 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 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 }) }))] }));
+function RlsButtonActionComponent({ icon, badge, disabled, identifier, onClick, rlsTheme, tooltip, type }) {
+    const className = renderClassStatus('rls-button-action', { type });
+    return (jsxRuntimeExports.jsxs("button", { id: identifier, className: className, onClick: onClick, disabled: disabled, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-button-action__content", children: [jsxRuntimeExports.jsx(RlsIcon, { value: icon }), badge && jsxRuntimeExports.jsx("span", { className: "rls-button-action__badge", children: badge })] }), tooltip && (jsxRuntimeExports.jsx("div", { className: "rls-button-action__tooltip rls-overline-font-medium", children: jsxRuntimeExports.jsx("span", { children: tooltip }) }))] }));
 }
 const RlsButtonAction = memo(RlsButtonActionComponent);
 
 function RlsButtonIconComponent({ icon, className, disabled, onClick, skeleton }) {
-    const classNameButton = useMemo(() => {
-        return renderClassStatus('rls-button-icon', { skeleton }, className);
-    }, [className, skeleton]);
+    const classNameButton = renderClassStatus('rls-button-icon', { skeleton }, className);
     return (jsxRuntimeExports.jsx("button", { className: classNameButton, onClick: onClick, disabled: disabled, children: !skeleton && jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }));
 }
 const RlsButtonIcon = memo(RlsButtonIconComponent);
@@ -639,9 +618,7 @@ function RlsButtonOptionComponent({ icon, children, disabled, formControl, ident
         onValue,
         value
     });
-    const className = useMemo(() => {
-        return renderClassStatus('rls-button-option', { checked });
-    }, [checked]);
+    const className = renderClassStatus('rls-button-option', { checked });
     const onAction = useCallback(() => {
         onSelect();
         onClick?.();
@@ -651,9 +628,7 @@ function RlsButtonOptionComponent({ icon, children, disabled, formControl, ident
 const RlsButtonOption = memo(RlsButtonOptionComponent);
 
 function RlsCheckBoxComponent({ checked, disabled, identifier, onClick, rlsTheme }) {
-    const className = useMemo(() => {
-        return renderClassStatus('rls-checkbox', { checked, disabled });
-    }, [checked, disabled]);
+    const className = renderClassStatus('rls-checkbox', { checked, disabled });
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: className, onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx(RlsIcon, { value: "checkmark" }) }));
 }
 const RlsCheckBox = memo(RlsCheckBoxComponent);
@@ -673,9 +648,7 @@ const RlsSkeleton = memo(RlsSkeletonComponent);
 function RlsImageComponent({ src, rlsTheme }) {
     const [srcIsComplet, setSrcIsComplet] = useState(false);
     const refImage = useRef(null);
-    const className = useMemo(() => {
-        return renderClassStatus('rls-image', { complet: srcIsComplet });
-    }, [srcIsComplet]);
+    const className = renderClassStatus('rls-image', { complet: srcIsComplet });
     useEffect(() => {
         setSrcIsComplet(!!(src && refImage.current?.complete));
     }, [src]);
@@ -729,12 +702,10 @@ function RlsInputComponent({ children, decimals, disabled, formControl, identifi
         setFocused(() => false);
         onBlur?.();
     }, [formControl, onBlur]);
-    const className = useMemo(() => {
-        return renderClassStatus('rls-input', {
-            disabled: formControl?.disabled || disabled,
-            focused: formControl?.focused ?? focused
-        });
-    }, [formControl?.focused, formControl?.disabled, focused, disabled]);
+    const className = renderClassStatus('rls-input', {
+        disabled: formControl?.disabled || disabled,
+        focused: formControl?.focused ?? focused
+    });
     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);
@@ -744,13 +715,11 @@ function RlsInputCounterComponent({ className, disabled, formControl, identifier
     const [value, setValue] = useState(formControl?.value ?? valueProp ?? 0);
     const [focused, setFocused] = useState(false);
     const _disabled = useMemo(() => formControl?.disabled || disabled, [formControl?.disabled, disabled]);
-    const classNameCounter = useMemo(() => {
-        return renderClassStatus('rls-input-counter', {
-            disabled: _disabled,
-            focused: formControl?.focused ?? focused,
-            readonly: readOnly
-        }, className);
-    }, [_disabled, formControl?.focused, focused, readOnly, className]);
+    const classNameCounter = renderClassStatus('rls-input-counter', {
+        disabled: _disabled,
+        focused: formControl?.focused ?? focused,
+        readonly: readOnly
+    }, className);
     useEffect(() => {
         if (!changeIsInternal.current && formControl) {
             const counterValue = formControl.value;
@@ -865,12 +834,10 @@ function RlsInputPasswordComponent({ disabled, formControl, identifier, onEnter,
         formControl?.blur();
         setFocused(() => false);
     }, [formControl]);
-    const className = useMemo(() => {
-        return renderClassStatus('rls-input-password', {
-            disabled: formControl?.disabled || disabled,
-            focused: formControl?.focused ?? focused
-        });
-    }, [formControl?.focused, formControl?.disabled, focused, disabled]);
+    const className = renderClassStatus('rls-input-password', {
+        disabled: formControl?.disabled || disabled,
+        focused: formControl?.focused ?? focused
+    });
     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);
@@ -890,9 +857,7 @@ const RlsInputPercentage = memo(RlsInputPercentageComponent);
 
 function RlsInputSearchComponent({ formControl, disabled, identifier, onEnter, onSearch, placeholder }) {
     const [value, setValue] = useState('');
-    const className = useMemo(() => {
-        return renderClassStatus('rls-input-search', { disabled });
-    }, [disabled]);
+    const className = renderClassStatus('rls-input-search', { disabled });
     const onValue = useCallback((value) => {
         if (!formControl) {
             setValue(() => value);
@@ -1263,17 +1228,13 @@ function RlsMessageIconComponent({ icon, children, rlsTheme }) {
 const RlsMessageIcon = memo(RlsMessageIconComponent);
 
 function RlsPosterComponent({ children, contrasted, rlsTheme }) {
-    const className = useMemo(() => {
-        return renderClassStatus('rls-poster', { contrasted });
-    }, [contrasted]);
+    const className = renderClassStatus('rls-poster', { contrasted });
     return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: children }));
 }
 const RlsPoster = memo(RlsPosterComponent);
 
 function RlsProgressBarComponent({ indeterminate, percentage, rlsTheme }) {
-    const className = useMemo(() => {
-        return renderClassStatus('rls-progress-bar', { indeterminate });
-    }, [indeterminate]);
+    const className = renderClassStatus('rls-progress-bar', { 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);
@@ -1284,9 +1245,7 @@ function RlsProgressCircularComponent({ rlsTheme }) {
 const RlsProgressCircular = memo(RlsProgressCircularComponent);
 
 function RlsRadioButtonComponent({ checked, disabled, identifier, rlsTheme, onClick }) {
-    const className = useMemo(() => {
-        return renderClassStatus('rls-radiobutton', { checked, disabled });
-    }, [checked, disabled]);
+    const className = renderClassStatus('rls-radiobutton', { 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);
@@ -1297,9 +1256,11 @@ function RlsSkeletonTextComponent({ active, children, rlsTheme }) {
 const RlsSkeletonText = memo(RlsSkeletonTextComponent);
 
 function RlsSwitchComponent({ checked, capsule, disabled, identifier, onClick, rlsTheme }) {
-    const className = useMemo(() => {
-        return renderClassStatus('rls-switch', { checked, capsule, disabled });
-    }, [checked, capsule, disabled]);
+    const className = renderClassStatus('rls-switch', {
+        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" }) }) }));
 }
 const RlsSwitch = memo(RlsSwitchComponent);
@@ -1316,9 +1277,7 @@ function RlsAccordionComponent({ bordered, children, className, disabled, identi
     const [animating, setAnimating] = useState(false);
     const contentRef = useRef(null);
     const initializedRef = useRef(false);
-    const classNameAccordion = useMemo(() => {
-        return renderClassStatus('rls-accordion', { bordered, disabled, open, animating }, className);
-    }, [animating, bordered, className, disabled, open]);
+    const classNameAccordion = renderClassStatus('rls-accordion', { bordered, disabled, open, animating }, className);
     const onClickHeader = useCallback(() => {
         if (!disabled) {
             setOpen((current) => {
@@ -1367,17 +1326,13 @@ function RlsAccordionComponent({ bordered, children, className, disabled, identi
 const RlsAccordion = memo(RlsAccordionComponent);
 
 function RlsAlertComponent({ bordered, children, icon, identifier, rlsTheme }) {
-    const className = useMemo(() => {
-        return renderClassStatus('rls-alert', { bordered });
-    }, [bordered]);
+    const className = renderClassStatus('rls-alert', { 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 RlsBallotComponent({ bordered, className, children, img, initials, skeleton, subtitle, rlsTheme }) {
-    const classNameBallot = useMemo(() => {
-        return renderClassStatus('rls-ballot', { bordered, skeleton }, className);
-    }, [bordered, skeleton, className]);
+    const classNameBallot = renderClassStatus('rls-ballot', { 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);
@@ -1388,9 +1343,7 @@ function RlsBodyComponent({ children, identifier, rlsTheme }) {
 const RlsBody = memo(RlsBodyComponent);
 
 function RlsButtonProgressComponent({ icon, disabled, onClick, progressing, rlsTheme }) {
-    const className = useMemo(() => {
-        return renderClassStatus('rls-button-progress', { progressing });
-    }, [progressing]);
+    const className = renderClassStatus('rls-button-progress', { 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);
@@ -1421,12 +1374,10 @@ function RlsButtonToggleComponent({ onAction, options, type, automatic, disabled
             document.removeEventListener('click', onCloseMenu);
         };
     }, []);
-    const classNameList = useMemo(() => {
-        return renderClassStatus('rls-button-toggle__list', {
-            hide: !visible,
-            visible
-        });
-    }, [visible]);
+    const classNameList = renderClassStatus('rls-button-toggle__list', {
+        hide: !visible,
+        visible
+    });
     const onClickMenu = useCallback(() => {
         setVisible((visible) => !visible);
     }, []);
@@ -1588,14 +1539,12 @@ function RlsFieldAreaComponent(props) {
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
-    const className = useMemo(() => {
-        return renderClassStatus('rls-field-box', {
-            disabled,
-            error: formControl?.wrong,
-            focused: formControl?.focused && !disabled,
-            readonly: props.readOnly
-        }, 'rls-field-area');
-    }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
+    const className = renderClassStatus('rls-field-box', {
+        disabled,
+        error: formControl?.wrong,
+        focused: formControl?.focused && !disabled,
+        readonly: props.readOnly
+    }, 'rls-field-area');
     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);
@@ -1605,14 +1554,12 @@ function RlsFieldDecimalComponent(props) {
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
-    const className = useMemo(() => {
-        return renderClassStatus('rls-field-box', {
-            disabled,
-            error: formControl?.wrong,
-            focused: formControl?.focused && !disabled,
-            readonly: props.readOnly
-        }, 'rls-field-decimal');
-    }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
+    const className = renderClassStatus('rls-field-box', {
+        disabled,
+        error: formControl?.wrong,
+        focused: formControl?.focused && !disabled,
+        readonly: props.readOnly
+    }, 'rls-field-decimal');
     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);
@@ -1620,12 +1567,12 @@ const RlsFieldDecimal = memo(RlsFieldDecimalComponent);
 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', {
+    const className = renderClassStatus('rls-field-box', {
         disabled,
         error: formControl?.wrong,
         focused: formControl?.focused && !disabled,
         readonly: readOnly
-    }, 'rls-field-file'), [formControl?.focused, formControl?.wrong, readOnly, disabled]);
+    }, 'rls-field-file');
     const currentFile = useMemo(() => formControl?.value ?? value, [formControl?.value, value]);
     const displayValue = useMemo(() => {
         return currentFile?.name ?? '';
@@ -1706,13 +1653,11 @@ function RlsFieldListSuggestionsComponent({ elements, action, disabled, higher,
             });
         });
     }, []);
-    const className = useMemo(() => {
-        return renderClassStatus('rls-field-list__suggestions', {
-            disabled,
-            higher,
-            visible
-        });
-    }, [disabled, higher, visible]);
+    const className = renderClassStatus('rls-field-list__suggestions', {
+        disabled,
+        higher,
+        visible
+    });
     const onChangePattern = useCallback((event) => {
         searchControl?.onChange(event.target.value);
     }, [searchControl?.onChange]);
@@ -1732,14 +1677,12 @@ function RlsFieldMoneyComponent(props) {
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
-    const className = useMemo(() => {
-        return renderClassStatus('rls-field-box', {
-            disabled,
-            error: formControl?.wrong,
-            focused: formControl?.focused && !disabled,
-            readonly: props.readOnly
-        }, 'rls-field-money');
-    }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
+    const className = renderClassStatus('rls-field-box', {
+        disabled,
+        error: formControl?.wrong,
+        focused: formControl?.focused && !disabled,
+        readonly: props.readOnly
+    }, 'rls-field-money');
     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);
@@ -1749,14 +1692,12 @@ function RlsFieldNumberComponent(props) {
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
-    const className = useMemo(() => {
-        return renderClassStatus('rls-field-box', {
-            disabled,
-            error: formControl?.wrong,
-            focused: formControl?.focused && !disabled,
-            readonly: props.readOnly
-        }, 'rls-field-number');
-    }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
+    const className = renderClassStatus('rls-field-box', {
+        disabled,
+        error: formControl?.wrong,
+        focused: formControl?.focused && !disabled,
+        readonly: props.readOnly
+    }, 'rls-field-number');
     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);
@@ -1767,14 +1708,12 @@ function RlsFieldPasswordComponent(props) {
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
-    const className = useMemo(() => {
-        return renderClassStatus('rls-field-box', {
-            disabled,
-            error: formControl?.wrong,
-            focused: formControl?.focused && !disabled,
-            readonly: props.readOnly
-        }, 'rls-field-password');
-    }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
+    const className = renderClassStatus('rls-field-box', {
+        disabled,
+        error: formControl?.wrong,
+        focused: formControl?.focused && !disabled,
+        readonly: props.readOnly
+    }, 'rls-field-password');
     const onTogglePassword = useCallback(() => {
         setPasswordIsActive((password) => !password);
     }, []);
@@ -1787,14 +1726,12 @@ function RlsFieldPercentageComponent(props) {
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
-    const className = useMemo(() => {
-        return renderClassStatus('rls-field-box', {
-            disabled,
-            error: formControl?.wrong,
-            focused: formControl?.focused && !disabled,
-            readonly: props.readOnly
-        }, 'rls-field-percentage');
-    }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
+    const className = renderClassStatus('rls-field-box', {
+        disabled,
+        error: formControl?.wrong,
+        focused: formControl?.focused && !disabled,
+        readonly: props.readOnly
+    }, 'rls-field-percentage');
     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);
@@ -1809,14 +1746,12 @@ function RlsFieldTextComponent(props) {
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
-    const className = useMemo(() => {
-        return renderClassStatus('rls-field-box', {
-            disabled,
-            error: formControl?.wrong,
-            focused: formControl?.focused && !disabled,
-            readonly: props.readOnly
-        }, 'rls-field-text');
-    }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
+    const className = renderClassStatus('rls-field-box', {
+        disabled,
+        error: formControl?.wrong,
+        focused: formControl?.focused && !disabled,
+        readonly: props.readOnly
+    }, 'rls-field-text');
     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);
@@ -1846,13 +1781,11 @@ function RlsLabelCheckBoxComponent({ children, disabled, extended, identifier, f
         disabled,
         formControl
     });
-    const className = useMemo(() => {
-        return renderClassStatus('rls-label-checkbox', {
-            disabled,
-            extended,
-            reverse
-        });
-    }, [disabled, extended, reverse]);
+    const className = renderClassStatus('rls-label-checkbox', {
+        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);
@@ -1864,13 +1797,11 @@ function RlsLabelRadioButtonComponent({ children, disabled, extended, identifier
         onValue,
         value
     });
-    const className = useMemo(() => {
-        return renderClassStatus('rls-label-radiobutton', {
-            disabled,
-            extended,
-            reverse
-        });
-    }, [disabled, extended, reverse]);
+    const className = renderClassStatus('rls-label-radiobutton', {
+        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);
@@ -1880,21 +1811,17 @@ function RlsLabelSwitchComponent({ capsule, children, disabled, extended, identi
         disabled,
         formControl
     });
-    const className = useMemo(() => {
-        return renderClassStatus('rls-label-switch', {
-            disabled,
-            extended,
-            reverse
-        });
-    }, [disabled, extended, reverse]);
+    const className = renderClassStatus('rls-label-switch', {
+        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 RlsMessageEmptyComponent({ children, className, emoji, icon, identifier, image, rlsTheme, title }) {
-    const classNameMessageEmpty = useMemo(() => {
-        return renderClassStatus('rls-message-empty', {}, className);
-    }, [className]);
+    const classNameMessageEmpty = renderClassStatus('rls-message-empty', {}, className);
     const logo = useMemo(() => {
         if (icon) {
             return (jsxRuntimeExports.jsx("div", { className: "rls-message-empty__logo", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }));
@@ -1928,7 +1855,9 @@ function RlsNavbarMenuComponent({ options, onOption }) {
 const RlsNavbarMenu = memo(RlsNavbarMenuComponent);
 
 function PageButton({ page, onSelect }) {
-    const className = useMemo(() => renderClassStatus('rls-pagination__page', { active: page.active }), [page.active]);
+    const className = renderClassStatus('rls-pagination__page', {
+        active: page.active
+    });
     const onClick = useCallback(() => {
         onSelect(page);
     }, [page, onSelect]);
@@ -1982,15 +1911,13 @@ 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))) }));
 }
 function RlsPickerDayElement({ day, onSelect, disabled }) {
-    const className = useMemo(() => {
-        return renderClassStatus('rls-picker-day__element', {
-            disabled: day.disabled || disabled,
-            focused: day.focused,
-            forbidden: day.forbidden,
-            selected: day.selected,
-            today: day.today
-        });
-    }, [day, disabled]);
+    const className = renderClassStatus('rls-picker-day__element', {
+        disabled: day.disabled || disabled,
+        focused: day.focused,
+        forbidden: day.forbidden,
+        selected: day.selected,
+        today: day.today
+    });
     const onClick = useCallback(() => {
         if (day.value && !day.disabled && !disabled) {
             onSelect(day.value);
@@ -2057,15 +1984,13 @@ 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))) }));
 }
 function RlsPickerDayRangeElement({ day, onSelect, disabled }) {
-    const className = useMemo(() => {
-        return renderClassStatus('rls-picker-day-range__element', {
-            disabled: day.disabled || disabled,
-            end: day.end,
-            forbidden: day.forbidden,
-            ranged: day.ranged,
-            source: day.source
-        });
-    }, [day.disabled, day.end, day.forbidden, day.ranged, day.source, disabled]);
+    const className = renderClassStatus('rls-picker-day-range__element', {
+        disabled: day.disabled || disabled,
+        end: day.end,
+        forbidden: day.forbidden,
+        ranged: day.ranged,
+        source: day.source
+    });
     const onClick = useCallback(() => {
         if (day.value && !day.disabled && !disabled) {
             onSelect(day.value);
@@ -2118,13 +2043,11 @@ function RlsPickerMonthElement({ month, onSelect, disabled }) {
             setLabel(MONTH_NAMES(month.value));
         });
     }, []);
-    const className = useMemo(() => {
-        return renderClassStatus('rls-picker-month__component', {
-            disabled: month.disabled || disabled,
-            focused: month.focused,
-            selected: month.selected
-        });
-    }, [month.disabled, month.focused, month.selected, disabled]);
+    const className = renderClassStatus('rls-picker-month__component', {
+        disabled: month.disabled || disabled,
+        focused: month.focused,
+        selected: month.selected
+    });
     const onClick = useCallback(() => {
         if (valueIsDefined(month.value) && !month.disabled && !disabled) {
             onSelect(month.value);
@@ -2262,13 +2185,11 @@ function RlsPickerSelectorTitleComponent({ monthControl, type, yearControl, date
 const RlsPickerSelectorTitle = memo(RlsPickerSelectorTitleComponent);
 
 function RlsPickerYearElement({ onSelect, year, disabled }) {
-    const className = useMemo(() => {
-        return renderClassStatus('rls-picker-year__element', {
-            disabled: year.disabled || disabled,
-            focused: year.focused,
-            selected: year.selected
-        });
-    }, [year.disabled, year.focused, year.selected, disabled]);
+    const className = renderClassStatus('rls-picker-year__element', {
+        disabled: year.disabled || disabled,
+        focused: year.focused,
+        selected: year.selected
+    });
     const onClick = useCallback(() => {
         if (year.value && !year.disabled && !disabled) {
             onSelect(year.value);
@@ -2344,13 +2265,11 @@ function RlsSliderComponent({ children, className, disabled, formControl, identi
     const refTrack = useRef(null);
     const refTrackOn = useRef(null);
     const refThumb = useRef(null);
-    const classNameSlider = useMemo(() => {
-        return renderClassStatus('rls-slider', {
-            complet: valueSlider === maxValueSlider,
-            disabled: disabled,
-            empty: valueSlider === minValueSlider
-        }, className);
-    }, [valueSlider, minValueSlider, maxValueSlider, disabled]);
+    const classNameSlider = renderClassStatus('rls-slider', {
+        complet: valueSlider === maxValueSlider,
+        disabled: disabled,
+        empty: valueSlider === minValueSlider
+    }, className);
     useEffect(() => {
         const valueInitial = formControl?.value ?? value ?? 0;
         refThumb.current.style.left = `${rate}%`;
@@ -2380,12 +2299,10 @@ function RlsSliderComponent({ children, className, disabled, formControl, identi
 const RlsSlider = memo(RlsSliderComponent);
 
 function RlsTab({ onSelect, tab, value }) {
-    const className = useMemo(() => {
-        return renderClassStatus('rls-tabs__children', {
-            active: tab.value === value,
-            disabled: tab.disabled
-        });
-    }, [tab, value]);
+    const className = renderClassStatus('rls-tabs__children', {
+        active: tab.value === value,
+        disabled: tab.disabled
+    });
     const onClick = useCallback(() => {
         if (!tab.disabled) {
             onSelect(tab.value);
@@ -2417,9 +2334,7 @@ function RlsToolbarComponent({ actions, children, subtitle }) {
 const RlsToolbar = memo(RlsToolbarComponent);
 
 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]);
+    const classNameSheet = renderClassStatus('rls-bottom-sheet', { visible: controller?.visible ?? visible }, className);
     const onClickBackdrop = useCallback(() => {
         if (autoclose) {
             controller?.close();
@@ -2431,9 +2346,7 @@ function RlsBottomSheetComponent({ autoclose, children, className, controller, o
 const RlsBottomSheet = memo(RlsBottomSheetComponent);
 
 function RlsCardComponent({ children, className, outline, rlsTheme }) {
-    const classNameCard = useMemo(() => {
-        return renderClassStatus('rls-card', { outline }, className);
-    }, [outline, className]);
+    const classNameCard = renderClassStatus('rls-card', { 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);
@@ -2447,9 +2360,7 @@ class ConfirmationResult extends SealedPartial {
     }
 }
 function RlsConfirmationComponent({ approved, className, content, reject, rlsTheme, subtitle, title, visible }) {
-    const classConfirmation = useMemo(() => {
-        return renderClassStatus('rls-confirmation', { visible }, className);
-    }, [visible, className]);
+    const classConfirmation = renderClassStatus('rls-confirmation', { 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);
@@ -2479,7 +2390,7 @@ function useConfirmation() {
                             setVisible(false);
                             resolve(ConfirmationResult.reject());
                         },
-                        type: options.reject.type ?? 'outline',
+                        type: options.reject.type ?? 'flat',
                         disabled: options.reject.disabled,
                         identifier: options.reject.identifier,
                         rlsTheme: options.reject.rlsTheme
@@ -2520,12 +2431,10 @@ function useDatatable(table) {
 
 function RlsDatatableComponent({ children, footer, header, identifier, rlsTheme, resizable, summary, table, toolbar }) {
     const datatable = useDatatable(table);
-    const className = useMemo(() => {
-        return renderClassStatus('rls-datatable', {
-            resizable,
-            scrolleable: resizable && datatable?.scrolleable
-        });
-    }, [resizable, datatable.scrolleable]);
+    const className = renderClassStatus('rls-datatable', {
+        resizable,
+        scrolleable: 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 })] }));
 }
 const RlsDatatable = memo(RlsDatatableComponent);
@@ -2534,61 +2443,45 @@ function RlsDatatableHeaderComponent({ children, identifier, rlsTheme }) {
 }
 const RlsDatatableHeader = memo(RlsDatatableHeaderComponent);
 function RlsDatatableTitleComponent({ actions, children, className, control, identifier, rlsTheme, truncated }) {
-    const classNameTitle = useMemo(() => {
-        return renderClassStatus('rls-datatable__title', { actions, control, truncated }, className);
-    }, [className, truncated, control, actions]);
+    const classNameTitle = renderClassStatus('rls-datatable__title', { actions, control, truncated }, className);
     return (jsxRuntimeExports.jsx("th", { id: identifier, className: classNameTitle, "rls-theme": rlsTheme, children: children }));
 }
 const RlsDatatableTitle = memo(RlsDatatableTitleComponent);
 function RlsDatatableSubheaderComponent({ children, className, identifier, rlsTheme }) {
-    const classNameSubheader = useMemo(() => {
-        return renderClassStatus('rls-datatable__subheader', {}, className);
-    }, [className]);
+    const classNameSubheader = renderClassStatus('rls-datatable__subheader', {}, className);
     return (jsxRuntimeExports.jsx("tr", { id: identifier, className: classNameSubheader, "rls-theme": rlsTheme, children: children }));
 }
 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]);
+    const classNameRecord = renderClassStatus('rls-datatable__record', { error, info, truncated, success, warning }, className);
     return (jsxRuntimeExports.jsx("tr", { id: identifier, className: classNameRecord, "rls-theme": rlsTheme, children: children }));
 }
 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]);
+    const classNameTotals = renderClassStatus('rls-datatable__totals', { error, info, truncated, success, warning }, className);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: classNameTotals, "rls-theme": rlsTheme, children: children }));
 }
 const RlsDatatableTotals = memo(RlsDatatableTotalsComponent);
 function RlsDatatableCellComponent({ actions, children, className, control, identifier, rlsTheme, truncated }) {
-    const classNameCell = useMemo(() => {
-        return renderClassStatus('rls-datatable__cell', { actions, control, truncated }, className);
-    }, [className, truncated, control, actions]);
+    const classNameCell = renderClassStatus('rls-datatable__cell', { actions, control, truncated }, className);
     return (jsxRuntimeExports.jsx("td", { id: identifier, className: classNameCell, "rls-theme": rlsTheme, children: children }));
 }
 const RlsDatatableCell = memo(RlsDatatableCellComponent);
 function RlsDatatableDataComponent({ actions, children, className, control, identifier, truncated }) {
-    const classNameData = useMemo(() => {
-        return renderClassStatus('rls-datatable__data', { actions, control, truncated }, className);
-    }, [className, truncated, control, actions]);
+    const classNameData = renderClassStatus('rls-datatable__data', { actions, control, truncated }, className);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: classNameData, children: children }));
 }
 const RlsDatatableData = memo(RlsDatatableDataComponent);
 function RlsDatatableFloatingComponent({ children, className, identifier, invested, rlsTheme }) {
-    const classNameFloating = useMemo(() => {
-        return renderClassStatus('rls-datatable__floating', { invested }, className);
-    }, [className, invested]);
+    const classNameFloating = renderClassStatus('rls-datatable__floating', { invested }, className);
     return (jsxRuntimeExports.jsx("td", { id: identifier, className: classNameFloating, "rls-theme": rlsTheme, children: children }));
 }
 const RlsDatatableFloating = memo(RlsDatatableFloatingComponent);
 
 function RlsDropdownComponent({ children, controller, rlsTheme }) {
-    const className = useMemo(() => {
-        return renderClassStatus('rls-dropdown', {
-            visible: controller.visible
-        });
-    }, [controller.visible]);
+    const className = renderClassStatus('rls-dropdown', {
+        visible: controller.visible
+    });
     useEffect(() => {
         function onCloseDropdown({ target }) {
             if (!controller.component.current.contains(target)) {
@@ -2926,22 +2819,13 @@ function RlsFieldAutocompleteTemplateComponent(props) {
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
-    const className = useMemo(() => {
-        return renderClassStatus('rls-field-box', {
-            focused: autocomplete.focused && !disabled,
-            error: formControl?.wrong,
-            disabled,
-            readonly: props.readOnly,
-            selected: !!autocomplete.value
-        }, `rls-field-list rls-field-autocomplete ${props.className ?? ''}`);
-    }, [
-        formControl?.wrong,
-        autocomplete.value,
-        autocomplete.focused,
-        props.className,
-        props.readOnly,
-        disabled
-    ]);
+    const className = renderClassStatus('rls-field-box', {
+        focused: autocomplete.focused && !disabled,
+        error: formControl?.wrong,
+        disabled,
+        readonly: props.readOnly,
+        selected: !!autocomplete.value
+    }, `rls-field-list rls-field-autocomplete ${props.className ?? ''}`);
     const onClickPattern = useCallback(() => {
         onSearch?.(autocomplete.pattern);
     }, [onSearch, autocomplete.pattern]);
@@ -2983,9 +2867,7 @@ function RlsFieldAutocompleteComponent(props) {
 const RlsFieldAutocomplete = memo(RlsFieldAutocompleteComponent);
 
 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]);
+    const classNameModal = renderClassStatus('rls-modal', { visible: controller?.visible ?? visible }, className);
     const onClickBackdrop = useCallback(() => {
         if (autoclose) {
             controller?.close();
@@ -3056,26 +2938,18 @@ function RlsPickerClockComponent({ formControl, onListener, rlsTheme, time }) {
     const minuteFormat = useMemo(() => {
         return formatTime(minute);
     }, [minute]);
-    const classNameHour = useMemo(() => {
-        return renderClassStatus('rls-picker-clock__title__value', {
-            active: selectionIsHours
-        });
-    }, [selectionIsHours]);
-    const classNameMinute = useMemo(() => {
-        return renderClassStatus('rls-picker-clock__title__value', {
-            active: !selectionIsHours
-        });
-    }, [selectionIsHours]);
-    const classNameAM = useMemo(() => {
-        return renderClassStatus('rls-picker-clock__zone__value', {
-            active: !zoneIsPM
-        });
-    }, [zoneIsPM]);
-    const classNamePM = useMemo(() => {
-        return renderClassStatus('rls-picker-clock__zone__value', {
-            active: zoneIsPM
-        });
-    }, [zoneIsPM]);
+    const classNameHour = renderClassStatus('rls-picker-clock__title__value', {
+        active: selectionIsHours
+    });
+    const classNameMinute = renderClassStatus('rls-picker-clock__title__value', {
+        active: !selectionIsHours
+    });
+    const classNameAM = renderClassStatus('rls-picker-clock__zone__value', {
+        active: !zoneIsPM
+    });
+    const classNamePM = renderClassStatus('rls-picker-clock__zone__value', {
+        active: zoneIsPM
+    });
     const refreshClockHour = useEffectEvent(() => {
         refreshClock(hour > 12 ? hour - 12 : hour);
     });
@@ -3213,7 +3087,7 @@ function RlsPickerClockComponent({ formControl, onListener, rlsTheme, time }) {
                                         transform: `translate(${DIAL_RADIUS}rem, ${DIAL_RADIUS}rem)`
                                     }, children: [jsxRuntimeExports.jsx("line", { ref: lineElement, className: "rls-picker-clock__canvas__line", x1: "-1", y1: "-1" }), jsxRuntimeExports.jsx("circle", { ref: centerElement, className: "rls-picker-clock__canvas__center", r: "4", cx: "-1", cy: "-1" }), jsxRuntimeExports.jsx("circle", { ref: indicatorElement, className: "rls-picker-clock__canvas__indicator", r: `${TICK_RADIUS}rem` }), jsxRuntimeExports.jsx("circle", { ref: pointElement, className: "rls-picker-clock__canvas__point", r: "3.5" })] }) }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__hours", children: CLOCK_VALUES.map((value) => {
                                 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 }) })] })] }));
+                            }) })] }) }), 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: "raised", onClick: onSelect, children: labels.timeActionSelect }) })] })] }));
 }
 const RlsPickerClock = memo(RlsPickerClockComponent);
 
@@ -3232,12 +3106,10 @@ function RlsFieldClockComponent({ children, disabled: disabledProps, formControl
     const disabled = useMemo(() => {
         return formControl?.disabled || disabledProps;
     }, [formControl?.disabled, disabledProps]);
-    const className = useMemo(() => {
-        return renderClassStatus('rls-field-box', {
-            disabled,
-            readonly: readOnly
-        });
-    }, [disabled, readOnly]);
+    const className = renderClassStatus('rls-field-box', {
+        disabled,
+        readonly: readOnly
+    });
     const timeValue = useMemo(() => {
         return formControl ? formControl.value : value;
     }, [formControl?.value, value]);
@@ -3273,7 +3145,7 @@ function RlsFieldClockComponent({ children, disabled: disabledProps, formControl
         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(RlsModalClock, { visible: modalIsVisible, time: time, disabled: disabled, onClose: onCloseModal, rlsTheme: rlsTheme })] }));
+    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, formControl: formControl, time: time, disabled: disabled, onClose: onCloseModal, rlsTheme: rlsTheme })] }));
 }
 const RlsFieldClock = memo(RlsFieldClockComponent);
 
@@ -3485,7 +3357,7 @@ function RlsPickerColorComponent({ color, formControl, onListener, rlsTheme }) {
     return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-color", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-color__preview", children: jsxRuntimeExports.jsx("div", { ref: canvasRef, className: "rls-picker-color__canvas", style: canvasStyle, "data-slider": "canvas", onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onInactiveSelection, onMouseLeave: onInactiveSelection, onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onInactiveSelection, children: jsxRuntimeExports.jsx("div", { className: "rls-picker-color__indicator", style: {
                             left: indicatorPosition.left,
                             top: indicatorPosition.top
-                        }, children: jsxRuntimeExports.jsx("div", { className: "rls-picker-color__indicator__circle", style: { backgroundColor: hexColor } }) }) }) }), jsxRuntimeExports.jsxs("div", { className: "rls-picker-color__controls", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-color__slider", children: jsxRuntimeExports.jsx("div", { ref: hueRef, className: "rls-picker-color__slider__track", style: hueSliderStyle, "data-slider": "hue", onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onInactiveSelection, onMouseLeave: onInactiveSelection, onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onInactiveSelection, children: jsxRuntimeExports.jsx("div", { className: "rls-picker-color__slider__thumb", style: hueIndicatorStyle }) }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-color__slider", children: jsxRuntimeExports.jsx("div", { ref: alphaRef, className: "rls-picker-color__slider__track rls-picker-color__slider__track--alpha", style: alphaSliderStyle, "data-slider": "alpha", onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onInactiveSelection, onMouseLeave: onInactiveSelection, onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onInactiveSelection, children: jsxRuntimeExports.jsx("div", { className: "rls-picker-color__slider__thumb", style: alphaIndicatorStyle }) }) })] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-color__footer", children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-color__hex", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-color__hex__swatch", style: { backgroundColor: hexColor } }), jsxRuntimeExports.jsx("span", { className: "rls-picker-color__hex__prefix", children: "#" }), jsxRuntimeExports.jsx("input", { className: "rls-picker-color__hex__input", type: "text", maxLength: 6, value: hexValue, onChange: onHexInputChange, onFocus: onHexFocus, onBlur: onHexBlur, onKeyDown: onHexKeyDown })] }) }), jsxRuntimeExports.jsxs("div", { className: "rls-picker-color__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-color__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", onClick: onCancel, children: labels.colorActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-color__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.colorActionSelect }) })] })] }));
+                        }, 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: "raised", onClick: onSelect, children: labels.colorActionSelect }) })] })] }));
 }
 const RlsPickerColor = memo(RlsPickerColorComponent);
 
@@ -3498,12 +3370,10 @@ function RlsFieldColorComponent({ children, color, disabled: disabledProps, form
     const disabled = useMemo(() => {
         return formControl?.disabled || disabledProps;
     }, [formControl?.disabled, disabledProps]);
-    const className = useMemo(() => {
-        return renderClassStatus('rls-field-box', {
-            disabled,
-            readonly: readOnly
-        });
-    }, [disabled, readOnly]);
+    const className = renderClassStatus('rls-field-box', {
+        disabled,
+        readonly: readOnly
+    });
     const displayHex = useMemo(() => {
         const hex = colorValue && hexIsValid(colorValue) ? colorValue : '';
         return normalizeHex(hex);
@@ -3534,7 +3404,7 @@ function RlsFieldColorComponent({ children, color, disabled: disabledProps, form
         formControl?.touch();
         setModalIsVisible(false);
     }, [formControl, onChange]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-color", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [displayHex && (jsxRuntimeExports.jsx("div", { className: "rls-field-color__swatch", style: { backgroundColor: displayHex } })), jsxRuntimeExports.jsx("input", { className: "rls-field-color__control", type: "text", value: displayHex, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: colorValue ? 'trash-2' : 'color-palette', onClick: onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-color-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerColor, { formControl: formControl, color: color, disabled: disabled, onListener: onListener }) })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-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-modal-color", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerColor, { formControl: formControl, color: color, disabled: disabled, onListener: onListener }) })] }));
 }
 const RlsFieldColor = memo(RlsFieldColorComponent);
 
@@ -3559,13 +3429,11 @@ function RlsPickerDateComponent({ automatic, date, disabled, formControl, maxDat
     const value = useMemo(() => {
         return new Date(yearControl.value, monthControl.value, dayControl.value);
     }, [yearControl.value, monthControl.value, dayControl.value]);
-    const classNameComponent = useMemo(() => {
-        return renderClassStatus('rls-picker-date__component', {
-            day: visibility === 'DAY',
-            month: visibility === 'MONTH',
-            year: visibility === 'YEAR'
-        });
-    }, [visibility]);
+    const classNameComponent = renderClassStatus('rls-picker-date__component', {
+        day: visibility === 'DAY',
+        month: visibility === 'MONTH',
+        year: visibility === 'YEAR'
+    });
     const title = useMemo(() => {
         return dateFormatTemplate(value, DATE_FORMAT_TITLE);
     }, [value]);
@@ -3619,7 +3487,7 @@ function RlsPickerDateComponent({ automatic, date, disabled, formControl, maxDat
             value: value
         });
     }, [formControl, value, onListener]);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__header", children: [jsxRuntimeExports.jsx(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityTitle }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: title }) })] }), jsxRuntimeExports.jsxs("div", { className: classNameComponent, children: [jsxRuntimeExports.jsx(RlsPickerDay, { formControl: dayControl, date: value, month: monthControl.value, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, date: value, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), !automatic && (jsxRuntimeExports.jsx("div", { className: "rls-picker-date__footer", children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", onClick: onCancel, children: labels.dateActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--today", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "calendar", onClick: onToday, disabled: itIsDisabledToday }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.dateActionSelect }) })] }) }))] }));
+    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: "raised", onClick: onSelect, children: labels.dateActionSelect }) })] }) }))] }));
 }
 const RlsPickerDate = memo(RlsPickerDateComponent);
 
@@ -3633,18 +3501,16 @@ function RlsModalDateComponent({ automatic, controller, date, disabled, formCont
 const RlsModalDate = memo(RlsModalDateComponent);
 
 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 today = useMemo(() => new Date(), []);
     const [value, setValue] = useState(formControl?.value ?? valueInitial);
     const [modalIsVisible, setModalIsVisible] = useState(false);
     const disabled = useMemo(() => {
         return formControl?.disabled || disabledProps;
     }, [formControl?.disabled, disabledProps]);
-    const className = useMemo(() => {
-        return renderClassStatus('rls-field-box', {
-            disabled,
-            readonly: readOnly
-        });
-    }, [disabled, readOnly]);
+    const className = renderClassStatus('rls-field-box', {
+        disabled,
+        readonly: readOnly
+    });
     const dateValue = useMemo(() => {
         return formControl ? formControl.value : value;
     }, [formControl?.value, value]);
@@ -3658,7 +3524,7 @@ function RlsFieldDateComponent({ children, date, disabled: disabledProps, formCo
     }, [dateValue, format]);
     useEffect(() => {
         const dateSecure = verifyDateRange({
-            date: formControl?.value ?? date ?? today.current,
+            date: formControl?.value ?? date ?? today,
             minDate,
             maxDate
         });
@@ -3691,7 +3557,7 @@ function RlsFieldDateComponent({ children, date, disabled: disabledProps, formCo
         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(RlsModalDate, { visible: modalIsVisible, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onClose: onCloseModal, rlsTheme: rlsTheme })] }));
+    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, formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onClose: onCloseModal, rlsTheme: rlsTheme })] }));
 }
 const RlsFieldDate = memo(RlsFieldDateComponent);
 
@@ -3725,16 +3591,14 @@ function RlsPickerDateRangeComponent({ automatic, date: datePicker, disabled, fo
         }
         return value;
     }, [_date, yearControl.value, monthControl.value]);
-    const classNameComponent = useMemo(() => {
-        return renderClassStatus('rls-picker-date-range__component', {
-            day: visibility === 'DAY',
-            month: visibility === 'MONTH',
-            year: visibility === 'YEAR'
-        });
-    }, [visibility]);
-    const classNameFooter = useMemo(() => {
-        return renderClassStatus('rls-picker-date-range__footer', { automatic });
-    }, [automatic]);
+    const classNameComponent = renderClassStatus('rls-picker-date-range__component', {
+        day: visibility === 'DAY',
+        month: visibility === 'MONTH',
+        year: visibility === 'YEAR'
+    });
+    const classNameFooter = renderClassStatus('rls-picker-date-range__footer', {
+        automatic
+    });
     const title = useMemo(() => rangeFormatTemplate(value), [value]);
     useEffect(() => {
         return i18nSubscribe(() => {
@@ -3765,7 +3629,7 @@ function RlsPickerDateRangeComponent({ automatic, date: datePicker, disabled, fo
         formControl?.setValue(value);
         onListener?.({ event: PickerListenerEvent.Select, value });
     }, [formControl, value, onListener]);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range__header", children: [jsxRuntimeExports.jsx(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: visibility === 'MONTH' ? 'year' : 'month', onClick: onVisibilityTitle }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__title", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: title }) })] }), jsxRuntimeExports.jsxs("div", { className: classNameComponent, children: [jsxRuntimeExports.jsx(RlsPickerDayRange, { formControl: rangeControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), jsxRuntimeExports.jsx("div", { className: classNameFooter, children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", onClick: onCancel, children: labels.dateActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.dateActionSelect }) })] }) })] }));
+    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: "raised", onClick: onSelect, children: labels.dateActionSelect }) })] }) })] }));
 }
 const RlsPickerDateRange = memo(RlsPickerDateRangeComponent);
 
@@ -3785,12 +3649,10 @@ function RlsFieldDateRangeComponent({ children, date, disabled: disabledProps, f
     const disabled = useMemo(() => {
         return formControl?.disabled || disabledProps;
     }, [formControl?.disabled, disabledProps]);
-    const className = useMemo(() => {
-        return renderClassStatus('rls-field-box', {
-            disabled,
-            readonly: readOnly
-        });
-    }, [disabled, readOnly]);
+    const className = renderClassStatus('rls-field-box', {
+        disabled,
+        readonly: readOnly
+    });
     const dateRangeValue = useMemo(() => {
         return formControl ? formControl.value : value;
     }, [formControl?.value, value]);
@@ -3826,7 +3688,7 @@ function RlsFieldDateRangeComponent({ children, date, disabled: disabledProps, f
         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(RlsModalDateRange, { visible: modalIsVisible, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onClose: onCloseModal, rlsTheme: rlsTheme })] }));
+    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, formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onClose: onCloseModal, rlsTheme: rlsTheme })] }));
 }
 const RlsFieldDateRange = memo(RlsFieldDateRangeComponent);
 
@@ -3968,20 +3830,12 @@ function RlsFieldListInner({ render, suggestions, action, children, formControl,
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
-    const className = useMemo(() => {
-        return renderClassStatus('rls-field-box', {
-            focused: fieldList.listIsVisible && !disabled,
-            error: formControl?.wrong,
-            disabled,
-            readonly: props.readOnly
-        }, `rls-field-list rls-field-list__multi ${props.className ?? ''}`);
-    }, [
-        formControl?.wrong,
-        fieldList.listIsVisible,
-        props.className,
-        props.readOnly,
-        disabled
-    ]);
+    const className = renderClassStatus('rls-field-box', {
+        focused: fieldList.listIsVisible && !disabled,
+        error: formControl?.wrong,
+        disabled,
+        readonly: props.readOnly
+    }, `rls-field-list rls-field-list__multi ${props.className ?? ''}`);
     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 })] }));
 }
@@ -4111,20 +3965,12 @@ function RlsFieldSelectTemplateComponent(props) {
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
-    const className = useMemo(() => {
-        return renderClassStatus('rls-field-box', {
-            focused: select.focused && !disabled,
-            error: formControl?.wrong,
-            disabled: disabled,
-            readonly: props.readOnly
-        }, `rls-field-list rls-field-select ${props.className ?? ''}`);
-    }, [
-        formControl?.wrong,
-        select.focused,
-        props.className,
-        props.readOnly,
-        disabled
-    ]);
+    const className = renderClassStatus('rls-field-box', {
+        focused: select.focused && !disabled,
+        error: formControl?.wrong,
+        disabled: disabled,
+        readonly: props.readOnly
+    }, `rls-field-list rls-field-select ${props.className ?? ''}`);
     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 })] }));
 }
 const RlsFieldSelectTemplate = memo(RlsFieldSelectTemplateComponent);
@@ -4135,9 +3981,7 @@ function RlsFieldSelectComponent(props) {
 const RlsFieldSelect = memo(RlsFieldSelectComponent);
 
 function RlsFormNavigationComponent({ children, className, controller, visible, rlsTheme }) {
-    const classNameForm = useMemo(() => {
-        return renderClassStatus('rls-form-navigation', { visible: controller?.visible ?? visible }, className);
-    }, [className, visible, controller?.visible]);
+    const classNameForm = renderClassStatus('rls-form-navigation', { visible: controller?.visible ?? visible }, className);
     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);
@@ -4585,9 +4429,7 @@ function RlsImageChooserComponent(props) {
 const RlsImageChooser = memo(RlsImageChooserComponent);
 
 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]);
+    const classNameModal = renderClassStatus('rls-modal-sheet', { visible: controller?.visible ?? visible }, className);
     const onClickBackdrop = useCallback(() => {
         if (autoclose) {
             controller?.close();
@@ -4605,9 +4447,7 @@ function generateId() {
     return `rls-notification-${++_id}`;
 }
 function RlsNotification({ content, icon, onClose, rlsTheme, title, visible }) {
-    const className = useMemo(() => {
-        return renderClassStatus('rls-notification', { visible });
-    }, [visible]);
+    const className = renderClassStatus('rls-notification', { visible });
     return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [icon && (jsxRuntimeExports.jsx("div", { className: "rls-notification__avatar", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })), jsxRuntimeExports.jsxs("div", { className: "rls-notification__component", children: [jsxRuntimeExports.jsxs("div", { className: "rls-notification__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-notification__title", children: title }), jsxRuntimeExports.jsx("button", { onClick: onClose, children: jsxRuntimeExports.jsx(RlsIcon, { value: "close" }) })] }), jsxRuntimeExports.jsx("div", { className: "rls-notification__content", children: content })] })] }));
 }
 function useNotifications() {
@@ -4638,14 +4478,24 @@ function useNotifications() {
         const duration = config.duration ?? DURATION_DEFAULT;
         setNotifications((notifications) => [
             ...notifications,
-            { id, config, visible: true }
+            { id, config, visible: false }
         ]);
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                setNotifications((notifications) => notifications.map((notification) => notification.id === id
+                    ? { ...notification, visible: true }
+                    : notification));
+            });
+        });
         const timer = setTimeout(() => {
             remove(id);
         }, duration);
         timersRef.current.set(id, timer);
     }, [remove]);
-    const RlsNotifications = ReactDOM.createPortal(jsxRuntimeExports.jsx("div", { className: "rls-notifications", children: notifications.map((notification) => (jsxRuntimeExports.jsx(RlsNotification, { ...notification.config, visible: notification.visible, onClose: () => remove(notification.id) }, notification.id))) }), document.body);
+    const className = renderClassStatus('rls-notifications', {
+        visible: notifications.length > 0
+    });
+    const RlsNotifications = ReactDOM.createPortal(jsxRuntimeExports.jsx("div", { className: className, children: notifications.map((notification) => (jsxRuntimeExports.jsx(RlsNotification, { ...notification.config, visible: notification.visible, onClose: () => remove(notification.id) }, notification.id))) }), document.body);
     return {
         RlsNotifications,
         notify
@@ -4668,9 +4518,7 @@ function calculateDuration({ length }) {
     return duration + DURATION_RESET;
 }
 function RlsSnackbarComponent({ content, onClose, icon, rlsTheme, title, visible }) {
-    const className = useMemo(() => {
-        return renderClassStatus('rls-snackbar', { visible });
-    }, [visible]);
+    const className = renderClassStatus('rls-snackbar', { 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);
@@ -4733,13 +4581,11 @@ function RlsApplication({ children }) {
     const [navbarInApp, setNavbarInApp] = useState(false);
     const [navbarIsCondense, setNavbarIsCondense] = useState(false);
     const [appIsMobile, setIsMobile] = useState(false);
-    const className = useMemo(() => {
-        return renderClassStatus('rls-app__body', {
-            mobile: appIsMobile,
-            'navbar-snackbar': navbarInApp,
-            'navbar-condense': navbarIsCondense
-        });
-    }, [appIsMobile, navbarInApp, navbarIsCondense]);
+    const className = renderClassStatus('rls-app__body', {
+        mobile: appIsMobile,
+        'navbar-snackbar': navbarInApp,
+        'navbar-condense': navbarIsCondense
+    });
     const state = useMemo(() => ({
         confirmation,
         notify,
@@ -4754,7 +4600,7 @@ function RlsApplication({ children }) {
 const DEFAULT_DESIGN_SYSTEM = 'bordered';
 
 const DESIGN_SYSTEM_PREFIX = 'rls-design-system';
-const DESIGN_SYSTEMS = ['bordered', 'filled'];
+const DESIGN_SYSTEMS = ['bordered', 'filled', 'gradient'];
 function designSystemClass(designSystem) {
     return `${DESIGN_SYSTEM_PREFIX}-${designSystem}`;
 }