@rolster/react-components 18.16.1 → 18.17.0

package/dist/cjs/assets/{index-DVCffPUL.css → index-CQEyyT3g.css}

@@ -575,6 +575,16 @@
   box-sizing: border-box;
 }
 
+.rls-label {
+  font-size: var(--rlc-label-font-size);
+  letter-spacing: var(--rlc-label-letter-spacing);
+  line-height: var(--rlc-label-height);
+  font-weight: inherit;
+}
+.rls-label[rls-theme] {
+  color: var(--rls-theme-color-500);
+}
+
 .rls-message-icon {
   --rlc-icon-color: var(--rls-theme-color-500);
   --rlc-icon-dimesion: var(--rls-sizing-x8);
@@ -589,8 +599,9 @@
 }
 
 .rls-poster {
+  --pvt-background: var(--rls-theme-color-100);
   --pvt-border-content: none;
-  --pvt-border-color: transparent;
+  --pvt-border-color: var(--rls-app-color-100);
   position: relative;
   display: block;
   width: auto;
@@ -614,9 +625,10 @@
 .rls-poster--contrast[rls-theme] {
   --pvt-border-color: var(--rls-theme-color-500);
   color: var(--rls-theme-color-700);
-  background: var(--rls-theme-color-100);
+  background: var(--pvt-background);
 }
 .rls-poster--outline {
+  --pvt-background: var(--rls-theme-color-050);
   --pvt-border-content: 1px solid var(--pvt-border-color);
 }
 

package/dist/cjs/index.js

@@ -1403,24 +1403,24 @@ function RlsIcon({ value, skeleton }) {
     return (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-icon', { skeleton }), children: jsxRuntimeExports.jsx("i", { className: `rls-icon-${value}` }) }));
 }
 
-function RlsButton({ type, children, disabled, prefixIcon, suffixIcon, rlsTheme, onClick }) {
-    return (jsxRuntimeExports.jsx("button", { className: "rls-button", onClick: onClick, "rls-theme": rlsTheme, disabled: disabled, children: jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-button__content', { type }), children: [prefixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: prefixIcon }), children && jsxRuntimeExports.jsx("div", { className: "rls-button__label", children: children }), suffixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: suffixIcon })] }) }));
+function RlsButton({ type, children, disabled, identifier, prefixIcon, suffixIcon, rlsTheme, onClick }) {
+    return (jsxRuntimeExports.jsx("button", { id: identifier, className: "rls-button", onClick: onClick, "rls-theme": rlsTheme, disabled: disabled, children: jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-button__content', { type }), children: [prefixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: prefixIcon }), children && jsxRuntimeExports.jsx("div", { className: "rls-button__label", children: children }), suffixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: suffixIcon })] }) }));
 }
 
-function RlsButtonAction({ icon, disabled, tooltip, onClick }) {
-    return (jsxRuntimeExports.jsxs("button", { className: "rls-button-action", onClick: onClick, disabled: disabled, children: [jsxRuntimeExports.jsx("div", { className: "rls-button-action__content", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }), tooltip && (jsxRuntimeExports.jsx("div", { className: "rls-button-action__tooltip rls-overline-medium", children: jsxRuntimeExports.jsx("span", { children: tooltip }) }))] }));
+function RlsButtonAction({ icon, disabled, identifier, onClick, tooltip }) {
+    return (jsxRuntimeExports.jsxs("button", { id: identifier, className: "rls-button-action", onClick: onClick, disabled: disabled, children: [jsxRuntimeExports.jsx("div", { className: "rls-button-action__content", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }), tooltip && (jsxRuntimeExports.jsx("div", { className: "rls-button-action__tooltip rls-overline-medium", children: jsxRuntimeExports.jsx("span", { children: tooltip }) }))] }));
 }
 
-function RlsCheckBox({ checked, disabled, onClick, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-checkbox', { checked, disabled }), onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-checkbox__component" }) }));
+function RlsCheckBox({ checked, disabled, identifier, onClick, rlsTheme }) {
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: renderClassStatus('rls-checkbox', { checked, disabled }), onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-checkbox__component" }) }));
 }
-function RlsCheckBoxControl({ formControl, disabled, rlsTheme }) {
-    return (jsxRuntimeExports.jsx(RlsCheckBox, { checked: !!formControl.value, disabled: disabled, onClick: () => {
+function RlsCheckBoxControl({ formControl, disabled, identifier, rlsTheme }) {
+    return (jsxRuntimeExports.jsx(RlsCheckBox, { identifier: identifier, checked: !!formControl.value, disabled: disabled, onClick: () => {
             formControl.setValue(!formControl.value);
         }, rlsTheme: rlsTheme }));
 }
 
-function RlsInput({ children, disabled, formControl, onValue, placeholder, type, value }) {
+function RlsInput({ children, disabled, formControl, identifier, onValue, placeholder, type, value }) {
     const [focused, setFocused] = require$$0.useState(false);
     function setValue(value) {
         formControl?.setValue(value);
@@ -1437,31 +1437,31 @@ function RlsInput({ children, disabled, formControl, onValue, placeholder, type,
         formControl?.blur();
         setFocused(false);
     }
-    return (jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-input', {
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: renderClassStatus('rls-input', {
             focused: formControl?.focused ?? focused,
             disabled: formControl?.disabled || disabled
         }), children: [jsxRuntimeExports.jsx("input", { ref: formControl?.elementRef, className: "rls-input__component", autoComplete: "off", type: type ?? 'text', placeholder: placeholder, disabled: formControl?.disabled || disabled, onFocus: onFocus, onBlur: onBlur, onChange: onChange, value: formControl?.value ?? value ?? '' }), jsxRuntimeExports.jsx("span", { className: "rls-input__value", children: children })] }));
 }
 
-function RlsInputMoney({ decimals, disabled, formControl, onValue, placeholder, symbol, value }) {
+function RlsInputMoney({ decimals, disabled, formControl, identifier, onValue, placeholder, symbol, value }) {
     const [valueInput, setValueInput] = require$$0.useState(value || 0);
     function onChange(value) {
         !formControl && setValueInput(value);
         onValue && onValue(value);
     }
-    return (jsxRuntimeExports.jsx("div", { className: "rls-input-money", children: jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, type: "number", value: value, disabled: disabled, placeholder: placeholder, onValue: onChange, children: jsxRuntimeExports.jsx(RlsAmount, { value: formControl?.value ?? value ?? valueInput, symbol: symbol, decimals: decimals }) }) }));
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-money", children: jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, type: "number", value: value, disabled: disabled, placeholder: placeholder, onValue: onChange, children: jsxRuntimeExports.jsx(RlsAmount, { value: formControl?.value ?? value ?? valueInput, symbol: symbol, decimals: decimals }) }) }));
 }
 
-function RlsInputNumber({ disabled, formControl, onValue, placeholder, value }) {
+function RlsInputNumber({ disabled, formControl, identifier, onValue, placeholder, value }) {
     const [valueInput, setValueInput] = require$$0.useState(value ?? 0);
     function onChange(value) {
         !formControl && setValueInput(value);
         onValue && onValue(value);
     }
-    return (jsxRuntimeExports.jsx("div", { className: "rls-input-number", children: jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, type: "number", value: value, disabled: disabled, placeholder: placeholder, onValue: onChange, children: formControl?.value ?? value ?? valueInput }) }));
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-number", children: jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, type: "number", value: value, disabled: disabled, placeholder: placeholder, onValue: onChange, children: formControl?.value ?? value ?? valueInput }) }));
 }
 
-function RlsInputPassword({ disabled, formControl, onValue, placeholder, type }) {
+function RlsInputPassword({ disabled, formControl, identifier, onValue, placeholder, type }) {
     const [focused, setFocused] = require$$0.useState(false);
     function onChange(event) {
         formControl?.setValue(event.target.value);
@@ -1475,23 +1475,23 @@ function RlsInputPassword({ disabled, formControl, onValue, placeholder, type })
         formControl?.blur();
         setFocused(false);
     }
-    return (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-input-password', {
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: renderClassStatus('rls-input-password', {
             focused: formControl?.focused ?? focused,
             disabled: formControl?.disabled || disabled
         }), children: jsxRuntimeExports.jsx("input", { className: "rls-input-password__component", autoComplete: "off", type: type ?? 'password', placeholder: placeholder, disabled: disabled, onFocus: onFocus, onBlur: onBlur, onChange: onChange }) }));
 }
 
-function RlsInputSearch({ formControl, onSearch, placeholder }) {
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-input-search", children: [jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, placeholder: placeholder }), onSearch && jsxRuntimeExports.jsx(RlsButtonAction, { icon: "search", onClick: onSearch })] }));
+function RlsInputSearch({ formControl, identifier, onSearch, placeholder }) {
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-input-search", children: [jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, placeholder: placeholder }), onSearch && jsxRuntimeExports.jsx(RlsButtonAction, { icon: "search", onClick: onSearch })] }));
 }
 
-function RlsInputText({ disabled, formControl, onValue, placeholder, value }) {
+function RlsInputText({ disabled, formControl, identifier, onValue, placeholder, value }) {
     const [valueInput, setValueInput] = require$$0.useState(value ?? '');
     function onChange(value) {
         !formControl && setValueInput(value);
         onValue && onValue(value);
     }
-    return (jsxRuntimeExports.jsx("div", { className: "rls-input-text", children: jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, type: "text", value: value, disabled: disabled, placeholder: placeholder, onValue: onChange, children: formControl?.value ?? value ?? valueInput }) }));
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-text", children: jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, type: "text", value: value, disabled: disabled, placeholder: placeholder, onValue: onChange, children: formControl?.value ?? value ?? valueInput }) }));
 }
 
 function RlsLabel({ children, rlsTheme }) {
@@ -1522,8 +1522,8 @@ function RlsProgressCircular({ 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 RlsRadioButton({ checked, disabled, rlsTheme, onClick }) {
-    return (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-radiobutton', { checked, disabled }), onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-radiobutton__component" }) }));
+function RlsRadioButton({ checked, disabled, identifier, rlsTheme, onClick }) {
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: renderClassStatus('rls-radiobutton', { checked, disabled }), onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-radiobutton__component" }) }));
 }
 
 function RlsSkeleton({ rlsTheme }) {
@@ -1534,11 +1534,11 @@ function RlsSkeletonText({ active, children, rlsTheme }) {
     return (jsxRuntimeExports.jsx("div", { className: "rls-skeleton-text", "rls-theme": rlsTheme, children: active ? (jsxRuntimeExports.jsx(RlsSkeleton, {})) : (jsxRuntimeExports.jsx("label", { className: "rls-skeleton-text__value", children: children })) }));
 }
 
-function RlsSwitch({ checked, disabled, rlsTheme, onClick }) {
-    return (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-switch', { checked, disabled }), onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsxs("div", { className: "rls-switch__component", children: [jsxRuntimeExports.jsx("div", { className: "rls-switch__component__element" }), jsxRuntimeExports.jsx("div", { className: "rls-switch__component__bar" })] }) }));
+function RlsSwitch({ checked, disabled, identifier, onClick, rlsTheme }) {
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: renderClassStatus('rls-switch', { checked, disabled }), onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsxs("div", { className: "rls-switch__component", children: [jsxRuntimeExports.jsx("div", { className: "rls-switch__component__element" }), jsxRuntimeExports.jsx("div", { className: "rls-switch__component__bar" })] }) }));
 }
-function RlsSwitchControl({ formControl, disabled, rlsTheme }) {
-    return (jsxRuntimeExports.jsx(RlsSwitch, { checked: formControl.value || false, disabled: disabled, onClick: () => {
+function RlsSwitchControl({ formControl, disabled, identifier, rlsTheme }) {
+    return (jsxRuntimeExports.jsx(RlsSwitch, { identifier: identifier, checked: formControl.value || false, disabled: disabled, onClick: () => {
             formControl.setValue(!formControl.value);
         }, rlsTheme: rlsTheme }));
 }
@@ -1587,43 +1587,43 @@ function RlsMessageFormError({ className, formControl }) {
     return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: formControl?.wrong && (jsxRuntimeExports.jsx("div", { className: className, children: jsxRuntimeExports.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl?.error?.message }) })) }));
 }
 
-function RlsFieldMoney({ children, decimals, disabled, formControl, msgErrorDisabled, onValue, placeholder, symbol, rlsTheme, value }) {
-    return (jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-box', {
+function RlsFieldMoney({ children, decimals, disabled, formControl, identifier, msgErrorDisabled, onValue, placeholder, symbol, rlsTheme, value }) {
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: renderClassStatus('rls-field-box', {
             focused: formControl?.focused,
             error: formControl?.wrong,
             disabled: formControl?.disabled || disabled
         }, 'rls-field-money'), "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputMoney, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, symbol: symbol, decimals: decimals, onValue: onValue }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
-function RlsFieldNumber({ children, disabled, formControl, msgErrorDisabled, onValue, placeholder, rlsTheme, value }) {
-    return (jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-box', {
+function RlsFieldNumber({ children, disabled, formControl, identifier, msgErrorDisabled, onValue, placeholder, rlsTheme, value }) {
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: renderClassStatus('rls-field-box', {
             focused: formControl?.focused,
             error: formControl?.wrong,
             disabled: formControl?.disabled || disabled
         }, 'rls-field-number'), "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputNumber, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
-function RlsFieldPassword({ children, disabled, formControl, msgErrorDisabled, placeholder, rlsTheme }) {
+function RlsFieldPassword({ children, disabled, formControl, identifier, msgErrorDisabled, placeholder, rlsTheme }) {
     const [password, setPassword] = require$$0.useState(true);
     function onToggleInput() {
         setPassword(!password);
     }
-    return (jsxRuntimeExports.jsxs("div", { className: renderClassStatus(' rls-field-box', {
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: renderClassStatus(' rls-field-box', {
             focused: formControl?.focused,
             error: formControl?.wrong,
             disabled: formControl?.disabled || disabled
         }, 'rls-field-password'), "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { 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, { formControl: formControl, disabled: disabled, placeholder: placeholder, type: password ? 'password' : 'text' }), jsxRuntimeExports.jsx(RlsButtonAction, { icon: password ? 'eye' : 'eye-off', onClick: onToggleInput })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
-function RlsFieldText({ children, disabled, formControl, msgErrorDisabled, onValue, placeholder, rlsTheme, value }) {
-    return (jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-box', {
+function RlsFieldText({ children, disabled, formControl, identifier, msgErrorDisabled, onValue, placeholder, rlsTheme, value }) {
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: renderClassStatus('rls-field-box', {
             focused: formControl?.focused,
             error: formControl?.wrong,
             disabled: formControl?.disabled || disabled
         }, 'rls-field-text'), "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputText, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
-function RlsLabelCheckBox({ children, disabled, extended, formControl, rlsTheme }) {
+function RlsLabelCheckBox({ children, disabled, extended, identifier, formControl, rlsTheme }) {
     const [checked, setChecked] = require$$0.useState(!!formControl?.value);
     require$$0.useEffect(() => {
         setChecked(!!formControl?.value);
@@ -1636,13 +1636,13 @@ function RlsLabelCheckBox({ children, disabled, extended, formControl, rlsTheme
             setChecked(!checked);
         }
     }
-    return (jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-label-checkbox', {
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: renderClassStatus('rls-label-checkbox', {
             disabled,
             extended
         }), "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-checkbox__component", onClick: onToggle, children: jsxRuntimeExports.jsx(RlsCheckBox, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("label", { className: "rls-label-checkbox__text", children: children })] }));
 }
 
-function RlsLabelRadioButton({ children, disabled, extended, formControl, rlsTheme, value }) {
+function RlsLabelRadioButton({ children, disabled, extended, identifier, formControl, rlsTheme, value }) {
     const [checked, setChecked] = require$$0.useState(formControl?.value === value);
     require$$0.useEffect(() => {
         setChecked(formControl?.value === value);
@@ -1650,13 +1650,13 @@ function RlsLabelRadioButton({ children, disabled, extended, formControl, rlsThe
     function onSelect() {
         formControl && formControl?.setValue(value);
     }
-    return (jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-label-radiobutton', {
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: renderClassStatus('rls-label-radiobutton', {
             disabled,
             extended
         }), "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-radiobutton__component", onClick: onSelect, children: jsxRuntimeExports.jsx(RlsRadioButton, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("label", { className: "rls-label-radiobutton__text", children: children })] }));
 }
 
-function RlsLabelSwitch({ children, disabled, extended, formControl, rlsTheme }) {
+function RlsLabelSwitch({ children, disabled, extended, identifier, formControl, rlsTheme }) {
     const [checked, setChecked] = require$$0.useState(!!formControl?.value);
     require$$0.useEffect(() => {
         setChecked(!!formControl?.value);
@@ -1669,7 +1669,7 @@ function RlsLabelSwitch({ children, disabled, extended, formControl, rlsTheme })
             setChecked(!checked);
         }
     }
-    return (jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-label-switch', { disabled, extended }), "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-switch__component", onClick: onToggle, children: jsxRuntimeExports.jsx(RlsSwitch, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("label", { className: "rls-label-switch__text", children: children })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: renderClassStatus('rls-label-switch', { disabled, extended }), "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-switch__component", onClick: onToggle, children: jsxRuntimeExports.jsx(RlsSwitch, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("label", { className: "rls-label-switch__text", children: children })] }));
 }
 
 function RlsPagination({ suggestions, count, filter, onPagination }) {
@@ -2292,7 +2292,7 @@ function RlsFieldAutocompleteTemplate(props) {
         error: formControl?.wrong,
         selected: !!controller.value
     }, 'rls-field-list rls-field-autocomplete');
-    return (jsxRuntimeExports.jsxs("div", { ref: controller.contentRef, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { 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: controller.value, onClick: autocomplete.onClickControl }), !hiddenIcon && controller.value && (jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: autocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: "trash-2" }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: controller.contentRef, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { 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: controller.value, onClick: autocomplete.onClickControl }), !hiddenIcon && controller.value && (jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: autocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: "trash-2" }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
                     visible: controller.modalIsVisible,
                     higher: controller.higher,
                     hide: !controller.modalIsVisible
@@ -2371,7 +2371,7 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
 }
 
 const FORMAT_DATE = '{dd}/{mx}/{aa}';
-function RlsFieldDate({ children, date, disabled, formControl, format, maxDate, minDate, msgErrorDisabled, onValue, placeholder, rlsTheme, value: defaultValue }) {
+function RlsFieldDate({ children, date, disabled, formControl, format, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, rlsTheme, value: defaultValue }) {
     const today = new Date(); // Initial current date in component
     const [value, setValue] = require$$0.useState(formControl?.value || defaultValue);
     const [modalIsVisible, setModalIsVisible] = require$$0.useState(false);
@@ -2404,7 +2404,7 @@ function RlsFieldDate({ children, date, disabled, formControl, format, maxDate,
     const valueInput = value
         ? dates.dateFormatTemplate(value, format || FORMAT_DATE)
         : '';
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), children: [children && jsxRuntimeExports.jsx("label", { 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: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ event, value }) => {
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), children: [children && jsxRuntimeExports.jsx("label", { 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: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ event, value }) => {
                         event !== components.PickerListenerEvent.Cancel && onChange(value);
                         formControl?.touch();
                         setModalIsVisible(false);
@@ -2463,7 +2463,7 @@ function RlsPickerDateRange({ automatic, date: datePicker, disabled, formControl
                 }), 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: "ghost", onClick: onCancel, children: reactI18n('dateActionCancel') }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "raised", onClick: onSelect, children: reactI18n('dateActionSelect') }) })] }) })] }));
 }
 
-function RlsFieldDateRange({ children, date: datePicker, disabled, formControl, maxDate, minDate, msgErrorDisabled, onValue, placeholder, rlsTheme, value: defaultValue }) {
+function RlsFieldDateRange({ children, date: datePicker, disabled, formControl, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, rlsTheme, value: defaultValue }) {
     const currentDate = datePicker || new Date();
     const [value, setValue] = require$$0.useState(formControl?.value || defaultValue);
     const [modalIsVisible, setModalIsVisible] = require$$0.useState(false);
@@ -2484,7 +2484,7 @@ function RlsFieldDateRange({ children, date: datePicker, disabled, formControl,
         setValue(value);
         onValue && onValue(value);
     }
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), children: [children && jsxRuntimeExports.jsx("label", { 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: value ? rangeFormatTemplate(value) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ event, value }) => {
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), children: [children && jsxRuntimeExports.jsx("label", { 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: value ? rangeFormatTemplate(value) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ event, value }) => {
                         event !== components.PickerListenerEvent.Cancel && onChange(value);
                         formControl?.touch();
                         setModalIsVisible(false);
@@ -2572,7 +2572,7 @@ function RlsFieldSelectTemplate(props) {
         disabled,
         error: formControl?.wrong
     }, 'rls-field-list rls-field-select');
-    return (jsxRuntimeExports.jsxs("div", { ref: controller.contentRef, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { 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: controller.inputRef, className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: controller.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput }), jsxRuntimeExports.jsx("button", { className: renderClassStatus('rls-field-list__action', {
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: controller.contentRef, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { 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: controller.inputRef, className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: controller.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput }), jsxRuntimeExports.jsx("button", { className: renderClassStatus('rls-field-list__action', {
                                 visible: controller.modalIsVisible
                             }), disabled: disabled, onClick: select.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-down" }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
                     visible: controller.modalIsVisible,