@rolster/react-components 18.25.0 → 18.25.2

package/dist/cjs/assets/{index-A_JkPXhq.css → index-B6PshrCZ.css}

@@ -669,6 +669,18 @@
   letter-spacing: var(--pvt-letter-spacing);
 } /*# sourceMappingURL=Input.css.map */
 
+.rls-input-double {
+  --rlc-tabular-text-font-size: var(--rls-input-font-size);
+  --rlc-tabular-text-char-width: 5.25rem;
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+.rls-input-double .rls-amount {
+  height: inherit;
+  align-items: center;
+} /*# sourceMappingURL=InputDouble.css.map */
+
 .rls-input-money {
   --rlc-tabular-text-font-size: var(--rls-input-font-size);
   --rlc-tabular-text-char-width: 5.25rem;
@@ -739,6 +751,13 @@
   box-sizing: border-box;
   background: var(--rlc-input-search-background, var(--rls-app-color-100));
   border-radius: var(--rls-sizing-x4);
+}
+.rls-input-search--disabled {
+  opacity: 0.5;
+}
+.rls-input-search .rls-input__component:disabled,
+.rls-input-search .rls-button-action:disabled {
+  opacity: 1 !important;
 } /*# sourceMappingURL=InputSearch.css.map */
 
 .rls-input-text {
@@ -1247,6 +1266,13 @@
   color: var(--rls-app-color-900);
 } /*# sourceMappingURL=ButtonToggle.css.map */
 
+.rls-field-double {
+  --rlc-fieldbox-body-padding: var(--rls-sizing-x4);
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+} /*# sourceMappingURL=FieldDouble.css.map */
+
 .rls-field-money {
   --rlc-fieldbox-body-padding: var(--rls-sizing-x4);
   position: relative;
@@ -1969,10 +1995,12 @@
   --pvt-backdrop-opacity: 0;
   --pvt-backdrop-bottom: initial;
   position: fixed;
+  display: flex;
   top: 0rem;
   left: 0rem;
   width: 100%;
   height: 100%;
+  justify-content: center;
   z-index: var(--rls-z-index-24);
   visibility: hidden;
 }
@@ -2028,12 +2056,17 @@
 }
 @media screen and (max-height: 960px) {
   .rls-bottom-sheet {
-    --pvt-component-max-height: calc(100% - 48rem);
+    --pvt-component-max-height: calc(100% - 32rem);
   }
 }
 @media screen and (max-height: 720px) {
   .rls-bottom-sheet {
-    --pvt-component-max-height: calc(100% - 32rem);
+    --pvt-component-max-height: calc(100% - 24rem);
+  }
+}
+@media screen and (max-height: 560px) {
+  .rls-bottom-sheet {
+    --pvt-component-max-height: calc(100% - 16rem);
   }
 } /*# sourceMappingURL=BottomSheet.css.map */
 
@@ -2304,17 +2337,19 @@
 }
 .rls-modal__component {
   position: absolute;
+  display: flex;
   max-width: var(--rlc-modal-max-width, calc(100% - var(--rls-sizing-x8)));
   height: var(--pvt-component-height);
+  flex-direction: column;
   opacity: var(--pvt-component-opacity);
   visibility: var(--pvt-component-visibility);
   z-index: var(--rls-z-index-2);
   border-radius: var(--rls-sizing-x4);
   background: var(--rlc-modal-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 160ms 0ms var(--rls-deceleration-curve),
+    transform 160ms 0ms var(--rls-deceleration-curve),
+    visibility 160ms 0ms var(--rls-deceleration-curve);
 }
 .rls-modal__backdrop {
   position: absolute;
@@ -2813,6 +2848,110 @@
   }
 } /*# sourceMappingURL=ImageChooser.css.map */
 
+.rls-modal-sheet {
+  --pvt-component-transform: translateY(150px) scale(0.6);
+  --pvt-component-transform-visible: translateY(0) scale(1);
+  --pvt-component-bottom: initial;
+  --pvt-component-max-width: var(
+    --rlc-modal-sheet-max-width,
+    calc(100% - var(--rls-sizing-x8))
+  );
+  --pvt-component-height: 0rem;
+  --pvt-component-max-height: initial;
+  --pvt-component-border-radius: var(--rls-sizing-x4);
+  --pvt-component-opacity: 0;
+  --pvt-component-visibility: hidden;
+  --pvt-backdrop-opacity: 0;
+  --pvt-backdrop-bottom: initial;
+  position: fixed;
+  display: flex;
+  top: 0rem;
+  left: 0rem;
+  width: 100%;
+  height: 100%;
+  z-index: var(--rls-z-index-24);
+  visibility: hidden;
+  align-items: center;
+  justify-content: center;
+}
+.rls-modal-sheet--visible {
+  --pvt-component-visibility: visible;
+  --pvt-component-height: auto;
+  --pvt-component-opacity: 1;
+  --pvt-component-transform: var(--pvt-component-transform-visible);
+  --pvt-backdrop-bottom: 0rem;
+  --pvt-backdrop-opacity: 1;
+  visibility: visible;
+}
+.rls-modal-sheet__component {
+  position: absolute;
+  display: flex;
+  bottom: var(--pvt-component-bottom);
+  max-width: var(--pvt-component-max-width);
+  height: var(--pvt-component-height);
+  max-height: var(--pvt-component-max-height);
+  flex-direction: column;
+  opacity: var(--pvt-component-opacity);
+  visibility: var(--pvt-component-visibility);
+  z-index: var(--rls-z-index-2);
+  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);
+}
+.rls-modal-sheet__backdrop {
+  position: absolute;
+  display: block;
+  top: 0rem;
+  left: 0rem;
+  right: 0rem;
+  bottom: var(--pvt-backdrop-bottom);
+  opacity: var(--pvt-backdrop-opacity);
+  z-index: 1;
+  background: var(--rls-theme-backdrop-900);
+  backdrop-filter: blur(2px);
+  transition: opacity 120ms 0ms var(--rls-deceleration-curve),
+    bottom 120ms 0ms var(--rls-deceleration-curve);
+}
+@media screen and (max-width: 640px) and (max-height: 960px) {
+  .rls-modal-sheet {
+    --pvt-component-max-height: calc(100% - 32rem);
+  }
+}
+@media screen and (max-width: 640px) and (max-height: 720px) {
+  .rls-modal-sheet {
+    --pvt-component-max-height: calc(100% - 24rem);
+  }
+}
+@media screen and (max-width: 640px) and (max-height: 560px) {
+  .rls-modal-sheet {
+    --pvt-component-max-height: calc(100% - 16rem);
+  }
+}
+@media screen and (max-width: 640px) {
+  .rls-modal-sheet {
+    --pvt-component-transform: translateY(100%);
+    --pvt-component-transform-visible: translateY(0);
+    --pvt-component-bottom: 0px;
+    --pvt-component-max-width: 240rem;
+    --pvt-component-max-height: 75%;
+    --pvt-component-border-radius: var(--rls-sizing-x4) var(--rls-sizing-x4)
+      0rem 0rem;
+    align-items: initial;
+  }
+  .rls-modal-sheet__component::before {
+    display: block;
+    content: '';
+    width: var(--rls-sizing-x24);
+    height: var(--rls-sizing-x2);
+    border-radius: var(--rls-sizing-x2);
+    background: var(--rls-app-color-300);
+    margin: var(--rls-sizing-x3) auto;
+  }
+} /*# sourceMappingURL=ModalSheet.css.map */
+
 .rls-snackbar {
   position: fixed;
   display: flex;

package/dist/cjs/index.js

@@ -1476,9 +1476,9 @@ function RlsInput({ children, decimals, disabled, formControl, identifier, onBlu
     const [focused, setFocused] = require$$0.useState(false);
     const isChangeInternal = require$$0.useRef(false);
     require$$0.useEffect(() => {
-        if (!isChangeInternal.current) {
-            const control = formControl?.value ? String(formControl.value) : '';
-            valueInput !== control && setValueInput(control);
+        if (!isChangeInternal.current && formControl) {
+            const valueControl = formControl.value ? String(formControl.value) : '';
+            valueInput !== valueControl && setValueInput(valueControl);
         }
         isChangeInternal.current = false;
     }, [formControl?.value]);
@@ -1518,6 +1518,21 @@ function RlsInput({ children, decimals, disabled, formControl, identifier, onBlu
     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: _onFocus, onBlur: _onBlur, onChange: _onChange, onKeyDown: _onKeyDown, onKeyUp: _onKeyUp, value: valueInput }), jsxRuntimeExports.jsx("span", { className: "rls-input__value", children: children })] }));
 }
 
+function RlsInputDouble(props) {
+    const { decimals, formControl, identifier, onValue, symbol, value } = props;
+    const [valueInput, setValueInput] = require$$0.useState((formControl?.value ?? value ?? commons.Double.zero()).fixed);
+    const amount = require$$0.useMemo(() => {
+        return formControl?.value?.fixed ?? valueInput;
+    }, [formControl?.value, valueInput]);
+    const onValueInput = require$$0.useCallback((value) => {
+        const valueDouble = commons.Double.create(value);
+        formControl ? formControl.setValue(valueDouble) : setValueInput(value);
+        onValue && onValue(valueDouble);
+    }, [formControl, onValue]);
+    const doubleProps = { ...props, formControl: undefined };
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-double", children: jsxRuntimeExports.jsx(RlsInput, { ...doubleProps, type: "number", value: valueInput, onValue: onValueInput, children: jsxRuntimeExports.jsx(RlsAmount, { value: amount, symbol: symbol, decimals: decimals }) }) }));
+}
+
 function RlsInputMoney(props) {
     const { decimals, formControl, identifier, onValue, symbol, value } = props;
     const [valueInput, setValueInput] = require$$0.useState(formControl?.value ?? value ?? 0);
@@ -1578,12 +1593,15 @@ function RlsInputPercentage(props) {
     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, "%"] }) }));
 }
 
-function RlsInputSearch({ formControl, identifier, onEnter, onSearch, placeholder }) {
+function RlsInputSearch({ formControl, disabled, identifier, onEnter, onSearch, placeholder }) {
     const [value, setValue] = require$$0.useState('');
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-input-search', { disabled });
+    }, [disabled]);
     const onValue = require$$0.useCallback((value) => {
         !formControl && setValue(() => value);
     }, [formControl]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-input-search", children: [jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, placeholder: placeholder, onEnter: onEnter, onValue: onValue, children: formControl?.value ?? value }), onSearch && jsxRuntimeExports.jsx(RlsButtonAction, { icon: "search", onClick: onSearch })] }));
+    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 }))] }));
 }
 
 function RlsInputText(props) {
@@ -1821,6 +1839,24 @@ 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: msgError }) })) }));
 }
 
+function RlsFieldDouble(props) {
+    const { children, disabled, formControl, identifier, msgErrorDisabled, rlsTheme } = props;
+    const className = require$$0.useMemo(() => {
+        const _disabled = formControl?.disabled || disabled;
+        return renderClassStatus('rls-field-box', {
+            focused: formControl?.focused && !_disabled,
+            error: formControl?.wrong,
+            disabled: _disabled
+        }, 'rls-field-double');
+    }, [
+        formControl?.focused,
+        formControl?.wrong,
+        formControl?.disabled,
+        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 className = require$$0.useMemo(() => {
@@ -1836,7 +1872,7 @@ function RlsFieldMoney(props) {
         formControl?.disabled,
         disabled
     ]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, 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.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputMoney, { ...props }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+    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) {
@@ -1854,7 +1890,7 @@ function RlsFieldNumber(props) {
         formControl?.disabled,
         disabled
     ]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, 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.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputNumber, { ...props }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+    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) {
@@ -1876,7 +1912,7 @@ function RlsFieldPassword(props) {
         formControl?.disabled,
         disabled
     ]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, 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(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 }))] }));
+    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) {
@@ -1894,11 +1930,11 @@ function RlsFieldPercentage(props) {
         formControl?.disabled,
         disabled
     ]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, 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.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputPercentage, { ...props }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+    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 }))] }));
 }
 
 function RlsFieldReadonly({ children, identifier, rlsTheme, value }) {
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-readonly rls-field-box", "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("input", { className: "rls-input__component", autoComplete: "off", type: 'text', readOnly: true, value: 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 RlsFieldText(props) {
@@ -1916,7 +1952,7 @@ function RlsFieldText(props) {
         formControl?.disabled,
         disabled
     ]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, 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.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputText, { ...props }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+    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 }))] }));
 }
 
 function RlsLabelCheckBox({ children, disabled, extended, identifier, formControl, reverse, rlsTheme }) {
@@ -2407,11 +2443,14 @@ function RlsToolbar({ 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 RlsBottonSheet({ children, className, visible, rlsTheme }) {
+function RlsBottonSheet({ children, className, onAutoClose, visible, rlsTheme }) {
     const classNameSheet = require$$0.useMemo(() => {
         return renderClassStatus('rls-bottom-sheet', { visible }, className);
     }, [className, visible]);
-    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" })] }), document.body);
+    const onClickBackdrop = require$$0.useCallback(() => {
+        onAutoClose && onAutoClose();
+    }, [onAutoClose]);
+    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);
 }
 
 function RlsCard({ children, outline, rlsTheme }) {
@@ -2832,11 +2871,12 @@ function RlsFieldAutocompleteTemplate(props) {
             disabled,
             readonly: readOnly,
             selected: !!autocomplete.value
-        }, 'rls-field-list rls-field-autocomplete');
+        }, `rls-field-list rls-field-autocomplete ${props.className ?? ''}`);
     }, [
         formControl?.wrong,
         autocomplete.value,
         autocomplete.focused,
+        props.className,
         disabled,
         readOnly
     ]);
@@ -2856,18 +2896,21 @@ 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("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: 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 }), !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 = require$$0.useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
     return jsxRuntimeExports.jsx(RlsFieldAutocompleteTemplate, { ...props, render: render });
 }
 
-function RlsModal({ children, className, visible, rlsTheme }) {
+function RlsModal({ children, className, onAutoClose, visible, rlsTheme }) {
     const classNameModal = require$$0.useMemo(() => {
         return renderClassStatus('rls-modal', { visible }, className);
     }, [className, visible]);
-    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" })] }), document.body);
+    const onClickBackdrop = require$$0.useCallback(() => {
+        onAutoClose && onAutoClose();
+    }, [onAutoClose]);
+    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);
 }
 
 function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
@@ -2999,7 +3042,7 @@ function RlsFieldDate({ children, date, disabled, formControl, format, identifie
         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("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 }), !readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: _disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-date-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: _disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-date__control", type: "text", value: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: _disabled }), !readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: _disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-date-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: _disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
 }
 
 function rangeFormatTemplate({ maxDate, minDate }) {
@@ -3118,7 +3161,7 @@ function RlsFieldDateRange({ children, date: _date, disabled, formControl, ident
         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("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: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: _disabled }), !readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: _disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-date-range-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: _disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-date-range__control", type: "text", value: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: _disabled }), !readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: _disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-date-range-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: _disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
 }
 
 function useFieldSelect(props) {
@@ -3247,15 +3290,15 @@ function RlsFieldSelectTemplate(props) {
             error: formControl?.wrong,
             disabled: disabled,
             readonly: readOnly
-        }, 'rls-field-list rls-field-select');
-    }, [formControl?.wrong, select.focused, disabled, readOnly]);
+        }, `rls-field-list rls-field-select ${props.className ?? ''}`);
+    }, [formControl?.wrong, select.focused, props.className, disabled, readOnly]);
     const classNameList = require$$0.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("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: 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 }), !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 = require$$0.useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
@@ -3694,6 +3737,16 @@ function RlsImageChooser(props) {
     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] }));
 }
 
+function RlsModalSheet({ children, className, onAutoClose, visible, rlsTheme }) {
+    const classNameModal = require$$0.useMemo(() => {
+        return renderClassStatus('rls-modal-sheet', { visible }, className);
+    }, [className, visible]);
+    const onClickBackdrop = require$$0.useCallback(() => {
+        onAutoClose && onAutoClose();
+    }, [onAutoClose]);
+    return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameModal, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal-sheet__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal-sheet__backdrop", onClick: onClickBackdrop })] }), document.body);
+}
+
 const DURATION_ANIMATION = 240;
 const DURATION_CHAR = 75;
 const DURATION_MAX = 9000;
@@ -3842,6 +3895,7 @@ exports.RlsFieldAutocomplete = RlsFieldAutocomplete;
 exports.RlsFieldAutocompleteTemplate = RlsFieldAutocompleteTemplate;
 exports.RlsFieldDate = RlsFieldDate;
 exports.RlsFieldDateRange = RlsFieldDateRange;
+exports.RlsFieldDouble = RlsFieldDouble;
 exports.RlsFieldMoney = RlsFieldMoney;
 exports.RlsFieldNumber = RlsFieldNumber;
 exports.RlsFieldPassword = RlsFieldPassword;
@@ -3856,6 +3910,7 @@ exports.RlsImage = RlsImage;
 exports.RlsImageChooser = RlsImageChooser;
 exports.RlsImageEditor = RlsImageEditor;
 exports.RlsInput = RlsInput;
+exports.RlsInputDouble = RlsInputDouble;
 exports.RlsInputMoney = RlsInputMoney;
 exports.RlsInputNumber = RlsInputNumber;
 exports.RlsInputPassword = RlsInputPassword;
@@ -3869,6 +3924,7 @@ exports.RlsLabelSwitch = RlsLabelSwitch;
 exports.RlsMessageFormError = RlsMessageFormError;
 exports.RlsMessageIcon = RlsMessageIcon;
 exports.RlsModal = RlsModal;
+exports.RlsModalSheet = RlsModalSheet;
 exports.RlsNavbar = RlsNavbar;
 exports.RlsPagination = RlsPagination;
 exports.RlsPickerDate = RlsPickerDate;