@rolster/react-components 18.25.4 → 18.25.6

package/dist/es/assets/{index-C4DYcbf0.css → index-C4vQ44JP.css}

@@ -1311,7 +1311,7 @@
 
 .rls-field-readonly {
   --rlc-fieldbox-body-padding: var(--rls-sizing-x4);
-  --pvt-font-color: var(--rlc-input-font-color, var(--rls-app-color-900));
+  --pvt-font-color: var(--rlc-input-font-color, var(--rls-app-color-600));
   --pvt-font-size: var(--rlc-input-font-size, var(--rls-input-font-size));
   --pvt-letter-spacing: var(
     --rlc-input-letter-spacing,
@@ -1992,6 +1992,7 @@
   --pvt-component-max-height: 75%;
   --pvt-component-opacity: 0;
   --pvt-component-visibility: hidden;
+  --pvt-component-transition: 320ms;
   --pvt-backdrop-opacity: 0;
   --pvt-backdrop-bottom: initial;
   position: fixed;
@@ -2027,9 +2028,10 @@
   border-radius: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem 0rem;
   background: var(--rlc-bottom-sheet-background, var(--rls-app-color-050));
   transform: var(--pvt-component-transform);
-  transition: opacity 240ms 0ms var(--rls-deceleration-curve),
-    transform 240ms 0ms var(--rls-deceleration-curve),
-    visibility 240ms 0ms var(--rls-deceleration-curve);
+  transition: opacity var(--pvt-component-transition) 0ms
+      var(--rls-deceleration-curve),
+    transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
+    visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
 }
 .rls-bottom-sheet__component::before {
   display: block;
@@ -2313,6 +2315,7 @@
   --pvt-component-height: 0rem;
   --pvt-component-opacity: 0;
   --pvt-component-visibility: hidden;
+  --pvt-component-transition: 160ms;
   --pvt-backdrop-opacity: 0;
   --pvt-backdrop-bottom: initial;
   position: fixed;
@@ -2348,9 +2351,10 @@
   border-radius: var(--rls-sizing-x4);
   background: var(--rlc-modal-background, var(--rls-app-color-050));
   transform: var(--pvt-component-transform);
-  transition: opacity 160ms 0ms var(--rls-deceleration-curve),
-    transform 160ms 0ms var(--rls-deceleration-curve),
-    visibility 160ms 0ms var(--rls-deceleration-curve);
+  transition: opacity var(--pvt-component-transition) 0ms
+      var(--rls-deceleration-curve),
+    transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
+    visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
 }
 .rls-modal__backdrop {
   position: absolute;
@@ -2861,6 +2865,7 @@
   --pvt-component-border-radius: var(--rls-sizing-x4);
   --pvt-component-opacity: 0;
   --pvt-component-visibility: hidden;
+  --pvt-component-transition: 160ms;
   --pvt-backdrop-opacity: 0;
   --pvt-backdrop-bottom: initial;
   position: fixed;
@@ -2897,9 +2902,10 @@
   border-radius: var(--pvt-component-border-radius);
   background: var(--rlc-modal-sheet-background, var(--rls-app-color-050));
   transform: var(--pvt-component-transform);
-  transition: opacity 125ms 0ms var(--rls-deceleration-curve),
-    transform 125ms 0ms var(--rls-deceleration-curve),
-    visibility 125ms 0ms var(--rls-deceleration-curve);
+  transition: opacity var(--pvt-component-transition) 0ms
+      var(--rls-deceleration-curve),
+    transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
+    visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
 }
 .rls-modal-sheet__backdrop {
   position: absolute;
@@ -2923,6 +2929,7 @@
     --pvt-component-max-height: 75%;
     --pvt-component-border-radius: var(--rls-sizing-x4) var(--rls-sizing-x4)
       0rem 0rem;
+    --pvt-component-transition: 320ms;
     align-items: initial;
   }
   .rls-modal-sheet--visible {

package/dist/es/index.js

@@ -1472,20 +1472,20 @@ function RlsInput({ children, decimals, disabled, formControl, identifier, onBlu
     const valueInitial = formControl?.value ?? value ? String(value) : '';
     const [valueInput, setValueInput] = useState(valueInitial);
     const [focused, setFocused] = useState(false);
-    const isChangeInternal = useRef(false);
+    const changeIsInternal = useRef(false);
     useEffect(() => {
-        if (!isChangeInternal.current && formControl) {
+        if (!changeIsInternal.current && formControl) {
             const valueControl = formControl.value ? String(formControl.value) : '';
             valueInput !== valueControl && setValueInput(valueControl);
         }
-        isChangeInternal.current = false;
+        changeIsInternal.current = false;
     }, [formControl?.value]);
     const _onChange = useCallback((event) => {
         const valueInput = event.target.value;
         const value = type === 'number'
             ? parseFloat((+valueInput).toFixed(decimals))
             : valueInput;
-        isChangeInternal.current = true;
+        changeIsInternal.current = true;
         onValue && onValue(value);
         setValueInput(valueInput);
         formControl?.setValue(value);
@@ -1838,96 +1838,86 @@ function RlsMessageFormError({ className, formControl }) {
 }
 
 function RlsFieldDouble(props) {
-    const { children, disabled, formControl, identifier, msgErrorDisabled, rlsTheme } = props;
+    const { children, formControl, identifier, msgErrorDisabled, rlsTheme } = props;
+    const disabled = useMemo(() => {
+        return formControl?.disabled || props.disabled;
+    }, [formControl?.disabled, props.disabled]);
     const className = useMemo(() => {
-        const _disabled = formControl?.disabled || disabled;
         return renderClassStatus('rls-field-box', {
-            focused: formControl?.focused && !_disabled,
+            focused: formControl?.focused && !disabled,
             error: formControl?.wrong,
-            disabled: _disabled
+            disabled,
+            readonly: props.readOnly
         }, 'rls-field-double');
-    }, [
-        formControl?.focused,
-        formControl?.wrong,
-        formControl?.disabled,
-        disabled
-    ]);
+    }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputDouble, { ...props }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
 function RlsFieldMoney(props) {
-    const { children, disabled, formControl, identifier, msgErrorDisabled, rlsTheme } = props;
+    const { children, formControl, identifier, msgErrorDisabled, rlsTheme } = props;
+    const disabled = useMemo(() => {
+        return formControl?.disabled || props.disabled;
+    }, [formControl?.disabled, props.disabled]);
     const className = useMemo(() => {
-        const _disabled = formControl?.disabled || disabled;
         return renderClassStatus('rls-field-box', {
-            focused: formControl?.focused && !_disabled,
+            focused: formControl?.focused && !disabled,
             error: formControl?.wrong,
-            disabled: _disabled
+            disabled,
+            readonly: props.readOnly
         }, 'rls-field-money');
-    }, [
-        formControl?.focused,
-        formControl?.wrong,
-        formControl?.disabled,
-        disabled
-    ]);
+    }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputMoney, { ...props }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
 function RlsFieldNumber(props) {
-    const { children, disabled, formControl, identifier, msgErrorDisabled, rlsTheme } = props;
+    const { children, formControl, identifier, msgErrorDisabled, rlsTheme } = props;
+    const disabled = useMemo(() => {
+        return formControl?.disabled || props.disabled;
+    }, [formControl?.disabled, props.disabled]);
     const className = useMemo(() => {
-        const _disabled = formControl?.disabled || disabled;
         return renderClassStatus('rls-field-box', {
-            focused: formControl?.focused && !_disabled,
+            focused: formControl?.focused && !disabled,
             error: formControl?.wrong,
-            disabled: _disabled
+            disabled,
+            readonly: props.readOnly
         }, 'rls-field-number');
-    }, [
-        formControl?.focused,
-        formControl?.wrong,
-        formControl?.disabled,
-        disabled
-    ]);
+    }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputNumber, { ...props }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
 function RlsFieldPassword(props) {
-    const { children, disabled, formControl, identifier, msgErrorDisabled, rlsTheme } = props;
+    const { children, formControl, identifier, msgErrorDisabled, rlsTheme } = props;
     const [password, setPassword] = useState(true);
-    const onToggleInput = useCallback(() => {
-        setPassword((password) => !password);
-    }, []);
+    const disabled = useMemo(() => {
+        return formControl?.disabled || props.disabled;
+    }, [formControl?.disabled, props.disabled]);
     const className = useMemo(() => {
-        const _disabled = formControl?.disabled || disabled;
         return renderClassStatus('rls-field-box', {
-            focused: formControl?.focused && !_disabled,
+            focused: formControl?.focused && !disabled,
             error: formControl?.wrong,
-            disabled: _disabled
+            disabled,
+            readonly: props.readOnly
         }, 'rls-field-password');
-    }, [
-        formControl?.focused,
-        formControl?.wrong,
-        formControl?.disabled,
-        disabled
-    ]);
+    }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
+    const onToggleInput = useCallback(() => {
+        setPassword((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: 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 RlsFieldPercentage(props) {
-    const { children, disabled, formControl, identifier, msgErrorDisabled, rlsTheme } = props;
+    const { children, formControl, identifier, msgErrorDisabled, rlsTheme } = props;
+    const disabled = useMemo(() => {
+        return formControl?.disabled || props.disabled;
+    }, [formControl?.disabled, props.disabled]);
     const className = useMemo(() => {
-        const _disabled = formControl?.disabled || disabled;
         return renderClassStatus('rls-field-box', {
-            focused: formControl?.focused && !_disabled,
+            focused: formControl?.focused && !disabled,
             error: formControl?.wrong,
-            disabled: _disabled
+            disabled,
+            readonly: props.readOnly
         }, 'rls-field-percentage');
-    }, [
-        formControl?.focused,
-        formControl?.wrong,
-        formControl?.disabled,
-        disabled
-    ]);
+    }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputPercentage, { ...props }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
@@ -1936,20 +1926,18 @@ function RlsFieldReadonly({ children, identifier, rlsTheme, value }) {
 }
 
 function RlsFieldText(props) {
-    const { children, disabled, formControl, identifier, msgErrorDisabled, rlsTheme } = props;
+    const { children, formControl, identifier, msgErrorDisabled, rlsTheme } = props;
+    const disabled = useMemo(() => {
+        return formControl?.disabled || props.disabled;
+    }, [formControl?.disabled, props.disabled]);
     const className = useMemo(() => {
-        const _disabled = formControl?.disabled || disabled;
         return renderClassStatus('rls-field-box', {
-            focused: formControl?.focused && !_disabled,
+            focused: formControl?.focused && !disabled,
             error: formControl?.wrong,
-            disabled: _disabled
+            disabled,
+            readonly: props.readOnly
         }, 'rls-field-text');
-    }, [
-        formControl?.focused,
-        formControl?.wrong,
-        formControl?.disabled,
-        disabled
-    ]);
+    }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputText, { ...props }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
@@ -2844,7 +2832,7 @@ function useFieldAutocomplete(props) {
 
 function RlsFieldAutocompleteTemplate(props) {
     const autocomplete = useFieldAutocomplete(props);
-    const { render, children, formControl, msgErrorDisabled, onSearch, placeholder, readOnly, rlsTheme, searching } = props;
+    const { render, children, formControl, msgErrorDisabled, onSearch, placeholder, rlsTheme, searching } = props;
     const [labels, setLabels] = useState({
         listEmptyDescription: reactI18n('listEmptyDescription'),
         listEmptyTitle: reactI18n('listEmptyTitle'),
@@ -2867,7 +2855,7 @@ function RlsFieldAutocompleteTemplate(props) {
             focused: autocomplete.focused && !disabled,
             error: formControl?.wrong,
             disabled,
-            readonly: readOnly,
+            readonly: props.readOnly,
             selected: !!autocomplete.value
         }, `rls-field-list rls-field-autocomplete ${props.className ?? ''}`);
     }, [
@@ -2875,8 +2863,8 @@ function RlsFieldAutocompleteTemplate(props) {
         autocomplete.value,
         autocomplete.focused,
         props.className,
-        disabled,
-        readOnly
+        props.readOnly,
+        disabled
     ]);
     const classNameList = useMemo(() => {
         return renderClassStatus('rls-field-list__suggestions', {
@@ -2894,7 +2882,7 @@ function RlsFieldAutocompleteTemplate(props) {
         event.key === 'Enter' && onSearch && onSearch(autocomplete.pattern);
         autocomplete.onKeydownInput(event);
     }, [autocomplete.onKeydownInput, onSearch, autocomplete.pattern]);
-    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 }), !readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: autocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: autocomplete.value ? 'trash-2' : 'arrow-ios-down' }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: classNameList, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: autocomplete.refList, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: autocomplete.refInput, className: "rls-field-list__ul__control", type: "text", placeholder: labels.listInputPlaceholder, value: autocomplete.pattern, onChange: onChangePattern, onFocus: autocomplete.onFocusInput, onBlur: autocomplete.onBlurInput, onKeyDown: onKeyDownPattern, disabled: disabled || searching }), onSearch && (jsxRuntimeExports.jsx("button", { disabled: disabled || searching, onClick: onClickPattern, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] }), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), autocomplete.coincidences.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: autocomplete.onClickElement(element), onKeyDown: autocomplete.onKeydownElement(element), children: render(element) }, index))), !autocomplete.coincidences.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: autocomplete.onClickBackdrop })] })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.refContent, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: autocomplete.value, onClick: autocomplete.onClickControl }), !props.readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: autocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: autocomplete.value ? 'trash-2' : 'arrow-ios-down' }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: classNameList, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: autocomplete.refList, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: autocomplete.refInput, className: "rls-field-list__ul__control", type: "text", placeholder: labels.listInputPlaceholder, value: autocomplete.pattern, onChange: onChangePattern, onFocus: autocomplete.onFocusInput, onBlur: autocomplete.onBlurInput, onKeyDown: onKeyDownPattern, disabled: disabled || searching }), onSearch && (jsxRuntimeExports.jsx("button", { disabled: disabled || searching, onClick: onClickPattern, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] }), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), autocomplete.coincidences.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: autocomplete.onClickElement(element), onKeyDown: autocomplete.onKeydownElement(element), children: render(element) }, index))), !autocomplete.coincidences.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: autocomplete.onClickBackdrop })] })] }));
 }
 function RlsFieldAutocomplete(props) {
     const render = useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
@@ -3266,7 +3254,7 @@ function useFieldSelect(props) {
 
 function RlsFieldSelectTemplate(props) {
     const select = useFieldSelect(props);
-    const { render, suggestions, children, formControl, msgErrorDisabled, placeholder, readOnly, rlsTheme, unremovable } = props;
+    const { render, suggestions, children, formControl, msgErrorDisabled, placeholder, rlsTheme, unremovable } = props;
     const [labels, setLabels] = useState({
         listEmptyDescription: reactI18n('listEmptyDescription'),
         listEmptyTitle: reactI18n('listEmptyTitle')
@@ -3287,16 +3275,22 @@ function RlsFieldSelectTemplate(props) {
             focused: select.focused && !disabled,
             error: formControl?.wrong,
             disabled: disabled,
-            readonly: readOnly
+            readonly: props.readOnly
         }, `rls-field-list rls-field-select ${props.className ?? ''}`);
-    }, [formControl?.wrong, select.focused, props.className, disabled, readOnly]);
+    }, [
+        formControl?.wrong,
+        select.focused,
+        props.className,
+        props.readOnly,
+        disabled
+    ]);
     const classNameList = useMemo(() => {
         return renderClassStatus('rls-field-list__suggestions', {
             higher: select.higher,
             visible: select.modalIsVisible
         });
     }, [select.modalIsVisible, select.higher]);
-    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 }), !readOnly && (jsxRuntimeExports.jsx("button", { className: 'rls-field-list__action', disabled: disabled, onClick: select.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: !unremovable && !!select.value ? 'close' : 'arrow-ios-down' }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: classNameList, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: select.refList, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: select.onClickElement(element), onKeyDown: select.onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: select.onClickBackdrop })] })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.refContent, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { ref: select.refInput, className: "rls-field-list__control", readOnly: true, placeholder: placeholder, value: select.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput, disabled: disabled }), !props.readOnly && (jsxRuntimeExports.jsx("button", { className: 'rls-field-list__action', disabled: disabled, onClick: select.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: !unremovable && !!select.value ? 'close' : 'arrow-ios-down' }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: classNameList, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: select.refList, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: select.onClickElement(element), onKeyDown: select.onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: select.onClickBackdrop })] })] }));
 }
 function RlsFieldSelect(props) {
     const render = useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);