@rolster/react-components 19.12.2 → 19.14.0

package/dist/es/index.mjs

@@ -456,16 +456,16 @@ function getCharClass(char) {
         ? `${className}__pointer`
         : `${className}__char`;
 }
-function RlsTabularTextComponent({ className, value }) {
+function RlsTabularTextComponent({ className, rlsSize, 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 = renderClassStatus('rls-tabular-text', {}, className);
-    return jsxRuntimeExports.jsx("div", { className: _className, children: codes });
+    return (jsxRuntimeExports.jsx("div", { className: _className, "rls-size": rlsSize, children: codes }));
 }
 const RlsTabularText = memo(RlsTabularTextComponent);
 
-function RlsAmountComponent({ value, className, decimals, rlsTheme, symbol }) {
+function RlsAmountComponent({ value, className, decimals, rlsSize, rlsTheme, symbol }) {
     const classNameAmount = renderClassStatus('rls-amount', {}, className);
     const { decimal, integer } = useMemo(() => {
         const currency = currencyFormat({ value, decimals });
@@ -478,7 +478,7 @@ function RlsAmountComponent({ value, className, decimals, rlsTheme, symbol }) {
             decimal: currencySplit[1] || ''
         };
     }, [value, decimals]);
-    return (jsxRuntimeExports.jsxs("div", { className: classNameAmount, "rls-theme": rlsTheme, children: [symbol && jsxRuntimeExports.jsx("span", { className: "rls-amount__symbol", children: symbol }), jsxRuntimeExports.jsxs("div", { className: "rls-amount__content", children: [jsxRuntimeExports.jsx(RlsTabularText, { className: "rls-amount__integer", value: integer }), decimal && (jsxRuntimeExports.jsx(RlsTabularText, { className: "rls-amount__decimal", value: decimal }))] })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: classNameAmount, "rls-size": rlsSize, "rls-theme": rlsTheme, children: [symbol && jsxRuntimeExports.jsx("span", { className: "rls-amount__symbol", children: symbol }), jsxRuntimeExports.jsxs("div", { className: "rls-amount__content", children: [jsxRuntimeExports.jsx(RlsTabularText, { className: "rls-amount__integer", value: integer }), decimal && (jsxRuntimeExports.jsx(RlsTabularText, { className: "rls-amount__decimal", value: decimal }))] })] }));
 }
 const RlsAmount = memo(RlsAmountComponent);
 
@@ -495,7 +495,7 @@ function writeAreaValue(element, valueArea) {
     element.value = valueArea;
     element.setSelectionRange(caret, caret);
 }
-function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier, maxLength, maxRows, minRows, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, resize = 'vertical', value }) {
+function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier, maxLength, maxRows, minRows, rlsSize, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, resize = 'vertical', value }) {
     const valueInitial = String(formControl?.value ?? value ?? '');
     const rowsMin = minRows ?? AREA_TEXT_MIN_ROWS;
     const rowsMax = Math.max(maxRows ?? AREA_TEXT_MAX_ROWS, rowsMin);
@@ -612,24 +612,24 @@ function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier,
         readonly: readOnly,
         resizable: resize !== 'none' && !disabledArea && !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: disabledArea, readOnly: readOnly, maxLength: maxLength, rows: rowsMin, style: { resize }, onFocus: onFocusArea, onBlur: onBlurArea, onChange: onChangeArea, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd, onKeyDown: onKeyDownArea, onKeyUp: onKeyUpArea, value: valueArea }), jsxRuntimeExports.jsx("span", { className: "rls-area-text__value", "aria-hidden": "true", children: valueArea })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-size": rlsSize, children: [jsxRuntimeExports.jsx("textarea", { ref: areaRef, className: "rls-area-text__component", autoComplete: autoComplete ?? 'off', placeholder: placeholder, disabled: disabledArea, readOnly: readOnly, maxLength: maxLength, rows: rowsMin, style: { resize }, onFocus: onFocusArea, onBlur: onBlurArea, onChange: onChangeArea, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd, onKeyDown: onKeyDownArea, onKeyUp: onKeyUpArea, value: valueArea }), jsxRuntimeExports.jsx("span", { className: "rls-area-text__value", "aria-hidden": "true", children: valueArea })] }));
 }
 const RlsAreaText = memo(RlsAreaTextComponent);
 
-function RlsAvatarComponent({ children, contrasted, rounded, skeleton, transparent, rlsTheme }) {
+function RlsAvatarComponent({ children, contrasted, rlsSize, rounded, skeleton, transparent, rlsTheme }) {
     const className = renderClassStatus('rls-avatar', {
         contrasted,
         rounded,
         skeleton,
         transparent
     });
-    return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: children }));
+    return (jsxRuntimeExports.jsx("div", { className: className, "rls-size": rlsSize, "rls-theme": rlsTheme, children: children }));
 }
 const RlsAvatar = memo(RlsAvatarComponent);
 
-function RlsBadgeComponent({ children, contrasted, rlsTheme }) {
+function RlsBadgeComponent({ children, contrasted, rlsSize, rlsTheme }) {
     const className = renderClassStatus('rls-badge', { contrasted });
-    return (jsxRuntimeExports.jsx("span", { className: className, "rls-theme": rlsTheme, children: children }));
+    return (jsxRuntimeExports.jsx("span", { className: className, "rls-size": rlsSize, "rls-theme": rlsTheme, children: children }));
 }
 const RlsBadge = memo(RlsBadgeComponent);
 
@@ -639,40 +639,40 @@ function RlsBreadcrumbLabel({ label }) {
     });
     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 }) {
+function RlsBreadcrumbComponent({ labels, rlsSize }) {
     const children = useMemo(() => {
         return labels.map((label, index) => (jsxRuntimeExports.jsx(RlsBreadcrumbLabel, { label: label }, index)));
     }, [labels]);
-    return jsxRuntimeExports.jsx("div", { className: "rls-breadcrumb", children: children });
+    return (jsxRuntimeExports.jsx("div", { className: "rls-breadcrumb", "rls-size": rlsSize, children: children }));
 }
 const RlsBreadcrumb = memo(RlsBreadcrumbComponent);
 
-function RlsIconComponent({ value, className, rlsTheme, skeleton }) {
+function RlsIconComponent({ value, className, rlsSize, rlsTheme, 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}` }) }));
+    return (jsxRuntimeExports.jsx("div", { className: classNameIcon, "rls-size": rlsSize, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("i", { className: `rls-icon-${value}` }) }));
 }
 const RlsIcon = memo(RlsIconComponent);
 
-function RlsSpinnerComponent() {
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-spinner", children: [jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--1", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--2", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--3", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--4", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--5", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--6", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--7", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--8", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--9", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) })] }));
+function RlsSpinnerComponent({ rlsSize }) {
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-spinner", "rls-size": rlsSize, children: [jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--1", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--2", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--3", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--4", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--5", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--6", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--7", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--8", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--9", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) })] }));
 }
 const RlsSpinner = memo(RlsSpinnerComponent);
 
-function RlsButtonComponent({ type, children, disabled, identifier, onClick, prefixIcon, requesting, rlsTheme, suffixIcon }) {
+function RlsButtonComponent({ type, children, disabled, identifier, rlsSize, onClick, prefixIcon, requesting, rlsTheme, suffixIcon }) {
     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 })] }) }));
+    return (jsxRuntimeExports.jsx("button", { id: identifier, className: "rls-button", onClick: onClick, "rls-size": rlsSize, "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, badge, disabled, identifier, onClick, rlsTheme, tooltip, type }) {
+function RlsButtonActionComponent({ icon, badge, disabled, identifier, rlsSize, 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 }) }))] }));
+    return (jsxRuntimeExports.jsxs("button", { id: identifier, className: className, onClick: onClick, disabled: disabled, "rls-size": rlsSize, "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 }) {
+function RlsButtonIconComponent({ icon, className, disabled, rlsSize, onClick, 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 }) }));
+    return (jsxRuntimeExports.jsx("button", { className: classNameButton, onClick: onClick, disabled: disabled, "rls-size": rlsSize, children: !skeleton && jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }));
 }
 const RlsButtonIcon = memo(RlsButtonIconComponent);
 
@@ -690,7 +690,7 @@ function useFormSingleSelectionController({ disabled, formControl, onValue, valu
     return { checked, onSelect };
 }
 
-function RlsButtonOptionComponent({ icon, children, disabled, formControl, identifier, onClick, onValue, value }) {
+function RlsButtonOptionComponent({ icon, children, disabled, formControl, identifier, rlsSize, onClick, onValue, value }) {
     const { checked, onSelect } = useFormSingleSelectionController({
         disabled,
         formControl,
@@ -702,38 +702,38 @@ function RlsButtonOptionComponent({ icon, children, disabled, formControl, ident
         onSelect();
         onClick?.();
     }, [onSelect, onClick]);
-    return (jsxRuntimeExports.jsxs("button", { id: identifier, className: className, onClick: onAction, disabled: disabled, children: [jsxRuntimeExports.jsx(RlsIcon, { value: icon }), children] }));
+    return (jsxRuntimeExports.jsxs("button", { id: identifier, className: className, "rls-size": rlsSize, onClick: onAction, disabled: disabled, children: [jsxRuntimeExports.jsx(RlsIcon, { value: icon }), children] }));
 }
 const RlsButtonOption = memo(RlsButtonOptionComponent);
 
-function RlsCheckBoxComponent({ checked, disabled, identifier, onClick, rlsTheme }) {
+function RlsCheckBoxComponent({ checked, disabled, identifier, rlsSize, onClick, rlsTheme }) {
     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" }) }));
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: className, onClick: onClick, "rls-size": rlsSize, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx(RlsIcon, { value: "checkmark" }) }));
 }
 const RlsCheckBox = memo(RlsCheckBoxComponent);
-function RlsCheckBoxControlComponent({ formControl, disabled, identifier, rlsTheme }) {
+function RlsCheckBoxControlComponent({ formControl, disabled, identifier, rlsSize, rlsTheme }) {
     const onClick = useCallback(() => {
         formControl.setValue(!formControl.value);
     }, [formControl.value]);
-    return (jsxRuntimeExports.jsx(RlsCheckBox, { identifier: identifier, checked: !!formControl.value, disabled: disabled, onClick: onClick, rlsTheme: rlsTheme }));
+    return (jsxRuntimeExports.jsx(RlsCheckBox, { identifier: identifier, checked: !!formControl.value, disabled: disabled, onClick: onClick, rlsSize: rlsSize, rlsTheme: rlsTheme }));
 }
 const RlsCheckBoxControl = memo(RlsCheckBoxControlComponent);
 
-function RlsChipComponent({ children, className, contrasted, disabled, icon, identifier, onClick, onRemove, rlsTheme, selected }) {
+function RlsChipComponent({ children, className, contrasted, disabled, icon, identifier, rlsSize, onClick, onRemove, rlsTheme, selected }) {
     const classNameChip = renderClassStatus('rls-chip', { clickable: !!onClick && !disabled, contrasted, disabled, selected }, className);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: classNameChip, "rls-theme": rlsTheme, onClick: disabled ? undefined : onClick, children: [icon && jsxRuntimeExports.jsx(RlsIcon, { className: "rls-chip__icon", value: icon }), jsxRuntimeExports.jsx("span", { className: "rls-chip__description", children: children }), onRemove && !disabled && (jsxRuntimeExports.jsx("button", { className: "rls-chip__remove", type: "button", onClick: onRemove, children: jsxRuntimeExports.jsx(RlsIcon, { value: "close" }) }))] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: classNameChip, "rls-size": rlsSize, "rls-theme": rlsTheme, onClick: disabled ? undefined : onClick, children: [icon && jsxRuntimeExports.jsx(RlsIcon, { className: "rls-chip__icon", value: icon }), jsxRuntimeExports.jsx("span", { className: "rls-chip__description", children: children }), onRemove && !disabled && (jsxRuntimeExports.jsx("button", { className: "rls-chip__remove", type: "button", onClick: onRemove, children: jsxRuntimeExports.jsx(RlsIcon, { value: "close" }) }))] }));
 }
 const RlsChip = memo(RlsChipComponent);
 
-function RlsSkeletonComponent({ animation, rlsTheme }) {
+function RlsSkeletonComponent({ animation, rlsSize, rlsTheme }) {
     const className = renderClassStatus('rls-skeleton', {
         animation: animation !== 'shimmer' && animation
     });
-    return jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme });
+    return (jsxRuntimeExports.jsx("div", { className: className, "rls-size": rlsSize, "rls-theme": rlsTheme }));
 }
 const RlsSkeleton = memo(RlsSkeletonComponent);
 
-function RlsImageComponent({ src, rlsTheme }) {
+function RlsImageComponent({ src, rlsSize, rlsTheme }) {
     const [srcIsComplet, setSrcIsComplet] = useState(false);
     const refImage = useRef(null);
     const className = renderClassStatus('rls-image', { complet: srcIsComplet });
@@ -743,7 +743,7 @@ function RlsImageComponent({ src, rlsTheme }) {
     const onLoad = useCallback(() => {
         setSrcIsComplet(true);
     }, []);
-    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [!srcIsComplet && jsxRuntimeExports.jsx(RlsSkeleton, { rlsTheme: rlsTheme }), jsxRuntimeExports.jsx("img", { ref: refImage, src: src, onLoad: onLoad })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-size": rlsSize, "rls-theme": rlsTheme, children: [!srcIsComplet && jsxRuntimeExports.jsx(RlsSkeleton, { rlsTheme: rlsTheme }), jsxRuntimeExports.jsx("img", { ref: refImage, src: src, onLoad: onLoad })] }));
 }
 const RlsImage = memo(RlsImageComponent);
 
@@ -778,7 +778,7 @@ function writeInputValue(element, valueInput) {
         element.setSelectionRange(caret, caret);
     }
 }
-function RlsInputComponent({ children, decimals, disabled, formControl, identifier, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, type, value }) {
+function RlsInputComponent({ children, decimals, disabled, formControl, identifier, rlsSize, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, type, value }) {
     const [valueInput, setValueInput] = useState(() => valueToInput(formControl?.value ?? value));
     const [focused, setFocused] = useState(false);
     const composing = useRef(false);
@@ -846,11 +846,11 @@ function RlsInputComponent({ children, decimals, disabled, formControl, identifi
         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, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd, onKeyDown: onKeyDownInput, onKeyUp: onKeyUpInput, value: valueInput }), jsxRuntimeExports.jsx("span", { className: "rls-input__value", children: children })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-size": rlsSize, 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, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd, onKeyDown: onKeyDownInput, onKeyUp: onKeyUpInput, value: valueInput }), jsxRuntimeExports.jsx("span", { className: "rls-input__value", children: children })] }));
 }
 const RlsInput = memo(RlsInputComponent);
 
-function RlsInputCounterComponent({ className, disabled, formControl, identifier, max, min, onBlur, onFocus, onValue, readOnly, rlsTheme, step = 1, value: valueProp }) {
+function RlsInputCounterComponent({ className, disabled, formControl, identifier, max, min, rlsSize, onBlur, onFocus, onValue, readOnly, rlsTheme, step = 1, value: valueProp }) {
     const changeIsInternal = useRef(false);
     const [value, setValue] = useState(formControl?.value ?? valueProp ?? 0);
     const [focused, setFocused] = useState(false);
@@ -900,12 +900,12 @@ function RlsInputCounterComponent({ className, disabled, formControl, identifier
         formControl?.blur();
         onBlur?.();
     }, [formControl, onBlur]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: classNameCounter, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx(RlsButtonIcon, { className: "rls-input-counter__down", icon: "minus", onClick: onDecrement, disabled: _disabled || decrementIsAllowed }), jsxRuntimeExports.jsx("div", { className: "rls-input-counter__body", children: jsxRuntimeExports.jsx("input", { ref: formControl?.elementRef, className: "rls-input-counter__control", type: "text", inputMode: "numeric", value: value, disabled: _disabled, readOnly: readOnly, onChange: onChangeInput, onFocus: onFocusInput, onBlur: onBlurInput }) }), jsxRuntimeExports.jsx(RlsButtonIcon, { className: "rls-input-counter__up", icon: "plus", onClick: onIncrement, disabled: _disabled || incrementIsAllowed })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: classNameCounter, "rls-size": rlsSize, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx(RlsButtonIcon, { className: "rls-input-counter__down", icon: "minus", onClick: onDecrement, disabled: _disabled || decrementIsAllowed }), jsxRuntimeExports.jsx("div", { className: "rls-input-counter__body", children: jsxRuntimeExports.jsx("input", { ref: formControl?.elementRef, className: "rls-input-counter__control", type: "text", inputMode: "numeric", value: value, disabled: _disabled, readOnly: readOnly, onChange: onChangeInput, onFocus: onFocusInput, onBlur: onBlurInput }) }), jsxRuntimeExports.jsx(RlsButtonIcon, { className: "rls-input-counter__up", icon: "plus", onClick: onIncrement, disabled: _disabled || incrementIsAllowed })] }));
 }
 const RlsInputCounter = memo(RlsInputCounterComponent);
 
 function RlsInputDecimalComponent(props) {
-    const { decimals, formControl, identifier, onValue, symbol, value } = props;
+    const { decimals, formControl, identifier, rlsSize, onValue, symbol, value } = props;
     const [valueInput, setValueInput] = useState((formControl?.value ?? value ?? BigDecimal.zero()).rounded);
     const amount = useMemo(() => {
         return formControl?.value?.rounded ?? valueInput;
@@ -921,12 +921,12 @@ function RlsInputDecimalComponent(props) {
         onValue?.(valueDecimal);
     }, [formControl, onValue]);
     const decimalProps = { ...props, formControl: undefined };
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-decimal", children: jsxRuntimeExports.jsx(RlsInput, { ...decimalProps, type: "number", value: valueInput, onValue: onValueInput, children: jsxRuntimeExports.jsx(RlsAmount, { value: amount, symbol: symbol, decimals: decimals }) }) }));
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-decimal", "rls-size": rlsSize, children: jsxRuntimeExports.jsx(RlsInput, { ...decimalProps, type: "number", value: valueInput, onValue: onValueInput, children: jsxRuntimeExports.jsx(RlsAmount, { value: amount, symbol: symbol, decimals: decimals }) }) }));
 }
 const RlsInputDecimal = memo(RlsInputDecimalComponent);
 
 function RlsInputMoneyComponent(props) {
-    const { decimals, formControl, identifier, onValue, symbol, value } = props;
+    const { decimals, formControl, identifier, rlsSize, onValue, symbol, value } = props;
     const [valueInput, setValueInput] = useState(formControl?.value ?? value ?? 0);
     const onValueInput = useCallback((value) => {
         if (!formControl) {
@@ -934,12 +934,12 @@ function RlsInputMoneyComponent(props) {
         }
         onValue?.(value);
     }, [formControl, onValue]);
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-money", children: jsxRuntimeExports.jsx(RlsInput, { ...props, type: "number", value: valueInput, onValue: onValueInput, children: jsxRuntimeExports.jsx(RlsAmount, { value: formControl?.value ?? valueInput, symbol: symbol, decimals: decimals }) }) }));
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-money", "rls-size": rlsSize, children: jsxRuntimeExports.jsx(RlsInput, { ...props, type: "number", value: valueInput, onValue: onValueInput, children: jsxRuntimeExports.jsx(RlsAmount, { value: formControl?.value ?? valueInput, symbol: symbol, decimals: decimals }) }) }));
 }
 const RlsInputMoney = memo(RlsInputMoneyComponent);
 
 function RlsInputNumberComponent(props) {
-    const { formControl, identifier, onValue, value } = props;
+    const { formControl, identifier, rlsSize, onValue, value } = props;
     const [valueInput, setValueInput] = useState(formControl?.value ?? value ?? 0);
     const onValueInput = useCallback((value) => {
         if (!formControl) {
@@ -947,11 +947,11 @@ function RlsInputNumberComponent(props) {
         }
         onValue?.(value);
     }, [formControl, onValue]);
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-number", children: jsxRuntimeExports.jsx(RlsInput, { ...props, type: "number", value: valueInput, onValue: onValueInput, children: formControl?.value ?? valueInput }) }));
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-number", "rls-size": rlsSize, children: jsxRuntimeExports.jsx(RlsInput, { ...props, type: "number", value: valueInput, onValue: onValueInput, children: formControl?.value ?? valueInput }) }));
 }
 const RlsInputNumber = memo(RlsInputNumberComponent);
 
-function RlsInputPasswordComponent({ disabled, formControl, identifier, onEnter, onKeyDown, onKeyUp, onValue, placeholder, readOnly, type }) {
+function RlsInputPasswordComponent({ disabled, formControl, identifier, rlsSize, onEnter, onKeyDown, onKeyUp, onValue, placeholder, readOnly, type }) {
     const [focused, setFocused] = useState(false);
     const _onChange = useCallback((event) => {
         formControl?.setValue(event.target.value);
@@ -978,12 +978,12 @@ function RlsInputPasswordComponent({ disabled, formControl, identifier, onEnter,
         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 }) }));
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: className, "rls-size": rlsSize, children: jsxRuntimeExports.jsx("input", { className: "rls-input-password__component", autoComplete: "off", type: type ?? 'password', placeholder: placeholder, disabled: disabled, readOnly: readOnly, onFocus: _onFocus, onBlur: _onBlur, onChange: _onChange, onKeyDown: _onKeyDown, onKeyUp: _onKeyUp }) }));
 }
 const RlsInputPassword = memo(RlsInputPasswordComponent);
 
 function RlsInputPercentageComponent(props) {
-    const { formControl, identifier, onValue, value } = props;
+    const { formControl, identifier, rlsSize, onValue, value } = props;
     const [valueInput, setValueInput] = useState(formControl?.value ?? value ?? 0);
     const onValueInput = useCallback((value) => {
         if (!formControl) {
@@ -991,11 +991,11 @@ function RlsInputPercentageComponent(props) {
         }
         onValue?.(value);
     }, [formControl, onValue]);
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-percentage", children: jsxRuntimeExports.jsxs(RlsInput, { ...props, type: "number", value: valueInput, onValue: onValueInput, children: [formControl?.value ?? valueInput, "%"] }) }));
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-percentage", "rls-size": rlsSize, children: jsxRuntimeExports.jsxs(RlsInput, { ...props, type: "number", value: valueInput, onValue: onValueInput, children: [formControl?.value ?? valueInput, "%"] }) }));
 }
 const RlsInputPercentage = memo(RlsInputPercentageComponent);
 
-function RlsInputSearchComponent({ formControl, disabled, identifier, onEnter, onSearch, placeholder }) {
+function RlsInputSearchComponent({ formControl, disabled, identifier, rlsSize, onEnter, onSearch, placeholder }) {
     const [value, setValue] = useState('');
     const className = renderClassStatus('rls-input-search', { disabled });
     const onValue = useCallback((value) => {
@@ -1003,12 +1003,12 @@ function RlsInputSearchComponent({ formControl, disabled, identifier, onEnter, o
             setValue(() => value);
         }
     }, [formControl]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, children: [jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, placeholder: placeholder, onEnter: onEnter, onValue: onValue, disabled: disabled, children: formControl?.value ?? value }), onSearch && (jsxRuntimeExports.jsx(RlsButtonAction, { icon: "search", onClick: onSearch, disabled: disabled }))] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-size": rlsSize, children: [jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, placeholder: placeholder, rlsSize: rlsSize, onEnter: onEnter, onValue: onValue, disabled: disabled, children: formControl?.value ?? value }), onSearch && (jsxRuntimeExports.jsx(RlsButtonAction, { icon: "search", onClick: onSearch, disabled: disabled }))] }));
 }
 const RlsInputSearch = memo(RlsInputSearchComponent);
 
 function RlsInputTextComponent(props) {
-    const { formControl, identifier, onValue, value } = props;
+    const { formControl, identifier, rlsSize, onValue, value } = props;
     const [valueInput, setValueInput] = useState(formControl?.value ?? value ?? '');
     const onValueInput = useCallback((value) => {
         if (!formControl) {
@@ -1016,12 +1016,12 @@ function RlsInputTextComponent(props) {
         }
         onValue?.(value);
     }, [formControl, onValue]);
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-text", children: jsxRuntimeExports.jsx(RlsInput, { ...props, type: "text", value: valueInput, onValue: onValueInput, children: formControl?.value ?? valueInput }) }));
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-text", "rls-size": rlsSize, children: jsxRuntimeExports.jsx(RlsInput, { ...props, type: "text", value: valueInput, onValue: onValueInput, children: formControl?.value ?? valueInput }) }));
 }
 const RlsInputText = memo(RlsInputTextComponent);
 
-function RlsLabelComponent({ children, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("span", { className: "rls-label", "rls-theme": rlsTheme, children: children }));
+function RlsLabelComponent({ children, rlsSize, rlsTheme }) {
+    return (jsxRuntimeExports.jsx("span", { className: "rls-label", "rls-size": rlsSize, "rls-theme": rlsTheme, children: children }));
 }
 const RlsLabel = memo(RlsLabelComponent);
 
@@ -1408,7 +1408,7 @@ function setThemeAlias(source, theme = 'primary') {
 const DEFAULT_COLOR = '#1780e0';
 
 const CONTENT_BACKGROUND = '--pvt-content-background';
-function RlsLedComponent({ color, rlsTheme }) {
+function RlsLedComponent({ color, rlsSize, rlsTheme }) {
     const refLed = useRef(null);
     const refColor = useRef(undefined);
     useEffect(() => {
@@ -1421,66 +1421,66 @@ function RlsLedComponent({ color, rlsTheme }) {
             refLed.current?.style.setProperty(CONTENT_BACKGROUND, 'var(--rls-app-color-500)');
         }
     }, [color]);
-    return jsxRuntimeExports.jsx("div", { ref: refLed, className: "rls-led", "rls-theme": rlsTheme });
+    return (jsxRuntimeExports.jsx("div", { ref: refLed, className: "rls-led", "rls-size": rlsSize, "rls-theme": rlsTheme }));
 }
 const RlsLed = memo(RlsLedComponent);
 
-function RlsMessageIconComponent({ icon, children, rlsTheme }) {
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-message-icon", "rls-theme": rlsTheme, children: [icon && jsxRuntimeExports.jsx(RlsIcon, { value: icon }), jsxRuntimeExports.jsx("span", { className: "truncate", children: children })] }));
+function RlsMessageIconComponent({ icon, children, rlsSize, rlsTheme }) {
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-message-icon", "rls-size": rlsSize, "rls-theme": rlsTheme, children: [icon && jsxRuntimeExports.jsx(RlsIcon, { value: icon }), jsxRuntimeExports.jsx("span", { className: "truncate", children: children })] }));
 }
 const RlsMessageIcon = memo(RlsMessageIconComponent);
 
-function RlsPosterComponent({ children, contrasted, rlsTheme }) {
+function RlsPosterComponent({ children, contrasted, rlsSize, rlsTheme }) {
     const className = renderClassStatus('rls-poster', { contrasted });
-    return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: children }));
+    return (jsxRuntimeExports.jsx("div", { className: className, "rls-size": rlsSize, "rls-theme": rlsTheme, children: children }));
 }
 const RlsPoster = memo(RlsPosterComponent);
 
-function RlsProgressBarComponent({ indeterminate, percentage, rlsTheme }) {
+function RlsProgressBarComponent({ indeterminate, rlsSize, percentage, rlsTheme }) {
     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}%` } }) }));
+    return (jsxRuntimeExports.jsx("div", { className: className, "rls-size": rlsSize, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-progress-bar__component", style: { width: `${percentage ?? 0}%` } }) }));
 }
 const RlsProgressBar = memo(RlsProgressBarComponent);
 
-function RlsProgressCircularComponent({ rlsTheme }) {
-    return (jsxRuntimeExports.jsx("div", { className: "rls-progress-circular", "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("svg", { className: "rls-progress-circular__svg", viewBox: "0 0 36 36", children: jsxRuntimeExports.jsx("circle", { className: "rls-progress-circular__circle", cx: "18", cy: "18", r: "12" }) }) }));
+function RlsProgressCircularComponent({ rlsSize, rlsTheme }) {
+    return (jsxRuntimeExports.jsx("div", { className: "rls-progress-circular", "rls-size": rlsSize, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("svg", { className: "rls-progress-circular__svg", viewBox: "0 0 36 36", children: jsxRuntimeExports.jsx("circle", { className: "rls-progress-circular__circle", cx: "18", cy: "18", r: "12" }) }) }));
 }
 const RlsProgressCircular = memo(RlsProgressCircularComponent);
 
-function RlsRadioButtonComponent({ checked, disabled, identifier, rlsTheme, onClick }) {
+function RlsRadioButtonComponent({ checked, disabled, identifier, rlsSize, rlsTheme, onClick }) {
     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" }) }));
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: className, onClick: onClick, "rls-size": rlsSize, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-radiobutton__component" }) }));
 }
 const RlsRadioButton = memo(RlsRadioButtonComponent);
 
-function RlsSkeletonTextComponent({ active, animation, children, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("div", { className: "rls-skeleton-text", "rls-theme": rlsTheme, children: active ? (jsxRuntimeExports.jsx(RlsSkeleton, { animation: animation })) : (jsxRuntimeExports.jsx("div", { className: "rls-skeleton-text__value", children: children })) }));
+function RlsSkeletonTextComponent({ active, animation, children, rlsSize, rlsTheme }) {
+    return (jsxRuntimeExports.jsx("div", { className: "rls-skeleton-text", "rls-size": rlsSize, "rls-theme": rlsTheme, children: active ? (jsxRuntimeExports.jsx(RlsSkeleton, { animation: animation })) : (jsxRuntimeExports.jsx("div", { className: "rls-skeleton-text__value", children: children })) }));
 }
 const RlsSkeletonText = memo(RlsSkeletonTextComponent);
 
-function RlsSwapHoverComponent({ children, content, identifier, rlsTheme }) {
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-swap-hover", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-swap-hover__primary", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-swap-hover__secondary", children: content })] }));
+function RlsSwapHoverComponent({ children, content, identifier, rlsSize, rlsTheme }) {
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-swap-hover", "rls-size": rlsSize, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-swap-hover__primary", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-swap-hover__secondary", children: content })] }));
 }
 const RlsHoverSwap = memo(RlsSwapHoverComponent);
 
-function RlsSwitchComponent({ checked, capsule, disabled, identifier, onClick, rlsTheme }) {
+function RlsSwitchComponent({ checked, capsule, disabled, identifier, rlsSize, onClick, rlsTheme }) {
     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" }) }) }));
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: className, onClick: onClick, "rls-size": rlsSize, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-switch__component", children: jsxRuntimeExports.jsx("div", { className: "rls-switch__component__element" }) }) }));
 }
 const RlsSwitch = memo(RlsSwitchComponent);
-function RlsSwitchControlComponent({ formControl, disabled, identifier, rlsTheme }) {
+function RlsSwitchControlComponent({ formControl, disabled, identifier, rlsSize, rlsTheme }) {
     const onClick = useCallback(() => {
         formControl.setValue(!formControl.value);
     }, [formControl.value]);
-    return (jsxRuntimeExports.jsx(RlsSwitch, { identifier: identifier, checked: formControl.value, disabled: disabled, onClick: onClick, rlsTheme: rlsTheme }));
+    return (jsxRuntimeExports.jsx(RlsSwitch, { identifier: identifier, checked: formControl.value, disabled: disabled, onClick: onClick, rlsSize: rlsSize, rlsTheme: rlsTheme }));
 }
 const RlsSwitchControl = memo(RlsSwitchControlComponent);
 
-function RlsAccordionComponent({ bordered, children, className, disabled, identifier, onToggle, opened, rlsTheme, title }) {
+function RlsAccordionComponent({ bordered, children, className, disabled, identifier, rlsSize, onToggle, opened, rlsTheme, title }) {
     const [open, setOpen] = useState(opened);
     const [animating, setAnimating] = useState(false);
     const contentRef = useRef(null);
@@ -1529,13 +1529,13 @@ function RlsAccordionComponent({ bordered, children, className, disabled, identi
             setAnimating(false);
         }
     }, [open]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: classNameAccordion, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("button", { type: "button", className: "rls-accordion__header", "aria-expanded": open, disabled: disabled, onClick: onClickHeader, children: [jsxRuntimeExports.jsx("span", { className: "rls-accordion__title", children: title }), jsxRuntimeExports.jsx("span", { className: "rls-accordion__indicator", children: jsxRuntimeExports.jsx(RlsIcon, { value: "chevron-down" }) })] }), jsxRuntimeExports.jsx("div", { ref: contentRef, className: "rls-accordion__body", "aria-hidden": !open, onTransitionEnd: onTransitionEnd, children: jsxRuntimeExports.jsx("div", { className: "rls-accordion__content", children: children }) })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: classNameAccordion, "rls-size": rlsSize, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("button", { type: "button", className: "rls-accordion__header", "aria-expanded": open, disabled: disabled, onClick: onClickHeader, children: [jsxRuntimeExports.jsx("span", { className: "rls-accordion__title", children: title }), jsxRuntimeExports.jsx("span", { className: "rls-accordion__indicator", children: jsxRuntimeExports.jsx(RlsIcon, { value: "chevron-down" }) })] }), jsxRuntimeExports.jsx("div", { ref: contentRef, className: "rls-accordion__body", "aria-hidden": !open, onTransitionEnd: onTransitionEnd, children: jsxRuntimeExports.jsx("div", { className: "rls-accordion__content", children: children }) })] }));
 }
 const RlsAccordion = memo(RlsAccordionComponent);
 
-function RlsAlertComponent({ bordered, children, icon, identifier, rlsTheme }) {
+function RlsAlertComponent({ bordered, children, icon, identifier, rlsSize, rlsTheme }) {
     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 })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-size": rlsSize, "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);
 
@@ -1602,9 +1602,9 @@ function RlsTab({ disabled, onSelect, tab, value }) {
             onSelect(tab.value);
         }
     }, [disabled, tab.disabled, onSelect]);
-    return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { children: tab.label }) }));
+    return (jsxRuntimeExports.jsxs("div", { className: className, onClick: onClick, children: [jsxRuntimeExports.jsx("span", { children: tab.label }), tab.badge && (jsxRuntimeExports.jsx(RlsBadge, { rlsTheme: tab.badge.rlsTheme, contrasted: tab.badge.contrasted, children: tab.badge.label }))] }));
 }
-function RlsTabsComponent({ tabs, formControl, onValue, value, rlsTheme }) {
+function RlsTabsComponent({ tabs, formControl, rlsSize, onValue, value, rlsTheme }) {
     const [valueInternal, setValueInternal] = useState();
     const valueSelected = useMemo(() => {
         return formControl ? formControl.value : valueInternal;
@@ -1630,7 +1630,7 @@ function RlsTabsComponent({ tabs, formControl, onValue, value, rlsTheme }) {
             onSelect(initial.value);
         }
     }, [value, formControl?.value]);
-    return (jsxRuntimeExports.jsx("div", { className: "rls-tabs", "rls-theme": rlsTheme, children: tabs.map((tab, index) => {
+    return (jsxRuntimeExports.jsx("div", { className: "rls-tabs", "rls-size": rlsSize, "rls-theme": rlsTheme, children: tabs.map((tab, index) => {
             return (jsxRuntimeExports.jsx(RlsTab, { tab: tab, disabled: formControl?.disabled, value: valueSelected, onSelect: onSelect }, index));
         }) }));
 }
@@ -1642,7 +1642,7 @@ const LABELS = {
     dim: () => reactI18n('appThemeDim'),
     dark: () => reactI18n('appThemeDark')
 };
-function RlsAppThemeTabsComponent({ labels, onValue, rlsTheme, themes = APP_THEMES, value }) {
+function RlsAppThemeTabsComponent({ labels, rlsSize, onValue, rlsTheme, themes = APP_THEMES, value }) {
     const [appTheme, setAppThemeValue] = useState(() => value ?? getAppTheme());
     useEffect(() => {
         if (value !== undefined) {
@@ -1661,39 +1661,39 @@ function RlsAppThemeTabsComponent({ labels, onValue, rlsTheme, themes = APP_THEM
         setAppThemeValue(theme);
         onValue?.(theme);
     }, [onValue]);
-    return (jsxRuntimeExports.jsx(RlsTabs, { tabs: tabs, value: appTheme, onValue: onSelect, rlsTheme: rlsTheme }));
+    return (jsxRuntimeExports.jsx(RlsTabs, { tabs: tabs, value: appTheme, onValue: onSelect, rlsSize: rlsSize, rlsTheme: rlsTheme }));
 }
 const RlsAppThemeTabs = memo(RlsAppThemeTabsComponent);
 
-function RlsBallotComponent({ bordered, className, children, img, initials, skeleton, subtitle, rlsTheme }) {
+function RlsBallotComponent({ bordered, className, children, img, initials, skeleton, subtitle, rlsSize, rlsTheme }) {
     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 }) }))] })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: classNameBallot, "rls-size": rlsSize, "rls-theme": rlsTheme, children: [(img || initials) && (jsxRuntimeExports.jsxs(RlsAvatar, { skeleton: skeleton, rlsSize: rlsSize, children: [img && jsxRuntimeExports.jsx("img", { src: img }), initials && jsxRuntimeExports.jsx("span", { children: initials })] })), jsxRuntimeExports.jsxs("div", { className: "rls-ballot__component", children: [jsxRuntimeExports.jsx("div", { className: "rls-ballot__title", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: children }) }), subtitle && (jsxRuntimeExports.jsx("div", { className: "rls-ballot__subtitle", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: subtitle }) }))] })] }));
 }
 const RlsBallot = memo(RlsBallotComponent);
 
-function RlsBodyComponent({ children, identifier, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-app__page__body", "rls-theme": rlsTheme, children: children }));
+function RlsBodyComponent({ children, identifier, rlsSize, rlsTheme }) {
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-app__page__body", "rls-size": rlsSize, "rls-theme": rlsTheme, children: children }));
 }
 const RlsBody = memo(RlsBodyComponent);
 
-function RlsButtonProgressComponent({ icon, disabled, onClick, progressing, rlsTheme }) {
+function RlsButtonProgressComponent({ icon, disabled, rlsSize, onClick, progressing, rlsTheme }) {
     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, {})] }));
+    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-size": rlsSize, "rls-theme": rlsTheme, children: [!progressing && (jsxRuntimeExports.jsx(RlsButtonAction, { icon: icon, onClick: onClick, disabled: disabled })), progressing && jsxRuntimeExports.jsx(RlsProgressCircular, {})] }));
 }
 const RlsButtonProgress = memo(RlsButtonProgressComponent);
 
-function RlsButtonStepperComponent({ disabled, onAction, rlsTheme }) {
+function RlsButtonStepperComponent({ disabled, rlsSize, onAction, rlsTheme }) {
     const onDown = useCallback(() => {
         onAction?.('down');
     }, [onAction]);
     const onUp = useCallback(() => {
         onAction?.('up');
     }, [onAction]);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-button-stepper", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-down", disabled: disabled, onClick: onDown }), jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-up", disabled: disabled, onClick: onUp })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-button-stepper", "rls-size": rlsSize, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-down", disabled: disabled, onClick: onDown }), jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-up", disabled: disabled, onClick: onUp })] }));
 }
 const RlsButtonStepper = memo(RlsButtonStepperComponent);
 
-function RlsButtonToggleComponent({ onAction, options, type, automatic, disabled, rlsTheme }) {
+function RlsButtonToggleComponent({ onAction, options, type, automatic, disabled, rlsSize, rlsTheme }) {
     const componentRef = useRef(null);
     const [action, setAction] = useState(options[0]);
     const [visible, setVisible] = useState(false);
@@ -1734,11 +1734,11 @@ function RlsButtonToggleComponent({ onAction, options, type, automatic, disabled
             onSelectAction(option);
         }
     }, [options, onSelectAction]);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-button-toggle", ref: componentRef, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-button-toggle__content", children: [action && (jsxRuntimeExports.jsx("div", { className: "rls-button-toggle__action", children: jsxRuntimeExports.jsx(RlsButton, { disabled: disabled, type: type, onClick: onClickAction, children: action.label }) })), jsxRuntimeExports.jsx("div", { className: "rls-button-toggle__icon", children: jsxRuntimeExports.jsx(RlsButton, { type: type, prefixIcon: "arrow-ios-down", disabled: disabled, onClick: onClickMenu }) })] }), jsxRuntimeExports.jsx("div", { className: classNameList, children: jsxRuntimeExports.jsx("ul", { children: options.map((action, index) => (jsxRuntimeExports.jsx("li", { className: "rls-truncate", "data-index": index, onClick: onClickOption, children: action.label }, index))) }) })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-button-toggle", ref: componentRef, "rls-size": rlsSize, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-button-toggle__content", children: [action && (jsxRuntimeExports.jsx("div", { className: "rls-button-toggle__action", children: jsxRuntimeExports.jsx(RlsButton, { disabled: disabled, type: type, onClick: onClickAction, children: action.label }) })), jsxRuntimeExports.jsx("div", { className: "rls-button-toggle__icon", children: jsxRuntimeExports.jsx(RlsButton, { type: type, prefixIcon: "arrow-ios-down", disabled: disabled, onClick: onClickMenu }) })] }), jsxRuntimeExports.jsx("div", { className: classNameList, children: jsxRuntimeExports.jsx("ul", { children: options.map((action, index) => (jsxRuntimeExports.jsx("li", { className: "rls-truncate", "data-index": index, onClick: onClickOption, children: action.label }, index))) }) })] }));
 }
 const RlsButtonToggle = memo(RlsButtonToggleComponent);
 
-function RlsChipGroupComponent({ className, disabled: disabledProps, formControl, identifier, onValue, options, reference, render, rlsTheme, value: valueInitial }) {
+function RlsChipGroupComponent({ className, disabled: disabledProps, formControl, identifier, rlsSize, onValue, options, reference, render, rlsTheme, value: valueInitial }) {
     const [value, setValue] = useState(formControl?.value ?? valueInitial);
     const selected = useMemo(() => {
         return formControl ? formControl.value : value;
@@ -1764,12 +1764,12 @@ function RlsChipGroupComponent({ className, disabled: disabledProps, formControl
         formControl?.touch();
         onValue?.(option);
     }, [disabled, formControl, onValue]);
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: classNameGroup, "rls-theme": rlsTheme, children: options.map((option, index) => (jsxRuntimeExports.jsx(RlsChip, { disabled: disabled, selected: isSelected(option), onClick: onSelect(option), children: render ? render(option) : String(option) }, index))) }));
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: classNameGroup, "rls-size": rlsSize, "rls-theme": rlsTheme, children: options.map((option, index) => (jsxRuntimeExports.jsx(RlsChip, { disabled: disabled, selected: isSelected(option), onClick: onSelect(option), children: render ? render(option) : String(option) }, index))) }));
 }
 const RlsChipGroup = memo(RlsChipGroupComponent);
 
-function RlsContentComponent({ children, identifier, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-app__page__content", "rls-theme": rlsTheme, children: children }));
+function RlsContentComponent({ children, identifier, rlsSize, rlsTheme }) {
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-app__page__content", "rls-size": rlsSize, "rls-theme": rlsTheme, children: children }));
 }
 const RlsContent = memo(RlsContentComponent);
 
@@ -1882,7 +1882,7 @@ function msgErrorsI18n(key, language, interpolators) {
     return _msgErrorsI18n(key, { language, interpolators });
 }
 
-function RlsMessageFormErrorComponent({ className, formControl }) {
+function RlsMessageFormErrorComponent({ className, formControl, rlsSize }) {
     const [language, setLanguage] = useState('es');
     useEffect(() => {
         return i18nSubscribe((language) => {
@@ -1894,12 +1894,12 @@ function RlsMessageFormErrorComponent({ className, formControl }) {
             (msgErrorsI18n(formControl.error.id, language, formControl.error.data) ||
                 msgErrorsI18n('_unknown', language, { error: formControl.error.id })));
     }, [formControl?.error, language]);
-    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: formControl?.wrong && (jsxRuntimeExports.jsx("div", { className: className, children: jsxRuntimeExports.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: msgError }) })) }));
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: formControl?.wrong && (jsxRuntimeExports.jsx("div", { className: className, "rls-size": rlsSize, children: jsxRuntimeExports.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: msgError }) })) }));
 }
 const RlsMessageFormError = memo(RlsMessageFormErrorComponent);
 
 function RlsFieldAreaComponent(props) {
-    const { children, formControl, identifier, maxLength, rlsTheme } = props;
+    const { children, formControl, identifier, maxLength, rlsSize, rlsTheme } = props;
     const { onValue } = props;
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
@@ -1923,12 +1923,12 @@ function RlsFieldAreaComponent(props) {
         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, onValue: onValueArea }) }) }), props.counter && (jsxRuntimeExports.jsx("span", { className: "rls-field-box__helper rls-field-area__counter", children: maxLength ? `${valueLength} / ${maxLength}` : valueLength })), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-size": rlsSize, "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, onValue: onValueArea }) }) }), props.counter && (jsxRuntimeExports.jsx("span", { className: "rls-field-box__helper rls-field-area__counter", children: maxLength ? `${valueLength} / ${maxLength}` : valueLength })), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 const RlsFieldArea = memo(RlsFieldAreaComponent);
 
 function RlsFieldDecimalComponent(props) {
-    const { children, formControl, identifier, rlsTheme } = props;
+    const { children, formControl, identifier, rlsSize, rlsTheme } = props;
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
@@ -1938,11 +1938,11 @@ function RlsFieldDecimalComponent(props) {
         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 }))] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-size": rlsSize, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputDecimal, { ...props }) }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 const RlsFieldDecimal = memo(RlsFieldDecimalComponent);
 
-function RlsFieldFileComponent({ accept, children, disabled: _disabled, formControl, identifier, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value }) {
+function RlsFieldFileComponent({ accept, children, disabled: _disabled, formControl, identifier, msgErrorDisabled, rlsSize, onValue, placeholder, readOnly, rlsTheme, value }) {
     const inputRef = useRef(null);
     const disabled = useMemo(() => formControl?.disabled || _disabled, [formControl?.disabled, _disabled]);
     const className = renderClassStatus('rls-field-box', {
@@ -1978,7 +1978,7 @@ function RlsFieldFileComponent({ accept, children, disabled: _disabled, formCont
             inputRef.current?.click();
         }
     }, [readOnly, disabled]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", onClick: onClickControl, children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-input__component", readOnly: true, type: "text", value: displayValue, placeholder: placeholder }), jsxRuntimeExports.jsx("input", { ref: inputRef, className: "rls-field-file__input", type: "file", accept: accept, disabled: disabled || readOnly, onChange: onChangeInput }), jsxRuntimeExports.jsx(RlsButtonAction, { icon: currentFile ? 'close' : 'attach', disabled: disabled, onClick: onClickAction })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-size": rlsSize, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", onClick: onClickControl, children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-input__component", readOnly: true, type: "text", value: displayValue, placeholder: placeholder }), jsxRuntimeExports.jsx("input", { ref: inputRef, className: "rls-field-file__input", type: "file", accept: accept, disabled: disabled || readOnly, onChange: onChangeInput }), jsxRuntimeExports.jsx(RlsButtonAction, { icon: currentFile ? 'close' : 'attach', disabled: disabled, onClick: onClickAction })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 const RlsFieldFile = memo(RlsFieldFileComponent);
 
@@ -2100,7 +2100,7 @@ function RlsFieldListLi({ element, onClickElement, onKeydownElement, render }) {
     }, [element, onKeydownElement]);
     return (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: onClick, onKeyDown: onKeyDown, children: render(element) }));
 }
-function RlsFieldListSuggestionsComponent({ elements, action, disabled, higher, render, renderEmpty, searchControl, visible, onClickBackdrop, onClickElement, onHiddenAnchor, onKeydownElement, refAnchor, refList, refSuggestions, rlsTheme }) {
+function RlsFieldListSuggestionsComponent({ elements, action, disabled, higher, render, renderEmpty, searchControl, visible, rlsSize, onClickBackdrop, onClickElement, onHiddenAnchor, onKeydownElement, refAnchor, refList, refSuggestions, rlsTheme }) {
     const portal = useSuggestionsPortalController(visible, refAnchor, onHiddenAnchor, higher);
     const [labels, setLabels] = useState({
         listEmptyDescription: reactI18n('listEmptyDescription'),
@@ -2130,13 +2130,13 @@ function RlsFieldListSuggestionsComponent({ elements, action, disabled, higher,
         }
     }, [action?.onClick, action?.keepOpen, onClickBackdrop]);
     const searching = searchControl?.searching ?? false;
-    const suggestions = (jsxRuntimeExports.jsxs("div", { ref: refSuggestions, className: className, style: portal.active ? portal.style : undefined, "rls-theme": rlsTheme ?? portal.theme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__suggestions__body", children: [jsxRuntimeExports.jsxs("ul", { ref: refList, className: "rls-field-list__ul", children: [searchControl && (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__ul__control", ref: searchControl.refInput, type: "text", placeholder: searchControl.placeholder, value: searchControl.pattern, onChange: onChangePattern, onFocus: searchControl.onFocus, onBlur: searchControl.onBlur, onKeyDown: searchControl.onKeyDown, disabled: disabled || searching }), searchControl.onSearch && (jsxRuntimeExports.jsx("button", { disabled: disabled || searching, onClick: searchControl.onSearch, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] })), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), elements.map((element, index) => (jsxRuntimeExports.jsx(RlsFieldListLi, { element: element, onClickElement: onClickElement, onKeydownElement: onKeydownElement, render: render }, index))), !elements.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: renderEmpty ? (renderEmpty()) : (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("span", { className: "rls-label-font-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-font-regular", children: labels.listEmptyDescription })] })) }))] }), action && (jsxRuntimeExports.jsx("div", { className: "rls-field-list__action", children: jsxRuntimeExports.jsxs("button", { type: "button", disabled: disabled || action.disabled, onClick: onClickAction, children: [action.icon && jsxRuntimeExports.jsx(RlsIcon, { value: action.icon }), jsxRuntimeExports.jsx("span", { className: "rls-field-list__action__description", children: action.description })] }) }))] }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: onClickBackdrop })] }));
+    const suggestions = (jsxRuntimeExports.jsxs("div", { ref: refSuggestions, className: className, style: portal.active ? portal.style : undefined, "rls-size": rlsSize, "rls-theme": rlsTheme ?? portal.theme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__suggestions__body", children: [jsxRuntimeExports.jsxs("ul", { ref: refList, className: "rls-field-list__ul", children: [searchControl && (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__ul__control", ref: searchControl.refInput, type: "text", placeholder: searchControl.placeholder, value: searchControl.pattern, onChange: onChangePattern, onFocus: searchControl.onFocus, onBlur: searchControl.onBlur, onKeyDown: searchControl.onKeyDown, disabled: disabled || searching }), searchControl.onSearch && (jsxRuntimeExports.jsx("button", { disabled: disabled || searching, onClick: searchControl.onSearch, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] })), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), elements.map((element, index) => (jsxRuntimeExports.jsx(RlsFieldListLi, { element: element, onClickElement: onClickElement, onKeydownElement: onKeydownElement, render: render }, index))), !elements.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: renderEmpty ? (renderEmpty()) : (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("span", { className: "rls-label-font-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-font-regular", children: labels.listEmptyDescription })] })) }))] }), action && (jsxRuntimeExports.jsx("div", { className: "rls-field-list__action", children: jsxRuntimeExports.jsxs("button", { type: "button", disabled: disabled || action.disabled, onClick: onClickAction, children: [action.icon && jsxRuntimeExports.jsx(RlsIcon, { value: action.icon }), jsxRuntimeExports.jsx("span", { className: "rls-field-list__action__description", children: action.description })] }) }))] }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: onClickBackdrop })] }));
     return portal.active ? createPortal(suggestions, document.body) : suggestions;
 }
 const RlsFieldListSuggestions = memo(RlsFieldListSuggestionsComponent);
 
 function RlsFieldMoneyComponent(props) {
-    const { action, children, formControl, identifier, rlsTheme } = props;
+    const { action, children, formControl, identifier, rlsSize, rlsTheme } = props;
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
@@ -2146,12 +2146,12 @@ function RlsFieldMoneyComponent(props) {
         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 }))] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-size": rlsSize, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx(RlsInputMoney, { ...props }), action && (jsxRuntimeExports.jsx(RlsButtonAction, { icon: action.icon, disabled: disabled, onClick: action.onClick }))] }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 const RlsFieldMoney = memo(RlsFieldMoneyComponent);
 
 function RlsFieldNumberComponent(props) {
-    const { action, children, formControl, identifier, rlsTheme } = props;
+    const { action, children, formControl, identifier, rlsSize, rlsTheme } = props;
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
@@ -2161,12 +2161,12 @@ function RlsFieldNumberComponent(props) {
         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 }))] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-size": rlsSize, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx(RlsInputNumber, { ...props }), action && (jsxRuntimeExports.jsx(RlsButtonAction, { icon: action.icon, disabled: disabled, onClick: action.onClick }))] }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 const RlsFieldNumber = memo(RlsFieldNumberComponent);
 
 function RlsFieldPasswordComponent(props) {
-    const { children, formControl, identifier, rlsTheme } = props;
+    const { children, formControl, identifier, rlsSize, rlsTheme } = props;
     const [passwordIsActive, setPasswordIsActive] = useState(true);
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
@@ -2180,12 +2180,12 @@ function RlsFieldPasswordComponent(props) {
     const onTogglePassword = useCallback(() => {
         setPasswordIsActive((password) => !password);
     }, []);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx(RlsInputPassword, { ...props, type: passwordIsActive ? 'password' : 'text' }), jsxRuntimeExports.jsx(RlsButtonAction, { icon: passwordIsActive ? 'eye' : 'eye-off', onClick: onTogglePassword })] }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-size": rlsSize, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx(RlsInputPassword, { ...props, type: passwordIsActive ? 'password' : 'text' }), jsxRuntimeExports.jsx(RlsButtonAction, { icon: passwordIsActive ? 'eye' : 'eye-off', onClick: onTogglePassword })] }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 const RlsFieldPassword = memo(RlsFieldPasswordComponent);
 
 function RlsFieldPercentageComponent(props) {
-    const { action, children, formControl, identifier, rlsTheme } = props;
+    const { action, children, formControl, identifier, rlsSize, rlsTheme } = props;
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
@@ -2195,17 +2195,17 @@ function RlsFieldPercentageComponent(props) {
         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 }))] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-size": rlsSize, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx(RlsInputPercentage, { ...props }), action && (jsxRuntimeExports.jsx(RlsButtonAction, { icon: action.icon, disabled: disabled, onClick: action.onClick }))] }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 const RlsFieldPercentage = memo(RlsFieldPercentageComponent);
 
-function RlsFieldReadonlyComponent({ children, identifier, rlsTheme, value }) {
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-readonly rls-field-box", "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx("input", { className: "rls-input__component", autoComplete: "off", type: 'text', readOnly: true, value: value }) }) })] }));
+function RlsFieldReadonlyComponent({ children, identifier, rlsSize, rlsTheme, value }) {
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-readonly rls-field-box", "rls-size": rlsSize, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx("input", { className: "rls-input__component", autoComplete: "off", type: 'text', readOnly: true, value: value }) }) })] }));
 }
 const RlsFieldReadonly = memo(RlsFieldReadonlyComponent);
 
 function RlsFieldTextComponent(props) {
-    const { action, children, formControl, identifier, rlsTheme } = props;
+    const { action, children, formControl, identifier, rlsSize, rlsTheme } = props;
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
@@ -2215,7 +2215,7 @@ function RlsFieldTextComponent(props) {
         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 }))] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-size": rlsSize, "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);
 
@@ -2239,7 +2239,7 @@ function useFormToggleController({ disabled, formControl }) {
     return { checked, onToggle };
 }
 
-function RlsLabelCheckBoxComponent({ children, disabled, extended, identifier, formControl, reverse, rlsTheme }) {
+function RlsLabelCheckBoxComponent({ children, disabled, extended, identifier, formControl, reverse, rlsSize, rlsTheme }) {
     const { checked, onToggle } = useFormToggleController({
         disabled,
         formControl
@@ -2249,11 +2249,11 @@ function RlsLabelCheckBoxComponent({ children, disabled, extended, identifier, f
         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 })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-size": rlsSize, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-checkbox__component", onClick: onToggle, children: jsxRuntimeExports.jsx(RlsCheckBox, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("div", { className: "rls-label-checkbox__text", children: children })] }));
 }
 const RlsLabelCheckBox = memo(RlsLabelCheckBoxComponent);
 
-function RlsLabelRadioButtonComponent({ children, disabled, extended, identifier, formControl, onValue, reverse, rlsTheme, value }) {
+function RlsLabelRadioButtonComponent({ children, disabled, extended, identifier, formControl, rlsSize, onValue, reverse, rlsTheme, value }) {
     const { checked, onSelect } = useFormSingleSelectionController({
         disabled,
         formControl,
@@ -2265,11 +2265,11 @@ function RlsLabelRadioButtonComponent({ children, disabled, extended, identifier
         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 })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-size": rlsSize, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-radiobutton__component", onClick: onSelect, children: jsxRuntimeExports.jsx(RlsRadioButton, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("div", { className: "rls-label-radiobutton__text", children: children })] }));
 }
 const RlsLabelRadioButton = memo(RlsLabelRadioButtonComponent);
 
-function RlsLabelSwitchComponent({ capsule, children, disabled, extended, identifier, formControl, reverse, rlsTheme }) {
+function RlsLabelSwitchComponent({ capsule, children, disabled, extended, identifier, formControl, reverse, rlsSize, rlsTheme }) {
     const { checked, onToggle } = useFormToggleController({
         disabled,
         formControl
@@ -2279,11 +2279,11 @@ function RlsLabelSwitchComponent({ capsule, children, disabled, extended, identi
         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 })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-size": rlsSize, "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 }) {
+function RlsMessageEmptyComponent({ children, className, emoji, icon, identifier, image, rlsSize, rlsTheme, title }) {
     const classNameMessageEmpty = renderClassStatus('rls-message-empty', {}, className);
     const logo = useMemo(() => {
         if (icon) {
@@ -2297,12 +2297,12 @@ function RlsMessageEmptyComponent({ children, className, emoji, icon, identifier
         }
         return null;
     }, [icon, emoji, image]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: classNameMessageEmpty, "rls-theme": rlsTheme, children: [logo, jsxRuntimeExports.jsxs("div", { className: "rls-message-empty__body", children: [title && jsxRuntimeExports.jsx("div", { className: "rls-message-empty__title", children: title }), children && (jsxRuntimeExports.jsx("div", { className: "rls-message-empty__content", children: children }))] })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: classNameMessageEmpty, "rls-size": rlsSize, "rls-theme": rlsTheme, children: [logo, jsxRuntimeExports.jsxs("div", { className: "rls-message-empty__body", children: [title && jsxRuntimeExports.jsx("div", { className: "rls-message-empty__title", children: title }), children && (jsxRuntimeExports.jsx("div", { className: "rls-message-empty__content", children: children }))] })] }));
 }
 const RlsMessageEmpty = memo(RlsMessageEmptyComponent);
 
-function RlsNavbarComponent({ children, identifier, rlsTheme }) {
-    return (jsxRuntimeExports.jsxs("nav", { id: identifier, className: "rls-app__page__nav", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-app__page__nav__content", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-app__page__nav__backdrop" })] }));
+function RlsNavbarComponent({ children, identifier, rlsSize, rlsTheme }) {
+    return (jsxRuntimeExports.jsxs("nav", { id: identifier, className: "rls-app__page__nav", "rls-size": rlsSize, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-app__page__nav__content", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-app__page__nav__backdrop" })] }));
 }
 const RlsNavbar = memo(RlsNavbarComponent);
 
@@ -2312,8 +2312,8 @@ function RlsNavbarMenuOption({ option, onOption }) {
     }, [onOption]);
     return (jsxRuntimeExports.jsxs("li", { className: "rls-app__page__nav__option", onClick: onClick, children: [jsxRuntimeExports.jsx(RlsIcon, { value: option.icon }), jsxRuntimeExports.jsx("span", { className: "rls-label-font", children: option.label })] }));
 }
-function RlsNavbarMenuComponent({ options, onOption }) {
-    return (jsxRuntimeExports.jsx("ul", { className: "rls-app__page__nav__menu", children: options.map((option) => (jsxRuntimeExports.jsx(RlsNavbarMenuOption, { option: option, onOption: onOption }, option.id))) }));
+function RlsNavbarMenuComponent({ options, rlsSize, onOption }) {
+    return (jsxRuntimeExports.jsx("ul", { className: "rls-app__page__nav__menu", "rls-size": rlsSize, children: options.map((option) => (jsxRuntimeExports.jsx(RlsNavbarMenuOption, { option: option, onOption: onOption }, option.id))) }));
 }
 const RlsNavbarMenu = memo(RlsNavbarMenuComponent);
 
@@ -2326,7 +2326,7 @@ function RlsPaginationButton({ page, onSelect }) {
     }, [page, onSelect]);
     return (jsxRuntimeExports.jsx("button", { type: "button", className: className, onClick: onClick, children: page.label }));
 }
-function RlsPaginationComponent({ suggestions, count, filter, onPagination, position }) {
+function RlsPaginationComponent({ suggestions, count, filter, rlsSize, onPagination, position }) {
     const [template, setTemplate] = useState();
     const controller = useRef(undefined);
     const refreshTemplate = useCallback((template, suggestions) => {
@@ -2371,7 +2371,7 @@ function RlsPaginationComponent({ suggestions, count, filter, onPagination, posi
     const goLastPagination = useCallback(() => {
         refreshPagination(controller.current?.goLastPage());
     }, [refreshPagination]);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-pagination", children: [jsxRuntimeExports.jsxs("div", { className: "rls-pagination__actions", children: [jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goFirstPagination, disabled: template?.firstPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrowhead-left" }) }), jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goPreviousPagination, disabled: template?.firstPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-left" }) })] }), jsxRuntimeExports.jsxs("div", { className: "rls-pagination__body", children: [jsxRuntimeExports.jsx("div", { className: "rls-pagination__pages", children: template?.pages.map((page) => (jsxRuntimeExports.jsx(RlsPaginationButton, { page: page, onSelect: goToPagination }, page.value))) }), jsxRuntimeExports.jsx("div", { className: "rls-pagination__description", children: template?.description }), jsxRuntimeExports.jsx("span", { className: "rls-pagination__count", children: suggestions.length })] }), jsxRuntimeExports.jsxs("div", { className: "rls-pagination__actions", children: [jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goNextPagination, disabled: template?.lastPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-right" }) }), jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goLastPagination, disabled: template?.lastPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrowhead-right" }) })] })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-pagination", "rls-size": rlsSize, children: [jsxRuntimeExports.jsxs("div", { className: "rls-pagination__actions", children: [jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goFirstPagination, disabled: template?.firstPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrowhead-left" }) }), jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goPreviousPagination, disabled: template?.firstPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-left" }) })] }), jsxRuntimeExports.jsxs("div", { className: "rls-pagination__body", children: [jsxRuntimeExports.jsx("div", { className: "rls-pagination__pages", children: template?.pages.map((page) => (jsxRuntimeExports.jsx(RlsPaginationButton, { page: page, onSelect: goToPagination }, page.value))) }), jsxRuntimeExports.jsx("div", { className: "rls-pagination__description", children: template?.description }), jsxRuntimeExports.jsx("span", { className: "rls-pagination__count", children: suggestions.length })] }), jsxRuntimeExports.jsxs("div", { className: "rls-pagination__actions", children: [jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goNextPagination, disabled: template?.lastPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-right" }) }), jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goLastPagination, disabled: template?.lastPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrowhead-right" }) })] })] }));
 }
 const RlsPagination = memo(RlsPaginationComponent);
 
@@ -2393,7 +2393,7 @@ function RlsPickerDayElement({ day, onSelect, disabled }) {
     }, [day.value, day.disabled, disabled, onSelect]);
     return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-day__element__span", children: day.value || '??' }) }));
 }
-function RlsPickerDayComponent({ date, disabled, formControl, maxDate, month, minDate, onValue, rlsTheme, year }) {
+function RlsPickerDayComponent({ date, disabled, formControl, maxDate, month, minDate, rlsSize, onValue, rlsTheme, year }) {
     const dateDay = useMemo(() => date ?? new Date(), [date]);
     const [weeks, setWeeks] = useState([]);
     const [value, setValue] = useState(formControl?.value ?? dateDay.getDate());
@@ -2444,7 +2444,7 @@ function RlsPickerDayComponent({ date, disabled, formControl, maxDate, month, mi
             maxDate
         };
     }, [dateDay, formControl?.value, value, month, year, minDate, maxDate]);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-day", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx(RlsPickerDayHeaders, {}), jsxRuntimeExports.jsx("div", { className: "rls-picker-day__component", children: weeks.map(({ days }, index) => (jsxRuntimeExports.jsx("div", { className: "rls-picker-day__week", children: days.map((day, index) => (jsxRuntimeExports.jsx(RlsPickerDayElement, { day: day, onSelect: onSelect, disabled: disabled }, index))) }, index))) })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-day", "rls-size": rlsSize, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx(RlsPickerDayHeaders, {}), jsxRuntimeExports.jsx("div", { className: "rls-picker-day__component", children: weeks.map(({ days }, index) => (jsxRuntimeExports.jsx("div", { className: "rls-picker-day__week", children: days.map((day, index) => (jsxRuntimeExports.jsx(RlsPickerDayElement, { day: day, onSelect: onSelect, disabled: disabled }, index))) }, index))) })] }));
 }
 const RlsPickerDay = memo(RlsPickerDayComponent);
 
@@ -2466,7 +2466,7 @@ function RlsPickerDayRangeElement({ day, onSelect, disabled }) {
     }, [day.value, day.disabled, disabled, onSelect]);
     return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-day-range__element__span", children: day.value || '??' }) }));
 }
-function RlsPickerDayRangeComponent({ date, disabled, formControl, maxDate, minDate, rlsTheme }) {
+function RlsPickerDayRangeComponent({ date, disabled, formControl, maxDate, minDate, rlsSize, rlsTheme }) {
     const rangeDay = useMemo(() => {
         return formControl?.value ?? DateRange.now();
     }, [formControl?.value]);
@@ -2500,7 +2500,7 @@ function RlsPickerDayRangeComponent({ date, disabled, formControl, maxDate, minD
             maxDate
         }));
     }, [dateDayRange, range, minDate, maxDate]);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-day-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx(RlsPickerDayRangeHeaders, {}), jsxRuntimeExports.jsx("div", { className: "rls-picker-day-range__component", children: weeks.map(({ days }, index) => (jsxRuntimeExports.jsx("div", { className: "rls-picker-day-range__week", children: days.map((day, index) => (jsxRuntimeExports.jsx(RlsPickerDayRangeElement, { day: day, onSelect: onSelect, disabled: disabled }, index))) }, index))) })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-day-range", "rls-size": rlsSize, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx(RlsPickerDayRangeHeaders, {}), jsxRuntimeExports.jsx("div", { className: "rls-picker-day-range__component", children: weeks.map(({ days }, index) => (jsxRuntimeExports.jsx("div", { className: "rls-picker-day-range__week", children: days.map((day, index) => (jsxRuntimeExports.jsx(RlsPickerDayRangeElement, { day: day, onSelect: onSelect, disabled: disabled }, index))) }, index))) })] }));
 }
 const RlsPickerDayRange = memo(RlsPickerDayRangeComponent);
 
@@ -2523,7 +2523,7 @@ function RlsPickerMonthElement({ month, onSelect, disabled }) {
     }, [month.value, month.disabled, disabled, onSelect]);
     return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-month__span", children: label }) }));
 }
-function RlsPickerMonthComponent({ date, disabled, formControl, maxDate, minDate, onValue, rlsTheme, year }) {
+function RlsPickerMonthComponent({ date, disabled, formControl, maxDate, minDate, rlsSize, onValue, rlsTheme, year }) {
     const dateMonth = useMemo(() => date ?? new Date(), [date]);
     const [months, setMonths] = useState([]);
     const [value, setValue] = useState(formControl?.value ?? dateMonth.getMonth());
@@ -2570,11 +2570,11 @@ function RlsPickerMonthComponent({ date, disabled, formControl, maxDate, minDate
             setValue(formControl?.value ?? dateMonth.getMonth());
         }
     }, [formControl?.value]);
-    return (jsxRuntimeExports.jsx("div", { className: "rls-picker-month", "rls-theme": rlsTheme, children: months.map((month, index) => (jsxRuntimeExports.jsx(RlsPickerMonthElement, { month: month, onSelect: onSelect, disabled: disabled }, index))) }));
+    return (jsxRuntimeExports.jsx("div", { className: "rls-picker-month", "rls-size": rlsSize, "rls-theme": rlsTheme, children: months.map((month, index) => (jsxRuntimeExports.jsx(RlsPickerMonthElement, { month: month, onSelect: onSelect, disabled: disabled }, index))) }));
 }
 const RlsPickerMonth = memo(RlsPickerMonthComponent);
 
-function RlsPickerSelectorTitleComponent({ monthControl, type, yearControl, date, disabled, maxDate, minDate, onClick }) {
+function RlsPickerSelectorTitleComponent({ monthControl, type, yearControl, date, disabled, maxDate, minDate, rlsSize, onClick }) {
     const { limitNext, limitPrevious } = useMemo(() => {
         return monthLimitTemplate({
             date,
@@ -2648,7 +2648,7 @@ function RlsPickerSelectorTitleComponent({ monthControl, type, yearControl, date
             onNextYear();
         }
     }, [type, onNextMonth, onNextYear]);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-selector-title", children: [jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-left", onClick: onPrevious, disabled: limitPrevious || disabled }), jsxRuntimeExports.jsxs("div", { className: "rls-picker-selector-title__label", children: [jsxRuntimeExports.jsxs("span", { onClick: onMonth, children: [label, ","] }), jsxRuntimeExports.jsx("span", { onClick: onYear, children: yearControl.value })] }), jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-right", onClick: onNext, disabled: limitNext || disabled })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-selector-title", "rls-size": rlsSize, children: [jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-left", onClick: onPrevious, disabled: limitPrevious || disabled }), jsxRuntimeExports.jsxs("div", { className: "rls-picker-selector-title__label", children: [jsxRuntimeExports.jsxs("span", { onClick: onMonth, children: [label, ","] }), jsxRuntimeExports.jsx("span", { onClick: onYear, children: yearControl.value })] }), jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-right", onClick: onNext, disabled: limitNext || disabled })] }));
 }
 const RlsPickerSelectorTitle = memo(RlsPickerSelectorTitleComponent);
 
@@ -2665,7 +2665,7 @@ function RlsPickerYearElement({ onSelect, year, disabled }) {
     }, [year.value, year.disabled, disabled, onSelect]);
     return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-year__span", children: year.value || '????' }) }));
 }
-function RlsPickerYearComponent({ date, disabled, formControl, maxDate, minDate, onValue, rlsTheme }) {
+function RlsPickerYearComponent({ date, disabled, formControl, maxDate, minDate, rlsSize, onValue, rlsTheme }) {
     const dateYear = useMemo(() => date ?? new Date(), [date]);
     const [year, setYear] = useState(formControl?.value ?? dateYear.getFullYear());
     const createPickerOptions = useCallback(() => {
@@ -2708,7 +2708,7 @@ function RlsPickerYearComponent({ date, disabled, formControl, maxDate, minDate,
     const onClickNext = useCallback(() => {
         setYear((year) => year + 8);
     }, []);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-year", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-year__header", children: [jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-left", onClick: onClickPrev, disabled: !template.canPrevious || disabled }), jsxRuntimeExports.jsxs("span", { children: [template.minRange, " - ", template.maxRange] }), jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-right", onClick: onClickNext, disabled: !template.canNext || disabled })] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-year__component", children: template.years.map((year, index) => (jsxRuntimeExports.jsx(RlsPickerYearElement, { year: year, onSelect: onSelect, disabled: disabled }, index))) })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-year", "rls-size": rlsSize, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-year__header", children: [jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-left", onClick: onClickPrev, disabled: !template.canPrevious || disabled }), jsxRuntimeExports.jsxs("span", { children: [template.minRange, " - ", template.maxRange] }), jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-right", onClick: onClickNext, disabled: !template.canNext || disabled })] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-year__component", children: template.years.map((year, index) => (jsxRuntimeExports.jsx(RlsPickerYearElement, { year: year, onSelect: onSelect, disabled: disabled }, index))) })] }));
 }
 const RlsPickerYear = memo(RlsPickerYearComponent);
 
@@ -2751,7 +2751,7 @@ function sliderRateToValue(rate, minValue, maxValue, step) {
 
 const DEFAULT_STEP = 1;
 const PAGE_STEP_DIVISOR = 10;
-function RlsSliderComponent({ children, className, disabled, formControl, identifier, maxValue, minValue, onValue, prefixIcon, rlsTheme, step, value }) {
+function RlsSliderComponent({ children, className, disabled, formControl, identifier, maxValue, minValue, rlsSize, onValue, prefixIcon, rlsTheme, step, value }) {
     const minValueSlider = useMemo(() => {
         return minValue ?? 0;
     }, [minValue]);
@@ -2888,16 +2888,16 @@ function RlsSliderComponent({ children, className, disabled, formControl, identi
     useEffect(() => {
         commitValue(normalizeSliderValue(refValue.current, minValueSlider, maxValueSlider, stepSlider));
     }, [commitValue, minValueSlider, maxValueSlider, stepSlider]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: classNameSlider, "rls-theme": rlsTheme, children: [children && (jsxRuntimeExports.jsx("span", { id: labelId, className: "rls-slider__label", children: children })), jsxRuntimeExports.jsxs("div", { className: "rls-slider__body", children: [prefixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: prefixIcon }), jsxRuntimeExports.jsxs("div", { className: "rls-slider__component", onPointerDown: onPointerDown, children: [jsxRuntimeExports.jsx("div", { ref: refTrack, className: "rls-slider__track", children: jsxRuntimeExports.jsx("div", { className: "rls-slider__track__on", style: { width: `${rate}%` } }) }), jsxRuntimeExports.jsx("div", { ref: refThumb, className: "rls-slider__thumb", style: { left: `${rate}%` }, role: "slider", tabIndex: disabled ? -1 : 0, "aria-orientation": "horizontal", "aria-valuemin": minValueSlider, "aria-valuemax": maxValueSlider, "aria-valuenow": valueSlider, "aria-disabled": disabled || undefined, "aria-labelledby": children ? labelId : undefined, onKeyDown: onKeyDown, children: valueSlider })] })] })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: classNameSlider, "rls-size": rlsSize, "rls-theme": rlsTheme, children: [children && (jsxRuntimeExports.jsx("span", { id: labelId, className: "rls-slider__label", children: children })), jsxRuntimeExports.jsxs("div", { className: "rls-slider__body", children: [prefixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: prefixIcon }), jsxRuntimeExports.jsxs("div", { className: "rls-slider__component", onPointerDown: onPointerDown, children: [jsxRuntimeExports.jsx("div", { ref: refTrack, className: "rls-slider__track", children: jsxRuntimeExports.jsx("div", { className: "rls-slider__track__on", style: { width: `${rate}%` } }) }), jsxRuntimeExports.jsx("div", { ref: refThumb, className: "rls-slider__thumb", style: { left: `${rate}%` }, role: "slider", tabIndex: disabled ? -1 : 0, "aria-orientation": "horizontal", "aria-valuemin": minValueSlider, "aria-valuemax": maxValueSlider, "aria-valuenow": valueSlider, "aria-disabled": disabled || undefined, "aria-labelledby": children ? labelId : undefined, onKeyDown: onKeyDown, children: valueSlider })] })] })] }));
 }
 const RlsSlider = memo(RlsSliderComponent);
 
-function RlsToolbarComponent({ actions, children, subtitle }) {
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-toolbar", children: [jsxRuntimeExports.jsxs("div", { className: "rls-toolbar__description", children: [children && jsxRuntimeExports.jsx("label", { className: "rls-toolbar__title", children: children }), subtitle && (jsxRuntimeExports.jsx("label", { className: "rls-toolbar__subtitle smalltext-semibold", children: subtitle }))] }), actions && (jsxRuntimeExports.jsx("div", { className: "rls-toolbar__actions", children: actions.map((action, index) => (jsxRuntimeExports.jsx("div", { children: action }, index))) }))] }));
+function RlsToolbarComponent({ actions, children, rlsSize, subtitle }) {
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-toolbar", "rls-size": rlsSize, children: [jsxRuntimeExports.jsxs("div", { className: "rls-toolbar__description", children: [children && jsxRuntimeExports.jsx("label", { className: "rls-toolbar__title", children: children }), subtitle && (jsxRuntimeExports.jsx("label", { className: "rls-toolbar__subtitle smalltext-semibold", children: subtitle }))] }), actions && (jsxRuntimeExports.jsx("div", { className: "rls-toolbar__actions", children: actions.map((action, index) => (jsxRuntimeExports.jsx("div", { children: action }, index))) }))] }));
 }
 const RlsToolbar = memo(RlsToolbarComponent);
 
-function RlsBottomSheetComponent({ autoclose, children, className, controller, onBackdrop, visible, rlsTheme }) {
+function RlsBottomSheetComponent({ autoclose, children, className, controller, rlsSize, onBackdrop, visible, rlsTheme }) {
     const classNameSheet = renderClassStatus('rls-bottom-sheet', { visible: controller?.visible ?? visible }, className);
     const onClickBackdrop = useCallback(() => {
         if (autoclose) {
@@ -2905,13 +2905,13 @@ function RlsBottomSheetComponent({ autoclose, children, className, controller, o
         }
         onBackdrop?.();
     }, [autoclose, controller, onBackdrop]);
-    return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameSheet, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-bottom-sheet__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-bottom-sheet__backdrop", onClick: onClickBackdrop })] }), document.body);
+    return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameSheet, "rls-size": rlsSize, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-bottom-sheet__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-bottom-sheet__backdrop", onClick: onClickBackdrop })] }), document.body);
 }
 const RlsBottomSheet = memo(RlsBottomSheetComponent);
 
-function RlsCardComponent({ children, className, outline, rlsTheme }) {
+function RlsCardComponent({ children, className, rlsSize, outline, rlsTheme }) {
     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 }) }));
+    return (jsxRuntimeExports.jsx("div", { className: classNameCard, "rls-size": rlsSize, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-card__content", children: children }) }));
 }
 const RlsCard = memo(RlsCardComponent);
 
@@ -3241,7 +3241,7 @@ function useFieldAutocomplete(props) {
 
 function RlsChooserAutocompleteTemplateComponent(props) {
     const autocomplete = useFieldAutocomplete(props);
-    const { render, action, children, formControl, onSearch, rlsTheme, searching } = props;
+    const { render, action, children, formControl, rlsSize, onSearch, rlsTheme, searching } = props;
     const [listInputPlaceholder, setListInputPlaceholder] = useState(reactI18n('listInputPlaceholder'));
     useEffect(() => {
         return i18nSubscribe(() => {
@@ -3302,7 +3302,7 @@ function RlsChooserAutocompleteTemplateComponent(props) {
         onClickPattern,
         onSearch
     ]);
-    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.refContent, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-chooser__trigger", role: "combobox", "aria-expanded": autocomplete.listIsVisible, "aria-haspopup": "listbox", "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : 0, onClick: disabled ? undefined : autocomplete.onClickControl, onKeyDown: disabled ? undefined : onKeydownTrigger, children: typeof children === 'function'
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.refContent, className: className, "rls-size": rlsSize, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-chooser__trigger", role: "combobox", "aria-expanded": autocomplete.listIsVisible, "aria-haspopup": "listbox", "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : 0, onClick: disabled ? undefined : autocomplete.onClickControl, onKeyDown: disabled ? undefined : onKeydownTrigger, children: typeof children === 'function'
                     ? children({
                         description: autocomplete.value,
                         listIsVisible: autocomplete.listIsVisible,
@@ -3467,7 +3467,7 @@ function useFieldList(props) {
 
 function RlsChooserListTemplateComponent(props) {
     const fieldList = useFieldList(props);
-    const { render, suggestions, action, children, formControl, rlsTheme } = props;
+    const { render, suggestions, action, children, formControl, rlsSize, rlsTheme } = props;
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
@@ -3488,7 +3488,7 @@ function RlsChooserListTemplateComponent(props) {
         }
     }, [fieldList.onClickAction, fieldList.onClickBackdrop]);
     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: [jsxRuntimeExports.jsx("div", { className: "rls-chooser__trigger", role: "combobox", "aria-expanded": fieldList.listIsVisible, "aria-haspopup": "listbox", "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : 0, onClick: disabled ? undefined : fieldList.onClickAction, onKeyDown: disabled ? undefined : onKeydownTrigger, children: typeof children === 'function'
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: fieldList.refContent, className: className, "rls-size": rlsSize, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-chooser__trigger", role: "combobox", "aria-expanded": fieldList.listIsVisible, "aria-haspopup": "listbox", "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : 0, onClick: disabled ? undefined : fieldList.onClickAction, onKeyDown: disabled ? undefined : onKeydownTrigger, children: typeof children === 'function'
                     ? children({
                         listIsVisible: fieldList.listIsVisible,
                         selected: fieldList.selected
@@ -3622,7 +3622,7 @@ function useFieldSelect(props) {
 
 function RlsChooserSelectTemplateComponent(props) {
     const select = useFieldSelect({ ...props, unremovable: true });
-    const { render, suggestions, action, children, formControl, rlsTheme } = props;
+    const { render, suggestions, action, children, formControl, rlsSize, rlsTheme } = props;
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
@@ -3637,7 +3637,7 @@ function RlsChooserSelectTemplateComponent(props) {
         }
         select.onKeydownInput(event);
     }, [select.onKeydownInput]);
-    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.refContent, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-chooser__trigger", role: "combobox", "aria-expanded": select.listIsVisible, "aria-haspopup": "listbox", "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : 0, onClick: disabled ? undefined : select.onClickAction, onKeyDown: disabled ? undefined : onKeydownTrigger, onFocus: select.onFocusInput, onBlur: select.onBlurInput, children: typeof children === 'function'
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.refContent, className: className, "rls-size": rlsSize, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-chooser__trigger", role: "combobox", "aria-expanded": select.listIsVisible, "aria-haspopup": "listbox", "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : 0, onClick: disabled ? undefined : select.onClickAction, onKeyDown: disabled ? undefined : onKeydownTrigger, onFocus: select.onFocusInput, onBlur: select.onBlurInput, children: typeof children === 'function'
                     ? children({
                         description: select.value,
                         listIsVisible: select.listIsVisible,
@@ -3660,9 +3660,9 @@ class ConfirmationResult extends SealedPartial {
         return new ConfirmationResult('reject');
     }
 }
-function RlsConfirmationComponent({ approved, className, content, reject, rlsTheme, subtitle, title, visible }) {
+function RlsConfirmationComponent({ approved, className, content, rlsSize, reject, rlsTheme, subtitle, title, visible }) {
     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" })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: classConfirmation, "rls-size": rlsSize, "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);
 const RlsConfirmationBase = RlsConfirmation;
@@ -3739,42 +3739,42 @@ function useDatatable(table) {
     return { refTable, scrolleable };
 }
 
-function RlsDatatableComponent({ children, footer, header, identifier, rlsTheme, resizable, summary, table, toolbar }) {
+function RlsDatatableComponent({ children, footer, header, identifier, rlsSize, rlsTheme, resizable, summary, table, toolbar }) {
     const datatable = useDatatable(table);
     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 })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-size": rlsSize, "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);
-function RlsDatatableHeaderComponent({ children, identifier, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("tr", { id: identifier, className: "rls-datatable__header", "rls-theme": rlsTheme, children: children }));
+function RlsDatatableHeaderComponent({ children, identifier, rlsSize, rlsTheme }) {
+    return (jsxRuntimeExports.jsx("tr", { id: identifier, className: "rls-datatable__header", "rls-size": rlsSize, "rls-theme": rlsTheme, children: children }));
 }
 const RlsDatatableHeader = memo(RlsDatatableHeaderComponent);
-function RlsDatatableTitleComponent({ actions, children, className, control, identifier, rlsTheme, truncated }) {
+function RlsDatatableTitleComponent({ actions, children, className, control, identifier, rlsSize, rlsTheme, truncated }) {
     const classNameTitle = renderClassStatus('rls-datatable__title', { actions, control, truncated }, className);
-    return (jsxRuntimeExports.jsx("th", { id: identifier, className: classNameTitle, "rls-theme": rlsTheme, children: children }));
+    return (jsxRuntimeExports.jsx("th", { id: identifier, className: classNameTitle, "rls-size": rlsSize, "rls-theme": rlsTheme, children: children }));
 }
 const RlsDatatableTitle = memo(RlsDatatableTitleComponent);
-function RlsDatatableSubheaderComponent({ children, className, identifier, rlsTheme }) {
+function RlsDatatableSubheaderComponent({ children, className, identifier, rlsSize, rlsTheme }) {
     const classNameSubheader = renderClassStatus('rls-datatable__subheader', {}, className);
-    return (jsxRuntimeExports.jsx("tr", { id: identifier, className: classNameSubheader, "rls-theme": rlsTheme, children: children }));
+    return (jsxRuntimeExports.jsx("tr", { id: identifier, className: classNameSubheader, "rls-size": rlsSize, "rls-theme": rlsTheme, children: children }));
 }
 const RlsDatatableSubheader = memo(RlsDatatableSubheaderComponent);
-function RlsDatatableRecordComponent({ children, className, error, identifier, info, rlsTheme, success, truncated, warning }) {
+function RlsDatatableRecordComponent({ children, className, error, identifier, info, rlsSize, rlsTheme, success, truncated, 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 }));
+    return (jsxRuntimeExports.jsx("tr", { id: identifier, className: classNameRecord, "rls-size": rlsSize, "rls-theme": rlsTheme, children: children }));
 }
 const RlsDatatableRecord = memo(RlsDatatableRecordComponent);
-function RlsDatatableTotalsComponent({ children, className, error, identifier, info, rlsTheme, success, truncated, warning }) {
+function RlsDatatableTotalsComponent({ children, className, error, identifier, info, rlsSize, rlsTheme, success, truncated, 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 }));
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: classNameTotals, "rls-size": rlsSize, "rls-theme": rlsTheme, children: children }));
 }
 const RlsDatatableTotals = memo(RlsDatatableTotalsComponent);
-function RlsDatatableCellComponent({ actions, children, className, control, identifier, rlsTheme, truncated }) {
+function RlsDatatableCellComponent({ actions, children, className, control, identifier, rlsSize, rlsTheme, truncated }) {
     const classNameCell = renderClassStatus('rls-datatable__cell', { actions, control, truncated }, className);
-    return (jsxRuntimeExports.jsx("td", { id: identifier, className: classNameCell, "rls-theme": rlsTheme, children: children }));
+    return (jsxRuntimeExports.jsx("td", { id: identifier, className: classNameCell, "rls-size": rlsSize, "rls-theme": rlsTheme, children: children }));
 }
 const RlsDatatableCell = memo(RlsDatatableCellComponent);
 function RlsDatatableDataComponent({ actions, children, className, control, identifier, truncated }) {
@@ -3782,13 +3782,13 @@ function RlsDatatableDataComponent({ actions, children, className, control, iden
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: classNameData, children: children }));
 }
 const RlsDatatableData = memo(RlsDatatableDataComponent);
-function RlsDatatableFloatingComponent({ children, className, identifier, invested, rlsTheme }) {
+function RlsDatatableFloatingComponent({ children, className, identifier, invested, rlsSize, rlsTheme }) {
     const classNameFloating = renderClassStatus('rls-datatable__floating', { invested }, className);
-    return (jsxRuntimeExports.jsx("td", { id: identifier, className: classNameFloating, "rls-theme": rlsTheme, children: children }));
+    return (jsxRuntimeExports.jsx("td", { id: identifier, className: classNameFloating, "rls-size": rlsSize, "rls-theme": rlsTheme, children: children }));
 }
 const RlsDatatableFloating = memo(RlsDatatableFloatingComponent);
 
-function RlsDropdownComponent({ children, controller, rlsTheme }) {
+function RlsDropdownComponent({ children, controller, rlsSize, rlsTheme }) {
     const className = renderClassStatus('rls-dropdown', {
         visible: controller.visible
     });
@@ -3803,13 +3803,13 @@ function RlsDropdownComponent({ children, controller, rlsTheme }) {
             document.removeEventListener('click', onCloseDropdown);
         };
     }, []);
-    return (jsxRuntimeExports.jsx("div", { ref: controller.component, className: className, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-dropdown__content", children: children }) }));
+    return (jsxRuntimeExports.jsx("div", { ref: controller.component, className: className, "rls-size": rlsSize, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-dropdown__content", children: children }) }));
 }
 const RlsDropdown = memo(RlsDropdownComponent);
 
 function RlsFieldAutocompleteTemplateComponent(props) {
     const autocomplete = useFieldAutocomplete(props);
-    const { render, action, children, formControl, msgErrorDisabled, onSearch, placeholder, rlsTheme, searching } = props;
+    const { render, action, children, formControl, msgErrorDisabled, rlsSize, onSearch, placeholder, rlsTheme, searching } = props;
     const [listInputPlaceholder, setListInputPlaceholder] = useState(reactI18n('listInputPlaceholder'));
     useEffect(() => {
         return i18nSubscribe(() => {
@@ -3860,7 +3860,7 @@ function RlsFieldAutocompleteTemplateComponent(props) {
         onClickPattern,
         onSearch
     ]);
-    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.refContent, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: autocomplete.value, onClick: autocomplete.onClickControl }), !props.readOnly && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: autocomplete.value ? 'trash-2' : 'arrow-ios-down', onClick: autocomplete.onClickAction }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx(RlsFieldListSuggestions, { elements: autocomplete.coincidences, visible: autocomplete.listIsVisible, action: action, disabled: disabled, higher: autocomplete.higher, render: render, refAnchor: autocomplete.refContent, refList: autocomplete.refList, refSuggestions: autocomplete.refSuggestions, searchControl: searchControl, onClickElement: autocomplete.onClickElement, onKeydownElement: autocomplete.onKeydownElement, onClickBackdrop: autocomplete.onClickBackdrop, onHiddenAnchor: autocomplete.onClickBackdrop })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.refContent, className: className, "rls-size": rlsSize, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: autocomplete.value, onClick: autocomplete.onClickControl }), !props.readOnly && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: autocomplete.value ? 'trash-2' : 'arrow-ios-down', onClick: autocomplete.onClickAction }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx(RlsFieldListSuggestions, { elements: autocomplete.coincidences, visible: autocomplete.listIsVisible, action: action, disabled: disabled, higher: autocomplete.higher, render: render, refAnchor: autocomplete.refContent, refList: autocomplete.refList, refSuggestions: autocomplete.refSuggestions, searchControl: searchControl, onClickElement: autocomplete.onClickElement, onKeydownElement: autocomplete.onKeydownElement, onClickBackdrop: autocomplete.onClickBackdrop, onHiddenAnchor: autocomplete.onClickBackdrop })] }));
 }
 const RlsFieldAutocompleteTemplate = memo(RlsFieldAutocompleteTemplateComponent);
 function RlsFieldAutocompleteComponent(props) {
@@ -3869,7 +3869,7 @@ function RlsFieldAutocompleteComponent(props) {
 }
 const RlsFieldAutocomplete = memo(RlsFieldAutocompleteComponent);
 
-function RlsModalComponent({ autoclose, children, className, controller, onBackdrop, visible, rlsTheme }) {
+function RlsModalComponent({ autoclose, children, className, controller, rlsSize, onBackdrop, visible, rlsTheme }) {
     const classNameModal = renderClassStatus('rls-modal', { visible: controller?.visible ?? visible }, className);
     const onClickBackdrop = useCallback(() => {
         if (autoclose) {
@@ -3877,7 +3877,7 @@ function RlsModalComponent({ autoclose, children, className, controller, onBackd
         }
         onBackdrop?.();
     }, [autoclose, controller, onBackdrop]);
-    return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameModal, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal__backdrop", onClick: onClickBackdrop })] }), document.body);
+    return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameModal, "rls-size": rlsSize, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal__backdrop", onClick: onClickBackdrop })] }), document.body);
 }
 const RlsModal = memo(RlsModalComponent);
 
@@ -3915,7 +3915,7 @@ function RlsPickerClockTick({ selectionIsHours, value }) {
     }, [selectionIsHours]);
     return (jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__tick", style: styleTick, "data-value": tickValue, children: formatTime(tickValue) }));
 }
-function RlsPickerClockComponent({ formControl, onListener, rlsTheme, time }) {
+function RlsPickerClockComponent({ formControl, rlsSize, onListener, rlsTheme, time }) {
     const timeInitial = useMemo(() => {
         return formControl?.value ?? time ?? Time.now();
     }, [formControl?.value, time]);
@@ -4100,7 +4100,7 @@ function RlsPickerClockComponent({ formControl, onListener, rlsTheme, time }) {
             value: timeValue
         });
     }, [formControl, hour, minute, zoneIsPM, onListener]);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__header", children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__title", children: [jsxRuntimeExports.jsx("span", { className: classNameHour, onClick: onClickHour, children: hourFormat }), jsxRuntimeExports.jsx("span", { className: "rls-picker-clock__title__separator", children: ":" }), jsxRuntimeExports.jsx("span", { className: classNameMinute, onClick: onClickMinute, children: minuteFormat })] }), jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__zone", children: [jsxRuntimeExports.jsx("span", { className: classNameAM, onClick: onClickAM, children: "AM" }), jsxRuntimeExports.jsx("span", { className: classNamePM, onClick: onClickPM, children: "PM" })] })] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__body", children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__plate", ref: plateElement, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerCancel, children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__canvas", children: jsxRuntimeExports.jsx("svg", { width: "120rem", height: "120rem", children: jsxRuntimeExports.jsxs("g", { style: {
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock", "rls-size": rlsSize, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__header", children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__title", children: [jsxRuntimeExports.jsx("span", { className: classNameHour, onClick: onClickHour, children: hourFormat }), jsxRuntimeExports.jsx("span", { className: "rls-picker-clock__title__separator", children: ":" }), jsxRuntimeExports.jsx("span", { className: classNameMinute, onClick: onClickMinute, children: minuteFormat })] }), jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__zone", children: [jsxRuntimeExports.jsx("span", { className: classNameAM, onClick: onClickAM, children: "AM" }), jsxRuntimeExports.jsx("span", { className: classNamePM, onClick: onClickPM, children: "PM" })] })] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__body", children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__plate", ref: plateElement, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerCancel, children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__canvas", children: jsxRuntimeExports.jsx("svg", { width: "120rem", height: "120rem", children: jsxRuntimeExports.jsxs("g", { style: {
                                         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 }, value));
@@ -4108,16 +4108,16 @@ function RlsPickerClockComponent({ formControl, onListener, rlsTheme, time }) {
 }
 const RlsPickerClock = memo(RlsPickerClockComponent);
 
-function RlsModalClockComponent({ controller, disabled, formControl, onClose, rlsTheme, time, visible }) {
+function RlsModalClockComponent({ controller, disabled, formControl, rlsSize, onClose, rlsTheme, time, visible }) {
     const onListener = useCallback(({ event, value }) => {
         onClose?.(event !== PickerListenerEvent.Cancel ? value : undefined);
         controller?.close();
     }, [onClose, controller]);
-    return (jsxRuntimeExports.jsx(RlsModal, { className: "rls-modal-clock", controller: controller, visible: visible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerClock, { formControl: formControl, time: time, disabled: disabled, onListener: onListener }) }));
+    return (jsxRuntimeExports.jsx(RlsModal, { className: "rls-modal-clock", controller: controller, visible: visible, rlsSize: rlsSize, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerClock, { formControl: formControl, time: time, disabled: disabled, onListener: onListener }) }));
 }
 const RlsModalClock = memo(RlsModalClockComponent);
 
-function RlsFieldClockComponent({ children, disabled: disabledProps, formControl, identifier, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, time, value: valueInitial }) {
+function RlsFieldClockComponent({ children, disabled: disabledProps, formControl, identifier, msgErrorDisabled, rlsSize, onValue, placeholder, readOnly, rlsTheme, time, value: valueInitial }) {
     const [value, setValue] = useState(formControl?.value ?? valueInitial);
     const [modalIsVisible, setModalIsVisible] = useState(false);
     const disabled = useMemo(() => {
@@ -4162,11 +4162,11 @@ 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 && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: status.icon, onClick: onClickAction }))] }) }), !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 })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-clock", "rls-size": rlsSize, "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 && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: status.icon, onClick: onClickAction }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModalClock, { visible: modalIsVisible, formControl: formControl, time: time, disabled: disabled, onClose: onCloseModal, rlsSize: rlsSize, rlsTheme: rlsTheme })] }));
 }
 const RlsFieldClock = memo(RlsFieldClockComponent);
 
-function RlsPickerColorComponent({ color, formControl, onListener, rlsTheme }) {
+function RlsPickerColorComponent({ color, formControl, rlsSize, onListener, rlsTheme }) {
     const initialColor = useMemo(() => formControl?.value ?? color ?? DEFAULT_COLOR, []);
     const initialHsv = useMemo(() => hexToHsv(initialColor) ?? { h: 258, s: 100, v: 100 }, []);
     const canvasRef = useRef(null);
@@ -4371,14 +4371,14 @@ function RlsPickerColorComponent({ color, formControl, onListener, rlsTheme }) {
         formControl?.setValue(hexColor);
         onListener?.({ event: PickerListenerEvent.Select, value: hexColor });
     }, [formControl, hexColor, onListener]);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-color", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-color__preview", children: jsxRuntimeExports.jsx("div", { ref: canvasRef, className: "rls-picker-color__canvas", style: canvasStyle, "data-slider": "canvas", onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onInactiveSelection, onMouseLeave: onInactiveSelection, onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onInactiveSelection, children: jsxRuntimeExports.jsx("div", { className: "rls-picker-color__indicator", style: {
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-color", "rls-size": rlsSize, "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: "raised", onClick: onSelect, children: labels.colorActionSelect }) })] })] }));
 }
 const RlsPickerColor = memo(RlsPickerColorComponent);
 
-function RlsFieldColorComponent({ children, color, disabled: disabledProps, formControl, identifier, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
+function RlsFieldColorComponent({ children, color, disabled: disabledProps, formControl, identifier, msgErrorDisabled, rlsSize, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
     const [value, setValue] = useState(formControl?.value ?? valueInitial);
     const [modalIsVisible, setModalIsVisible] = useState(false);
     const colorValue = useMemo(() => {
@@ -4421,7 +4421,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: [colorDisplay && (jsxRuntimeExports.jsx("div", { className: "rls-field-color__swatch", style: { backgroundColor: colorDisplay } })), jsxRuntimeExports.jsx("input", { className: "rls-field-color__control", type: "text", value: colorDisplay, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: colorValue ? 'trash-2' : 'color-palette', onClick: onClickAction }))] }) }), !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 }) })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-color", "rls-size": rlsSize, "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: [colorDisplay && (jsxRuntimeExports.jsx("div", { className: "rls-field-color__swatch", style: { backgroundColor: colorDisplay } })), jsxRuntimeExports.jsx("input", { className: "rls-field-color__control", type: "text", value: colorDisplay, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: colorValue ? 'trash-2' : 'color-palette', onClick: onClickAction }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-modal-color", visible: modalIsVisible, rlsSize: rlsSize, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerColor, { formControl: formControl, color: color, disabled: disabled, onListener: onListener }) })] }));
 }
 const RlsFieldColor = memo(RlsFieldColorComponent);
 
@@ -4429,7 +4429,7 @@ const DATE_FORMAT = '{dd}/{mx}/{yy}';
 const DATE_FORMAT_TITLE = '{dw}, {mx} {dd} de {yy}';
 const DATE_RANGE_FORMAT = '{dd}/{mx}/{yy}';
 
-function RlsPickerDateComponent({ automatic, date, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
+function RlsPickerDateComponent({ automatic, date, disabled, formControl, maxDate, minDate, rlsSize, onListener, rlsTheme }) {
     const today = useRef(new Date()); // Initial current date in component
     const _date = useMemo(() => {
         return formControl?.value ?? date ?? today.current;
@@ -4504,20 +4504,20 @@ 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: "raised", onClick: onSelect, children: labels.dateActionSelect }) })] }) }))] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date", "rls-size": rlsSize, "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);
 
-function RlsModalDateComponent({ automatic, controller, date, disabled, formControl, maxDate, minDate, onClose, rlsTheme, visible }) {
+function RlsModalDateComponent({ automatic, controller, date, disabled, formControl, maxDate, minDate, rlsSize, onClose, rlsTheme, visible }) {
     const onListener = useCallback(({ event, value }) => {
         onClose?.(event !== PickerListenerEvent.Cancel ? value : undefined);
         controller?.close();
     }, [onClose, controller]);
-    return (jsxRuntimeExports.jsx(RlsModal, { className: "rls-modal-date", controller: controller, visible: visible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { automatic: automatic, formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) }));
+    return (jsxRuntimeExports.jsx(RlsModal, { className: "rls-modal-date", controller: controller, visible: visible, rlsSize: rlsSize, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { automatic: automatic, formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) }));
 }
 const RlsModalDate = memo(RlsModalDateComponent);
 
-function RlsFieldDateComponent({ children, date, disabled: disabledProps, formControl, format, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
+function RlsFieldDateComponent({ children, date, disabled: disabledProps, formControl, format, identifier, maxDate, minDate, msgErrorDisabled, rlsSize, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
     const today = useMemo(() => new Date(), []);
     const [value, setValue] = useState(formControl?.value ?? valueInitial);
     const [modalIsVisible, setModalIsVisible] = useState(false);
@@ -4574,7 +4574,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 && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: status.icon, onClick: onClickAction }))] }) }), !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 })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date", "rls-size": rlsSize, "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 && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: status.icon, onClick: onClickAction }))] }) }), !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, rlsSize: rlsSize, rlsTheme: rlsTheme })] }));
 }
 const RlsFieldDate = memo(RlsFieldDateComponent);
 
@@ -4584,7 +4584,7 @@ function rangeFormatTemplate({ maxDate, minDate }) {
     return `${minFormat} - ${maxFormat}`;
 }
 
-function RlsPickerDateRangeComponent({ automatic, date: datePicker, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
+function RlsPickerDateRangeComponent({ automatic, date: datePicker, disabled, formControl, maxDate, minDate, rlsSize, onListener, rlsTheme }) {
     const _date = useMemo(() => normalizeMinTime(datePicker ?? new Date()), [datePicker]);
     const _range = useMemo(() => formControl?.value ?? DateRange.now(), [formControl?.value]);
     const yearControl = useReactControl(_date.getFullYear());
@@ -4646,20 +4646,20 @@ 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: "raised", onClick: onSelect, children: labels.dateActionSelect }) })] }) })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range", "rls-size": rlsSize, "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);
 
-function RlsModalDateRangeComponent({ automatic, controller, date, disabled, formControl, maxDate, minDate, onClose, rlsTheme, visible }) {
+function RlsModalDateRangeComponent({ automatic, controller, date, disabled, formControl, maxDate, minDate, rlsSize, onClose, rlsTheme, visible }) {
     const onListener = useCallback(({ event, value }) => {
         onClose?.(event !== PickerListenerEvent.Cancel ? value : undefined);
         controller?.close();
     }, [onClose, controller]);
-    return (jsxRuntimeExports.jsx(RlsModal, { className: "rls-modal-date-range", controller: controller, visible: visible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { automatic: automatic, formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) }));
+    return (jsxRuntimeExports.jsx(RlsModal, { className: "rls-modal-date-range", controller: controller, visible: visible, rlsSize: rlsSize, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { automatic: automatic, formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) }));
 }
 const RlsModalDateRange = memo(RlsModalDateRangeComponent);
 
-function RlsFieldDateRangeComponent({ children, date, disabled: disabledProps, formControl, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
+function RlsFieldDateRangeComponent({ children, date, disabled: disabledProps, formControl, identifier, maxDate, minDate, msgErrorDisabled, rlsSize, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
     const currentDate = useMemo(() => date ?? new Date(), [date]);
     const [value, setValue] = useState(formControl?.value || valueInitial);
     const [modalIsVisible, setModalIsVisible] = useState(false);
@@ -4705,11 +4705,11 @@ 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 && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: status.icon, onClick: onClickAction }))] }) }), !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 })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date-range", "rls-size": rlsSize, "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 && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: status.icon, onClick: onClickAction }))] }) }), !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, rlsSize: rlsSize, rlsTheme: rlsTheme })] }));
 }
 const RlsFieldDateRange = memo(RlsFieldDateRangeComponent);
 
-function RlsFieldListInner({ render, suggestions, action, children, formControl, fieldList, msgErrorDisabled, placeholder, rlsTheme, ...props }) {
+function RlsFieldListInner({ render, suggestions, action, children, formControl, fieldList, msgErrorDisabled, rlsSize, placeholder, rlsTheme, ...props }) {
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
@@ -4720,7 +4720,7 @@ function RlsFieldListInner({ render, suggestions, action, children, formControl,
         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.jsx(RlsChip, { onRemove: !props.readOnly && !disabled
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: fieldList.refContent, className: className, "rls-size": rlsSize, "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.jsx(RlsChip, { onRemove: !props.readOnly && !disabled
                                     ? fieldList.onRemoveElement(item)
                                     : undefined, children: item.description }, index)))) }), !props.readOnly && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-down", onClick: fieldList.onClickAction }))] }) }), !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, refAnchor: fieldList.refContent, refList: fieldList.refList, refSuggestions: fieldList.refSuggestions, onClickElement: fieldList.onClickElement, onKeydownElement: fieldList.onKeydownElement, onClickBackdrop: fieldList.onClickBackdrop, onHiddenAnchor: fieldList.onClickBackdrop })] }));
 }
@@ -4738,7 +4738,7 @@ const RlsFieldList = memo(RlsFieldListComponent);
 
 function RlsFieldSelectTemplateComponent(props) {
     const select = useFieldSelect(props);
-    const { render, suggestions, action, children, formControl, msgErrorDisabled, placeholder, rlsTheme, unremovable } = props;
+    const { render, suggestions, action, children, formControl, msgErrorDisabled, rlsSize, placeholder, rlsTheme, unremovable } = props;
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
@@ -4748,7 +4748,7 @@ function RlsFieldSelectTemplateComponent(props) {
         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 && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: !unremovable && !!select.value ? 'close' : 'arrow-ios-down', onClick: select.onClickAction }))] }) }), !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, refAnchor: select.refContent, refList: select.refList, refSuggestions: select.refSuggestions, onClickElement: select.onClickElement, onKeydownElement: select.onKeydownElement, onClickBackdrop: select.onClickBackdrop, onHiddenAnchor: select.onClickBackdrop })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.refContent, className: className, "rls-size": rlsSize, "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 && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: !unremovable && !!select.value ? 'close' : 'arrow-ios-down', onClick: select.onClickAction }))] }) }), !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, refAnchor: select.refContent, refList: select.refList, refSuggestions: select.refSuggestions, onClickElement: select.onClickElement, onKeydownElement: select.onKeydownElement, onClickBackdrop: select.onClickBackdrop, onHiddenAnchor: select.onClickBackdrop })] }));
 }
 const RlsFieldSelectTemplate = memo(RlsFieldSelectTemplateComponent);
 function RlsFieldSelectComponent(props) {
@@ -4757,9 +4757,9 @@ function RlsFieldSelectComponent(props) {
 }
 const RlsFieldSelect = memo(RlsFieldSelectComponent);
 
-function RlsFormNavigationComponent({ children, className, controller, visible, rlsTheme }) {
+function RlsFormNavigationComponent({ children, className, controller, rlsSize, visible, rlsTheme }) {
     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);
+    return ReactDOM.createPortal(jsxRuntimeExports.jsx("div", { className: classNameForm, "rls-size": rlsSize, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-form-navigation__component", children: children }) }), document.body);
 }
 const RlsFormNavigation = memo(RlsFormNavigationComponent);
 
@@ -5106,7 +5106,7 @@ function RlsImageEditorComponent(props) {
             context?.putImageData(originalImage.current, 0, 0);
         }
     }, []);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-image-editor", children: [jsxRuntimeExports.jsx("div", { ref: refBody, className: "rls-image-editor__body", children: jsxRuntimeExports.jsxs("div", { ref: refImage, className: "rls-image-editor__body__image", children: [jsxRuntimeExports.jsx("div", { ref: refSelection, className: "rls-image-editor__body__selection" }), jsxRuntimeExports.jsx("div", { ref: refOverlayTop, className: "rls-image-editor__body__overlay--top" }), jsxRuntimeExports.jsx("div", { ref: refOverlayRight, className: "rls-image-editor__body__overlay--right" }), jsxRuntimeExports.jsx("div", { ref: refOverlayBottom, className: "rls-image-editor__body__overlay--bottom" }), jsxRuntimeExports.jsx("div", { ref: refOverlayLeft, className: "rls-image-editor__body__overlay--left" }), jsxRuntimeExports.jsx("canvas", { ref: refCanvas })] }) }), jsxRuntimeExports.jsxs("div", { className: "rls-image-editor__footer", children: [jsxRuntimeExports.jsx("div", { className: "rls-image-editor__sliders", children: jsxRuntimeExports.jsx(RlsSlider, { prefixIcon: "crop", value: selection, minValue: MIN_SLIDER_VALUE, maxValue: MAX_SLIDER_VALUE, onValue: setSelection, disabled: props.disabled }) }), jsxRuntimeExports.jsxs("div", { className: "rls-image-editor__actions", children: [props.children, jsxRuntimeExports.jsx("button", { className: "rls-image-editor__action", "rls-theme": "standard", onClick: onRestore, disabled: props.disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: "refresh" }) }), jsxRuntimeExports.jsx("button", { className: "rls-image-editor__action", "rls-theme": "success", onClick: onCropImage, disabled: props.disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: "checkmark-circle-out" }) })] })] }), jsxRuntimeExports.jsx("canvas", { ref: refPicture })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-image-editor", "rls-size": props.rlsSize, children: [jsxRuntimeExports.jsx("div", { ref: refBody, className: "rls-image-editor__body", children: jsxRuntimeExports.jsxs("div", { ref: refImage, className: "rls-image-editor__body__image", children: [jsxRuntimeExports.jsx("div", { ref: refSelection, className: "rls-image-editor__body__selection" }), jsxRuntimeExports.jsx("div", { ref: refOverlayTop, className: "rls-image-editor__body__overlay--top" }), jsxRuntimeExports.jsx("div", { ref: refOverlayRight, className: "rls-image-editor__body__overlay--right" }), jsxRuntimeExports.jsx("div", { ref: refOverlayBottom, className: "rls-image-editor__body__overlay--bottom" }), jsxRuntimeExports.jsx("div", { ref: refOverlayLeft, className: "rls-image-editor__body__overlay--left" }), jsxRuntimeExports.jsx("canvas", { ref: refCanvas })] }) }), jsxRuntimeExports.jsxs("div", { className: "rls-image-editor__footer", children: [jsxRuntimeExports.jsx("div", { className: "rls-image-editor__sliders", children: jsxRuntimeExports.jsx(RlsSlider, { prefixIcon: "crop", value: selection, minValue: MIN_SLIDER_VALUE, maxValue: MAX_SLIDER_VALUE, onValue: setSelection, disabled: props.disabled }) }), jsxRuntimeExports.jsxs("div", { className: "rls-image-editor__actions", children: [props.children, jsxRuntimeExports.jsx("button", { className: "rls-image-editor__action", "rls-theme": "standard", onClick: onRestore, disabled: props.disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: "refresh" }) }), jsxRuntimeExports.jsx("button", { className: "rls-image-editor__action", "rls-theme": "success", onClick: onCropImage, disabled: props.disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: "checkmark-circle-out" }) })] })] }), jsxRuntimeExports.jsx("canvas", { ref: refPicture })] }));
 }
 const RlsImageEditor = memo(RlsImageEditorComponent);
 
@@ -5196,11 +5196,11 @@ function RlsImageChooserComponent(props) {
             setSrc(props.src);
         }
     }, [props.src]);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-image-chooser", children: [jsxRuntimeExports.jsx("div", { className: "rls-image-chooser__avatar", onClick: controller.onImageChooser, children: src && jsxRuntimeExports.jsx("img", { src: src }) }), controller.RlsImageEditorChooser] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-image-chooser", "rls-size": props.rlsSize, children: [jsxRuntimeExports.jsx("div", { className: "rls-image-chooser__avatar", onClick: controller.onImageChooser, children: src && jsxRuntimeExports.jsx("img", { src: src }) }), controller.RlsImageEditorChooser] }));
 }
 const RlsImageChooser = memo(RlsImageChooserComponent);
 
-function RlsLedColorComponent({ className, color, disabled: disabledProps, formControl, identifier, onValue, readOnly, rlsTheme, value: valueInitial }) {
+function RlsLedColorComponent({ className, color, disabled: disabledProps, formControl, identifier, rlsSize, onValue, readOnly, rlsTheme, value: valueInitial }) {
     const [value, setValue] = useState(formControl?.value ?? valueInitial);
     const [modalIsVisible, setModalIsVisible] = useState(false);
     const [pickerKey, setPickerKey] = useState(0);
@@ -5236,11 +5236,11 @@ function RlsLedColorComponent({ className, color, disabled: disabledProps, formC
     const onBackdrop = useCallback(() => {
         setModalIsVisible(false);
     }, []);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: classNameLed, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("button", { className: "rls-led-color__trigger", type: "button", disabled: disabled, onClick: onClickLed, children: jsxRuntimeExports.jsx(RlsLed, { color: ledColor, rlsTheme: rlsTheme }) }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-modal-color", visible: modalIsVisible, rlsTheme: rlsTheme, onBackdrop: onBackdrop, children: jsxRuntimeExports.jsx(RlsPickerColor, { formControl: formControl, color: ledColor ?? color, disabled: disabled, onListener: onListener }, pickerKey) })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: classNameLed, "rls-size": rlsSize, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("button", { className: "rls-led-color__trigger", type: "button", disabled: disabled, onClick: onClickLed, children: jsxRuntimeExports.jsx(RlsLed, { color: ledColor, rlsTheme: rlsTheme }) }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-modal-color", visible: modalIsVisible, rlsSize: rlsSize, rlsTheme: rlsTheme, onBackdrop: onBackdrop, children: jsxRuntimeExports.jsx(RlsPickerColor, { formControl: formControl, color: ledColor ?? color, disabled: disabled, onListener: onListener }, pickerKey) })] }));
 }
 const RlsLedColor = memo(RlsLedColorComponent);
 
-function RlsModalSheetComponent({ autoclose, children, className, controller, onAutoClose, visible, rlsTheme }) {
+function RlsModalSheetComponent({ autoclose, children, className, controller, rlsSize, onAutoClose, visible, rlsTheme }) {
     const classNameModal = renderClassStatus('rls-modal-sheet', { visible: controller?.visible ?? visible }, className);
     const onClickBackdrop = useCallback(() => {
         if (autoclose) {
@@ -5248,7 +5248,7 @@ function RlsModalSheetComponent({ autoclose, children, className, controller, on
         }
         onAutoClose?.();
     }, [autoclose, controller, onAutoClose]);
-    return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameModal, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal-sheet__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal-sheet__backdrop", onClick: onClickBackdrop })] }), document.body);
+    return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameModal, "rls-size": rlsSize, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal-sheet__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal-sheet__backdrop", onClick: onClickBackdrop })] }), document.body);
 }
 const RlsModalSheet = memo(RlsModalSheetComponent);
 
@@ -5258,9 +5258,9 @@ let _id = 0;
 function generateId() {
     return `rls-notification-${++_id}`;
 }
-function RlsNotification({ content, icon, onClose, rlsTheme, title, visible }) {
+function RlsNotification({ content, icon, rlsSize, onClose, rlsTheme, title, 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 })] })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-size": rlsSize, "rls-theme": rlsTheme, children: [icon && (jsxRuntimeExports.jsx("div", { className: "rls-notification__avatar", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })), jsxRuntimeExports.jsxs("div", { className: "rls-notification__component", children: [jsxRuntimeExports.jsxs("div", { className: "rls-notification__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-notification__title", children: title }), jsxRuntimeExports.jsx("button", { onClick: onClose, children: jsxRuntimeExports.jsx(RlsIcon, { value: "close" }) })] }), jsxRuntimeExports.jsx("div", { className: "rls-notification__content", children: content })] })] }));
 }
 function useNotifications() {
     const [notifications, setNotifications] = useState([]);
@@ -5288,11 +5288,11 @@ function useNotifications() {
         }, DURATION_ANIMATION$1);
     }, []);
     const RlsNotifications = useMemo(() => {
-        return function RlsNotifications(props) {
+        return function RlsNotifications({ rlsSize, ...props }) {
             const className = renderClassStatus('rls-notifications', {
                 visible: notificationsRef.current.length > 0
             });
-            return ReactDOM.createPortal(jsxRuntimeExports.jsx("div", { className: className, ...props, children: notificationsRef.current.map((notification) => (jsxRuntimeExports.jsx(RlsNotification, { ...notification.config, visible: notification.visible, onClose: () => remove(notification.id) }, notification.id))) }), document.body);
+            return ReactDOM.createPortal(jsxRuntimeExports.jsx("div", { className: className, "rls-size": rlsSize, ...props, children: notificationsRef.current.map((notification) => (jsxRuntimeExports.jsx(RlsNotification, { ...notification.config, visible: notification.visible, onClose: () => remove(notification.id) }, notification.id))) }), document.body);
         };
     }, [remove]);
     const notify = useCallback((config) => {
@@ -5335,9 +5335,9 @@ function calculateDuration({ length }) {
     }
     return duration + DURATION_RESET;
 }
-function RlsSnackbarComponent({ content, onClose, icon, rlsTheme, title, visible }) {
+function RlsSnackbarComponent({ content, onClose, icon, rlsSize, rlsTheme, title, 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 })] })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-size": rlsSize, "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);
 const RlsSnackbarNode = RlsSnackbar;