@rolster/react-components 1.5.7 → 18.9.0

package/dist/esm/components/atoms/CheckBox/CheckBox.js

@@ -1,7 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { renderClassStatus } from '../../../utils/css';
 import './CheckBox.css';
-export function RlsCheckBox({ checked, disabled, rlsTheme }) {
-    return (_jsx("div", { className: renderClassStatus('rls-checkbox', { checked, disabled }), "rls-theme": rlsTheme, children: _jsx("div", { className: "rls-checkbox__component" }) }));
+export function RlsCheckBox({ checked, disabled, onClick, rlsTheme }) {
+    return (_jsx("div", { className: renderClassStatus('rls-checkbox', { checked, disabled }), onClick: onClick, "rls-theme": rlsTheme, children: _jsx("div", { className: "rls-checkbox__component" }) }));
+}
+export function RlsCheckBoxControl({ formControl, disabled, rlsTheme }) {
+    return (_jsx(RlsCheckBox, { checked: formControl.state || false, disabled: disabled, onClick: () => {
+            formControl.setState(!formControl.state);
+        }, rlsTheme: rlsTheme }));
 }
 //# sourceMappingURL=CheckBox.js.map

package/dist/esm/components/atoms/CheckBox/CheckBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.js","sourceRoot":"","sources":["../../../../../src/components/atoms/CheckBox/CheckBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,gBAAgB,CAAC;AAOxB,MAAM,UAAU,WAAW,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAY;IACnE,OAAO,CACL,cACE,SAAS,EAAE,iBAAiB,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,eACxD,QAAQ,YAEnB,cAAK,SAAS,EAAC,yBAAyB,GAAO,GAC3C,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"CheckBox.js","sourceRoot":"","sources":["../../../../../src/components/atoms/CheckBox/CheckBox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,gBAAgB,CAAC;AAaxB,MAAM,UAAU,WAAW,CAAC,EAC1B,OAAO,EACP,QAAQ,EACR,OAAO,EACP,QAAQ,EACC;IACT,OAAO,CACL,cACE,SAAS,EAAE,iBAAiB,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,EACnE,OAAO,EAAE,OAAO,eACL,QAAQ,YAEnB,cAAK,SAAS,EAAC,yBAAyB,GAAO,GAC3C,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,EACjC,WAAW,EACX,QAAQ,EACR,QAAQ,EACQ;IAChB,OAAO,CACL,KAAC,WAAW,IACV,OAAO,EAAE,WAAW,CAAC,KAAK,IAAI,KAAK,EACnC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,EAAE;YACZ,WAAW,CAAC,QAAQ,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAC3C,CAAC,EACD,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,CAAC"}

package/dist/esm/components/atoms/Icon/Icon.css

@@ -14,7 +14,7 @@
 }
 .rls-icon > i {
   display: var(--pvt-icon-display);
-  color: inherit;
+  color: var(--rls-icon-color);
   float: left;
   width: 100%;
   height: 100%;

package/dist/esm/components/atoms/Input/Input.css

@@ -6,7 +6,7 @@
   float: left;
   width: 100%;
 }
-.rls-input--active {
+.rls-input--focused {
   --pvt-component-font-color: var(--rls-input-font-color);
   --pvt-value-font-color: transparent;
 }

package/dist/esm/components/atoms/Input/Input.d.ts

@@ -1,14 +1,14 @@
+import { ReactControl } from '@rolster/react-forms';
 import { HTMLInputTypeAttribute } from 'react';
-import { ReactControl } from '../../../hooks';
 import { RlsComponent } from '../../definitions';
 import './Input.css';
 interface Input extends RlsComponent {
-    defaultValue?: any;
     disabled?: boolean;
     formControl?: ReactControl<HTMLInputElement>;
     onValue?: (value: any) => void;
     placeholder?: string;
     type?: HTMLInputTypeAttribute;
+    value?: any;
 }
-export declare function RlsInput({ children, defaultValue, disabled, formControl, onValue, placeholder, type }: Input): import("react/jsx-runtime").JSX.Element;
+export declare function RlsInput({ children, disabled, formControl, onValue, placeholder, type, value }: Input): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/atoms/Input/Input.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { renderClassStatus } from '../../../utils/css';
 import './Input.css';
-export function RlsInput({ children, defaultValue, disabled, formControl, onValue, placeholder, type }) {
-    const [active, setActive] = useState(false);
+export function RlsInput({ children, disabled, formControl, onValue, placeholder, type, value }) {
+    const [focused, setFocused] = useState(false);
     function onChange(event) {
         switch (type) {
             case 'number':
@@ -21,17 +21,19 @@ export function RlsInput({ children, defaultValue, disabled, formControl, onValu
         }
     }
     function onFocus() {
-        formControl?.setActive(true);
-        setActive(true);
+        formControl?.focus();
+        setFocused(true);
     }
     function onBlur() {
-        formControl?.setDirty(true);
-        formControl?.setActive(false);
-        setActive(false);
+        if (formControl && !formControl.touched) {
+            formControl.touch();
+        }
+        formControl?.blur();
+        setFocused(false);
     }
     return (_jsxs("div", { className: renderClassStatus('rls-input', {
-            active: formControl?.active || active,
-            disabled
-        }), children: [_jsx("input", { ref: formControl?.elementRef, className: "rls-input__component", autoComplete: "off", type: type || 'text', placeholder: placeholder, disabled: disabled, onFocus: onFocus, onBlur: onBlur, onChange: onChange, value: formControl?.state || defaultValue || '' }), _jsx("span", { className: "rls-input__value", children: children })] }));
+            focused: formControl?.focused || focused,
+            disabled: formControl?.disabled || disabled
+        }), children: [_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?.state || value || '' }), _jsx("span", { className: "rls-input__value", children: children })] }));
 }
 //# sourceMappingURL=Input.js.map

package/dist/esm/components/atoms/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Input/Input.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,aAAa,CAAC;AAWrB,MAAM,UAAU,QAAQ,CAAC,EACvB,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,OAAO,EACP,WAAW,EACX,IAAI,EACE;IACN,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,SAAS,QAAQ,CAAC,KAAU;QAC1B,QAAQ,IAAI,EAAE;YACZ,KAAK,QAAQ;gBACX,QAAQ,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBAC9B,MAAM;YACR;gBACE,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBAC7B,MAAM;SACT;IACH,CAAC;IAED,SAAS,QAAQ,CAAC,KAAsB;QACtC,WAAW,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;QAE7B,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,KAAK,CAAC,CAAC;SAChB;IACH,CAAC;IAED,SAAS,OAAO;QACd,WAAW,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;QAC7B,SAAS,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC;IAED,SAAS,MAAM;QACb,WAAW,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QAC5B,WAAW,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;QAC9B,SAAS,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC;IAED,OAAO,CACL,eACE,SAAS,EAAE,iBAAiB,CAAC,WAAW,EAAE;YACxC,MAAM,EAAE,WAAW,EAAE,MAAM,IAAI,MAAM;YACrC,QAAQ;SACT,CAAC,aAEF,gBACE,GAAG,EAAE,WAAW,EAAE,UAAU,EAC5B,SAAS,EAAC,sBAAsB,EAChC,YAAY,EAAC,KAAK,EAClB,IAAI,EAAE,IAAI,IAAI,MAAM,EACpB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,WAAW,EAAE,KAAK,IAAI,YAAY,IAAI,EAAE,GAC/C,EACF,eAAM,SAAS,EAAC,kBAAkB,YAAE,QAAQ,GAAQ,IAChD,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Input/Input.tsx"],"names":[],"mappings":";AACA,OAAO,EAA0B,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,aAAa,CAAC;AAWrB,MAAM,UAAU,QAAQ,CAAC,EACvB,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,OAAO,EACP,WAAW,EACX,IAAI,EACJ,KAAK,EACC;IACN,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,SAAS,QAAQ,CAAC,KAAU;QAC1B,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,QAAQ;gBACX,QAAQ,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBAC9B,MAAM;YACR;gBACE,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBAC7B,MAAM;QACV,CAAC;IACH,CAAC;IAED,SAAS,QAAQ,CAAC,KAAsB;QACtC,WAAW,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;QAE7B,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC;IACH,CAAC;IAED,SAAS,OAAO;QACd,WAAW,EAAE,KAAK,EAAE,CAAC;QACrB,UAAU,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC;IAED,SAAS,MAAM;QACb,IAAI,WAAW,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;YACxC,WAAW,CAAC,KAAK,EAAE,CAAC;QACtB,CAAC;QAED,WAAW,EAAE,IAAI,EAAE,CAAC;QACpB,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC;IAED,OAAO,CACL,eACE,SAAS,EAAE,iBAAiB,CAAC,WAAW,EAAE;YACxC,OAAO,EAAE,WAAW,EAAE,OAAO,IAAI,OAAO;YACxC,QAAQ,EAAE,WAAW,EAAE,QAAQ,IAAI,QAAQ;SAC5C,CAAC,aAEF,gBACE,GAAG,EAAE,WAAW,EAAE,UAAU,EAC5B,SAAS,EAAC,sBAAsB,EAChC,YAAY,EAAC,KAAK,EAClB,IAAI,EAAE,IAAI,IAAI,MAAM,EACpB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,WAAW,EAAE,QAAQ,IAAI,QAAQ,EAC3C,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,WAAW,EAAE,KAAK,IAAI,KAAK,IAAI,EAAE,GACxC,EACF,eAAM,SAAS,EAAC,kBAAkB,YAAE,QAAQ,GAAQ,IAChD,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/components/atoms/InputMoney/InputMoney.d.ts

@@ -1,13 +1,13 @@
-import { ReactControl } from '../../../hooks';
+import { ReactControl } from '@rolster/react-forms';
 import './InputMoney.css';
 interface InputMoney {
     decimals?: boolean;
-    defaultValue?: number;
     disabled?: boolean;
     formControl?: ReactControl<HTMLInputElement, number>;
     onValue?: (value: number) => void;
     placeholder?: string;
     symbol?: string;
+    value?: number;
 }
-export declare function RlsInputMoney({ decimals, defaultValue, disabled, formControl, onValue, placeholder, symbol }: InputMoney): import("react/jsx-runtime").JSX.Element;
+export declare function RlsInputMoney({ decimals, disabled, formControl, onValue, placeholder, symbol, value }: InputMoney): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/atoms/InputMoney/InputMoney.js

@@ -1,23 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { RlsAmount } from '../Amount/Amount';
 import { RlsInput } from '../Input/Input';
 import './InputMoney.css';
-export function RlsInputMoney({ decimals, defaultValue, disabled, formControl, onValue, placeholder, symbol }) {
-    const [value, setValue] = useState(defaultValue || 0);
-    useEffect(() => {
-        formControl?.subscribe((value) => {
-            setValue(value || 0);
-        });
-    }, []);
+export function RlsInputMoney({ decimals, disabled, formControl, onValue, placeholder, symbol, value }) {
+    const [valueInput, setValueInput] = useState(value || 0);
     function onMoney(value) {
         if (!formControl) {
-            setValue(value);
+            setValueInput(value);
         }
         if (onValue) {
             onValue(value);
         }
     }
-    return (_jsx("div", { className: "rls-input-money", children: _jsx(RlsInput, { formControl: formControl, type: "number", disabled: disabled, placeholder: placeholder, defaultValue: defaultValue, onValue: onMoney, children: _jsx(RlsAmount, { value: formControl?.state || value, symbol: symbol, decimals: decimals }) }) }));
+    return (_jsx("div", { className: "rls-input-money", children: _jsx(RlsInput, { formControl: formControl, type: "number", value: value, disabled: disabled, placeholder: placeholder, onValue: onMoney, children: _jsx(RlsAmount, { value: formControl?.state || value || valueInput, symbol: symbol, decimals: decimals }) }) }));
 }
 //# sourceMappingURL=InputMoney.js.map

package/dist/esm/components/atoms/InputMoney/InputMoney.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputMoney.js","sourceRoot":"","sources":["../../../../../src/components/atoms/InputMoney/InputMoney.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,kBAAkB,CAAC;AAY1B,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,OAAO,EACP,WAAW,EACX,MAAM,EACK;IACX,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,IAAI,CAAC,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,EAAE,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;YAC/B,QAAQ,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;QACvB,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,OAAO,CAAC,KAAa;QAC5B,IAAI,CAAC,WAAW,EAAE;YAChB,QAAQ,CAAC,KAAK,CAAC,CAAC;SACjB;QAED,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,KAAK,CAAC,CAAC;SAChB;IACH,CAAC;IAED,OAAO,CACL,cAAK,SAAS,EAAC,iBAAiB,YAC9B,KAAC,QAAQ,IACP,WAAW,EAAE,WAAW,EACxB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,YAEhB,KAAC,SAAS,IACR,KAAK,EAAE,WAAW,EAAE,KAAK,IAAI,KAAK,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,GAClB,GACO,GACP,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"InputMoney.js","sourceRoot":"","sources":["../../../../../src/components/atoms/InputMoney/InputMoney.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,kBAAkB,CAAC;AAY1B,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,OAAO,EACP,WAAW,EACX,MAAM,EACN,KAAK,EACM;IACX,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;IAEzD,SAAS,OAAO,CAAC,KAAa;QAC5B,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC;IACH,CAAC;IAED,OAAO,CACL,cAAK,SAAS,EAAC,iBAAiB,YAC9B,KAAC,QAAQ,IACP,WAAW,EAAE,WAAW,EACxB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,YAEhB,KAAC,SAAS,IACR,KAAK,EAAE,WAAW,EAAE,KAAK,IAAI,KAAK,IAAI,UAAU,EAChD,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,GAClB,GACO,GACP,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/components/atoms/InputNumber/InputNumber.d.ts

@@ -1,11 +1,11 @@
-import { ReactControl } from '../../../hooks';
+import { ReactControl } from '@rolster/react-forms';
 import './InputNumber.css';
 interface InputNumber {
     disabled?: boolean;
-    defaultValue?: number;
     formControl?: ReactControl<HTMLInputElement, number>;
     onValue?: (value: number) => void;
     placeholder?: string;
+    value?: number;
 }
-export declare function RlsInputNumber({ disabled, defaultValue, formControl, onValue, placeholder }: InputNumber): import("react/jsx-runtime").JSX.Element;
+export declare function RlsInputNumber({ disabled, formControl, onValue, placeholder, value }: InputNumber): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/atoms/InputNumber/InputNumber.js

@@ -1,22 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { RlsInput } from '../Input/Input';
 import './InputNumber.css';
-export function RlsInputNumber({ disabled, defaultValue, formControl, onValue, placeholder }) {
-    const [value, setValue] = useState(defaultValue || 0);
-    useEffect(() => {
-        formControl?.subscribe((value) => {
-            setValue(value || 0);
-        });
-    }, []);
+export function RlsInputNumber({ disabled, formControl, onValue, placeholder, value }) {
+    const [valueInput, setValueInput] = useState(value || 0);
     function onNumber(value) {
         if (!formControl) {
-            setValue(value);
+            setValueInput(value);
         }
         if (onValue) {
             onValue(value);
         }
     }
-    return (_jsx("div", { className: "rls-input-number", children: _jsx(RlsInput, { formControl: formControl, type: "number", disabled: disabled, placeholder: placeholder, onValue: onNumber, children: formControl?.state || value }) }));
+    return (_jsx("div", { className: "rls-input-number", children: _jsx(RlsInput, { formControl: formControl, type: "number", value: value, disabled: disabled, placeholder: placeholder, onValue: onNumber, children: formControl?.state || value || valueInput }) }));
 }
 //# sourceMappingURL=InputNumber.js.map

package/dist/esm/components/atoms/InputNumber/InputNumber.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputNumber.js","sourceRoot":"","sources":["../../../../../src/components/atoms/InputNumber/InputNumber.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,mBAAmB,CAAC;AAU3B,MAAM,UAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,YAAY,EACZ,WAAW,EACX,OAAO,EACP,WAAW,EACC;IACZ,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,IAAI,CAAC,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,EAAE,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;YAC/B,QAAQ,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;QACvB,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,QAAQ,CAAC,KAAa;QAC7B,IAAI,CAAC,WAAW,EAAE;YAChB,QAAQ,CAAC,KAAK,CAAC,CAAC;SACjB;QAED,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,KAAK,CAAC,CAAC;SAChB;IACH,CAAC;IAED,OAAO,CACL,cAAK,SAAS,EAAC,kBAAkB,YAC/B,KAAC,QAAQ,IACP,WAAW,EAAE,WAAW,EACxB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,QAAQ,YAEhB,WAAW,EAAE,KAAK,IAAI,KAAK,GACnB,GACP,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"InputNumber.js","sourceRoot":"","sources":["../../../../../src/components/atoms/InputNumber/InputNumber.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,mBAAmB,CAAC;AAU3B,MAAM,UAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,WAAW,EACX,OAAO,EACP,WAAW,EACX,KAAK,EACO;IACZ,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;IAEzD,SAAS,QAAQ,CAAC,KAAa;QAC7B,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC;IACH,CAAC;IAED,OAAO,CACL,cAAK,SAAS,EAAC,kBAAkB,YAC/B,KAAC,QAAQ,IACP,WAAW,EAAE,WAAW,EACxB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,QAAQ,YAEhB,WAAW,EAAE,KAAK,IAAI,KAAK,IAAI,UAAU,GACjC,GACP,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/components/atoms/InputPassword/InputPassword.d.ts

@@ -1,4 +1,4 @@
-import { ReactControl } from '../../../hooks';
+import { ReactControl } from '@rolster/react-forms';
 import { RlsComponent } from '../../definitions';
 import './InputPassword.css';
 type InputPasswordType = 'password' | 'text';

package/dist/esm/components/atoms/InputPassword/InputPassword.js

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { renderClassStatus } from '../../../utils/css';
 import './InputPassword.css';
 export function RlsInputPassword({ disabled, formControl, onValue, placeholder, type }) {
-    const [active, setActive] = useState(false);
+    const [focused, setFocused] = useState(false);
     function onChange(event) {
         formControl?.setState(event.target.value);
         if (onValue) {
@@ -11,16 +11,18 @@ export function RlsInputPassword({ disabled, formControl, onValue, placeholder,
         }
     }
     function onFocus() {
-        setActive(true);
-        formControl?.setActive(true);
+        formControl?.focus();
+        setFocused(true);
     }
     function onBlur() {
-        setActive(false);
-        formControl?.setActive(false);
-        formControl?.setDirty(true);
+        if (formControl && !formControl.touched) {
+            formControl.touch();
+        }
+        formControl?.blur();
+        setFocused(false);
     }
     return (_jsx("div", { className: renderClassStatus('rls-input-password', {
-            active: formControl?.active || active,
+            focused: formControl?.focused || focused,
             disabled
         }), children: _jsx("input", { className: "rls-input-password__component", autoComplete: "off", type: type || 'password', placeholder: placeholder, disabled: disabled, onFocus: onFocus, onBlur: onBlur, onChange: onChange }) }));
 }

package/dist/esm/components/atoms/InputPassword/InputPassword.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputPassword.js","sourceRoot":"","sources":["../../../../../src/components/atoms/InputPassword/InputPassword.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,qBAAqB,CAAC;AAY7B,MAAM,UAAU,gBAAgB,CAAC,EAC/B,QAAQ,EACR,WAAW,EACX,OAAO,EACP,WAAW,EACX,IAAI,EACU;IACd,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,SAAS,QAAQ,CAAC,KAAU;QAC1B,WAAW,EAAE,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAE1C,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;SAC7B;IACH,CAAC;IAED,SAAS,OAAO;QACd,SAAS,CAAC,IAAI,CAAC,CAAC;QAChB,WAAW,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,SAAS,MAAM;QACb,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,WAAW,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;QAC9B,WAAW,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC;IAED,OAAO,CACL,cACE,SAAS,EAAE,iBAAiB,CAAC,oBAAoB,EAAE;YACjD,MAAM,EAAE,WAAW,EAAE,MAAM,IAAI,MAAM;YACrC,QAAQ;SACT,CAAC,YAEF,gBACE,SAAS,EAAC,+BAA+B,EACzC,YAAY,EAAC,KAAK,EAClB,IAAI,EAAE,IAAI,IAAI,UAAU,EACxB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,GAClB,GACE,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"InputPassword.js","sourceRoot":"","sources":["../../../../../src/components/atoms/InputPassword/InputPassword.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,qBAAqB,CAAC;AAY7B,MAAM,UAAU,gBAAgB,CAAC,EAC/B,QAAQ,EACR,WAAW,EACX,OAAO,EACP,WAAW,EACX,IAAI,EACU;IACd,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,SAAS,QAAQ,CAAC,KAAU;QAC1B,WAAW,EAAE,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAE1C,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC;IAED,SAAS,OAAO;QACd,WAAW,EAAE,KAAK,EAAE,CAAC;QACrB,UAAU,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC;IAED,SAAS,MAAM;QACb,IAAI,WAAW,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;YACxC,WAAW,CAAC,KAAK,EAAE,CAAC;QACtB,CAAC;QAED,WAAW,EAAE,IAAI,EAAE,CAAC;QACpB,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC;IAED,OAAO,CACL,cACE,SAAS,EAAE,iBAAiB,CAAC,oBAAoB,EAAE;YACjD,OAAO,EAAE,WAAW,EAAE,OAAO,IAAI,OAAO;YACxC,QAAQ;SACT,CAAC,YAEF,gBACE,SAAS,EAAC,+BAA+B,EACzC,YAAY,EAAC,KAAK,EAClB,IAAI,EAAE,IAAI,IAAI,UAAU,EACxB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,GAClB,GACE,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/components/atoms/InputText/InputText.d.ts

@@ -1,11 +1,11 @@
-import { ReactControl } from '../../../hooks';
+import { ReactControl } from '@rolster/react-forms';
 import './InputText.css';
 interface InputText {
-    defaultValue?: string;
     disabled?: boolean;
     formControl?: ReactControl<HTMLInputElement, string>;
     onValue?: (value: string) => void;
     placeholder?: string;
+    value?: string;
 }
-export declare function RlsInputText({ defaultValue, disabled, formControl, onValue, placeholder }: InputText): import("react/jsx-runtime").JSX.Element;
+export declare function RlsInputText({ disabled, formControl, onValue, placeholder, value }: InputText): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/atoms/InputText/InputText.js

@@ -1,22 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { RlsInput } from '../Input/Input';
 import './InputText.css';
-export function RlsInputText({ defaultValue, disabled, formControl, onValue, placeholder }) {
-    const [value, setValue] = useState(defaultValue || '');
-    useEffect(() => {
-        formControl?.subscribe((value) => {
-            setValue(value || '');
-        });
-    }, []);
+export function RlsInputText({ disabled, formControl, onValue, placeholder, value }) {
+    const [valueInput, setValueInput] = useState(value || '');
     function onText(value) {
         if (!formControl) {
-            setValue(value);
+            setValueInput(value);
         }
         if (onValue) {
             onValue(value);
         }
     }
-    return (_jsx("div", { className: "rls-input-text", children: _jsx(RlsInput, { formControl: formControl, type: "text", disabled: disabled, placeholder: placeholder, onValue: onText, children: formControl?.state || value }) }));
+    return (_jsx("div", { className: "rls-input-text", children: _jsx(RlsInput, { formControl: formControl, type: "text", value: value, disabled: disabled, placeholder: placeholder, onValue: onText, children: formControl?.state || value || valueInput }) }));
 }
 //# sourceMappingURL=InputText.js.map

package/dist/esm/components/atoms/InputText/InputText.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputText.js","sourceRoot":"","sources":["../../../../../src/components/atoms/InputText/InputText.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,iBAAiB,CAAC;AAUzB,MAAM,UAAU,YAAY,CAAC,EAC3B,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,OAAO,EACP,WAAW,EACD;IACV,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC;IAEvD,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,EAAE,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;YAC/B,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;QACxB,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,MAAM,CAAC,KAAa;QAC3B,IAAI,CAAC,WAAW,EAAE;YAChB,QAAQ,CAAC,KAAK,CAAC,CAAC;SACjB;QAED,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,KAAK,CAAC,CAAC;SAChB;IACH,CAAC;IAED,OAAO,CACL,cAAK,SAAS,EAAC,gBAAgB,YAC7B,KAAC,QAAQ,IACP,WAAW,EAAE,WAAW,EACxB,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,MAAM,YAEd,WAAW,EAAE,KAAK,IAAI,KAAK,GACnB,GACP,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"InputText.js","sourceRoot":"","sources":["../../../../../src/components/atoms/InputText/InputText.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,iBAAiB,CAAC;AAUzB,MAAM,UAAU,YAAY,CAAC,EAC3B,QAAQ,EACR,WAAW,EACX,OAAO,EACP,WAAW,EACX,KAAK,EACK;IACV,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IAE1D,SAAS,MAAM,CAAC,KAAa;QAC3B,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC;IACH,CAAC;IAED,OAAO,CACL,cAAK,SAAS,EAAC,gBAAgB,YAC7B,KAAC,QAAQ,IACP,WAAW,EAAE,WAAW,EACxB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,MAAM,YAEd,WAAW,EAAE,KAAK,IAAI,KAAK,IAAI,UAAU,GACjC,GACP,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/components/atoms/Label/Label.css

@@ -0,0 +1,3 @@
+.rls-label[rls-theme] {
+  color: var(--color-rolster-500);
+}

package/dist/esm/components/atoms/Label/Label.d.ts

@@ -0,0 +1,2 @@
+import { RlsComponent } from '../../definitions';
+export declare function RlsLabel({ children, rlsTheme }: RlsComponent): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/atoms/Label/Label.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function RlsLabel({ children, rlsTheme }) {
+    return (_jsx("label", { className: "rls-label", "rls-theme": rlsTheme, children: children }));
+}
+//# sourceMappingURL=Label.js.map

package/dist/esm/components/atoms/Label/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Label/Label.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,QAAQ,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAgB;IAC3D,OAAO,CACL,gBAAO,SAAS,EAAC,WAAW,eAAY,QAAQ,YAC7C,QAAQ,GACH,CACT,CAAC;AACJ,CAAC"}

package/dist/esm/components/atoms/MessageIcon/MessageIcon.css

@@ -0,0 +1,12 @@
+.rls-message-icon {
+  --rls-icon-color: var(--color-rolster-500);
+  --rls-icon-width: var(--sizing-16);
+  --rls-icon-height: var(--sizing-16);
+  --rls-icon-font-size: var(--sizing-16);
+  display: flex;
+  align-items: center;
+  column-gap: var(--sizing-4);
+}
+.rls-message-icon span {
+  color: var(--color-theme-300);
+}

package/dist/esm/components/atoms/MessageIcon/MessageIcon.d.ts

@@ -0,0 +1,7 @@
+import { RlsComponent } from '../../definitions';
+import './MessageIcon.css';
+interface IconMessage extends RlsComponent {
+    icon?: string;
+}
+export declare function RlsMessageIcon({ icon, children, rlsTheme }: IconMessage): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/atoms/MessageIcon/MessageIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RlsIcon } from '../Icon/Icon';
+import './MessageIcon.css';
+export function RlsMessageIcon({ icon, children, rlsTheme }) {
+    return (_jsxs("div", { className: "rls-message-icon", "rls-theme": rlsTheme, children: [icon && _jsx(RlsIcon, { value: icon }), _jsx("span", { className: "caption-regular truncate", children: children })] }));
+}
+//# sourceMappingURL=MessageIcon.js.map

package/dist/esm/components/atoms/MessageIcon/MessageIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageIcon.js","sourceRoot":"","sources":["../../../../../src/components/atoms/MessageIcon/MessageIcon.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,mBAAmB,CAAC;AAM3B,MAAM,UAAU,cAAc,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAe;IACtE,OAAO,CACL,eAAK,SAAS,EAAC,kBAAkB,eAAY,QAAQ,aAClD,IAAI,IAAI,KAAC,OAAO,IAAC,KAAK,EAAE,IAAI,GAAI,EACjC,eAAM,SAAS,EAAC,0BAA0B,YAAE,QAAQ,GAAQ,IACxD,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/components/atoms/RadioButton/RadioButton.d.ts

@@ -3,6 +3,7 @@ import './RadioButton.css';
 interface RadioButton extends RlsComponent {
     checked: boolean;
     disabled?: boolean;
+    onClick?: () => void;
 }
-export declare function RlsRadioButton({ checked, disabled, rlsTheme }: RadioButton): import("react/jsx-runtime").JSX.Element;
+export declare function RlsRadioButton({ checked, disabled, onClick, rlsTheme }: RadioButton): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/atoms/RadioButton/RadioButton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { renderClassStatus } from '../../../utils/css';
 import './RadioButton.css';
-export function RlsRadioButton({ checked, disabled, rlsTheme }) {
-    return (_jsx("div", { className: renderClassStatus('rls-radiobutton', { checked, disabled }), "rls-theme": rlsTheme, children: _jsx("div", { className: "rls-radiobutton__component" }) }));
+export function RlsRadioButton({ checked, disabled, onClick, rlsTheme }) {
+    return (_jsx("div", { className: renderClassStatus('rls-radiobutton', { checked, disabled }), onClick: onClick, "rls-theme": rlsTheme, children: _jsx("div", { className: "rls-radiobutton__component" }) }));
 }
 //# sourceMappingURL=RadioButton.js.map

package/dist/esm/components/atoms/RadioButton/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sourceRoot":"","sources":["../../../../../src/components/atoms/RadioButton/RadioButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,mBAAmB,CAAC;AAO3B,MAAM,UAAU,cAAc,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAe;IACzE,OAAO,CACL,cACE,SAAS,EAAE,iBAAiB,CAAC,iBAAiB,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,eAC3D,QAAQ,YAEnB,cAAK,SAAS,EAAC,4BAA4B,GAAO,GAC9C,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"RadioButton.js","sourceRoot":"","sources":["../../../../../src/components/atoms/RadioButton/RadioButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,mBAAmB,CAAC;AAQ3B,MAAM,UAAU,cAAc,CAAC,EAC7B,OAAO,EACP,QAAQ,EACR,OAAO,EACP,QAAQ,EACI;IACZ,OAAO,CACL,cACE,SAAS,EAAE,iBAAiB,CAAC,iBAAiB,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,EACtE,OAAO,EAAE,OAAO,eACL,QAAQ,YAEnB,cAAK,SAAS,EAAC,4BAA4B,GAAO,GAC9C,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/components/atoms/SearchInput/SearchInput.d.ts

@@ -1,7 +1,7 @@
-import { ReactControl } from '../../../hooks';
+import { ReactInputControl } from '@rolster/react-forms';
 import './SearchInput.css';
 interface SearchInput {
-    formControl?: ReactControl<HTMLInputElement, string>;
+    formControl?: ReactInputControl<string>;
     placeholder?: string;
     onSearch?: () => void;
 }

package/dist/esm/components/atoms/Switch/Switch.css

@@ -1,35 +1,54 @@
 .rls-switch {
-  --pvt-component-background: var(--border-theme-300);
-  --pvt-component-left: calc(var(--sizing-2) + 1px);
-  position: relative;
-  float: left;
-  outline: none;
-  box-sizing: border-box;
-  width: var(--sizing-40);
-  height: var(--sizing-24);
-  box-sizing: border-box;
-  border-radius: var(--sizing-12);
-  border: var(--border-1-theme-300);
+  --pvt-element-left: var(--sizing-2);
+  --pvt-element-background: var(--background-theme-500);
+  --pvt-bar-background: var(--background-theme-100);
+  max-width: var(--sizing-40);
 }
 .rls-switch:hover {
   cursor: pointer;
 }
 .rls-switch--checked {
-  --pvt-component-background: var(--gradient-rolster-500);
-  --pvt-component-left: 1.125rem;
-  border: var(--border-1-rolster-500);
+  --pvt-element-background: var(--gradient-rolster-500);
+  --pvt-element-left: calc(
+    100% - var(--rls-switch-element-size) - var(--sizing-2)
+  );
+  --pvt-bar-background: var(--color-rolster-300);
 }
 .rls-switch--disabled {
   opacity: 0.5;
   pointer-events: none;
 }
 .rls-switch__component {
+  position: relative;
+  width: 100%;
+  padding: var(--sizing-6) var(--sizing-2);
+  box-sizing: border-box;
+}
+.rls-switch__component__element {
   position: absolute;
-  top: calc(var(--sizing-2) + 1px);
-  left: var(--pvt-component-left);
-  width: var(--sizing-16);
-  height: var(--sizing-16);
-  background: var(--pvt-component-background);
-  transition: left 160ms 0ms var(--standard-curve);
-  border-radius: var(--sizing-12);
+  top: 0rem;
+  left: var(--pvt-element-left);
+  width: var(--rls-switch-element-size);
+  height: var(--rls-switch-element-size);
+  z-index: var(--z-index-2);
+  padding: var(--sizing-4);
+  box-sizing: border-box;
+  border-radius: 50%;
+  background: var(--background-theme-500);
+  box-shadow: 0 0 0.25rem 0 rgba(37, 38, 65, 0.38);
+  transition: left 240ms var(--standard-curve);
+}
+.rls-switch__component__element::before {
+  display: block;
+  content: '';
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: var(--pvt-element-background);
+}
+.rls-switch__component__bar {
+  background: var(--pvt-bar-background);
+  width: 100%;
+  height: var(--rls-switch-bar-height);
+  border-radius: var(--rls-switch-bar-radius);
 }

package/dist/esm/components/atoms/Switch/Switch.d.ts

@@ -1,3 +1,4 @@
+import { ReactControl } from '@rolster/react-forms';
 import { RlsComponent } from '../../definitions';
 import './Switch.css';
 interface Switch extends RlsComponent {
@@ -5,5 +6,10 @@ interface Switch extends RlsComponent {
     disabled?: boolean;
     onClick?: () => void;
 }
-export declare function RlsSwitch({ checked, disabled, rlsTheme, onClick }: Switch): import("react/jsx-runtime").JSX.Element;
+interface SwitchControl extends RlsComponent {
+    disabled?: boolean;
+    formControl: ReactControl<HTMLElement, boolean>;
+}
+export declare function RlsSwitch({ checked, disabled, onClick, rlsTheme }: Switch): import("react/jsx-runtime").JSX.Element;
+export declare function RlsSwitchControl({ formControl, disabled, rlsTheme }: SwitchControl): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/atoms/Switch/Switch.js

@@ -1,7 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { renderClassStatus } from '../../../utils/css';
 import './Switch.css';
-export function RlsSwitch({ checked, disabled, rlsTheme, onClick }) {
-    return (_jsx("div", { className: renderClassStatus('rls-switch', { checked, disabled }), onClick: onClick, "rls-theme": rlsTheme, children: _jsx("div", { className: "rls-switch__component" }) }));
+export function RlsSwitch({ checked, disabled, onClick, rlsTheme }) {
+    return (_jsx("div", { className: renderClassStatus('rls-switch', { checked, disabled }), onClick: onClick, "rls-theme": rlsTheme, children: _jsxs("div", { className: "rls-switch__component", children: [_jsx("div", { className: "rls-switch__component__element" }), _jsx("div", { className: "rls-switch__component__bar" })] }) }));
+}
+export function RlsSwitchControl({ formControl, disabled, rlsTheme }) {
+    return (_jsx(RlsSwitch, { checked: formControl.state || false, disabled: disabled, onClick: () => {
+            formControl.setState(!formControl.state);
+        }, rlsTheme: rlsTheme }));
 }
 //# sourceMappingURL=Switch.js.map

package/dist/esm/components/atoms/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Switch/Switch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,cAAc,CAAC;AAQtB,MAAM,UAAU,SAAS,CAAC,EACxB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAO,EACA;IACP,OAAO,CACL,cACE,SAAS,EAAE,iBAAiB,CAAC,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,EACjE,OAAO,EAAE,OAAO,eACL,QAAQ,YAEnB,cAAK,SAAS,EAAC,uBAAuB,GAAO,GACzC,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Switch/Switch.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,cAAc,CAAC;AAatB,MAAM,UAAU,SAAS,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAU;IACxE,OAAO,CACL,cACE,SAAS,EAAE,iBAAiB,CAAC,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,EACjE,OAAO,EAAE,OAAO,eACL,QAAQ,YAEnB,eAAK,SAAS,EAAC,uBAAuB,aACpC,cAAK,SAAS,EAAC,gCAAgC,GAAO,EACtD,cAAK,SAAS,EAAC,4BAA4B,GAAO,IAC9C,GACF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,EAC/B,WAAW,EACX,QAAQ,EACR,QAAQ,EACM;IACd,OAAO,CACL,KAAC,SAAS,IACR,OAAO,EAAE,WAAW,CAAC,KAAK,IAAI,KAAK,EACnC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,EAAE;YACZ,WAAW,CAAC,QAAQ,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAC3C,CAAC,EACD,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,CAAC"}

package/dist/esm/components/atoms/index.d.ts

@@ -10,6 +10,8 @@ export * from './InputMoney/InputMoney';
 export * from './InputNumber/InputNumber';
 export * from './InputPassword/InputPassword';
 export * from './InputText/InputText';
+export * from './Label/Label';
+export * from './MessageIcon/MessageIcon';
 export * from './Poster/Poster';
 export * from './ProgressBar/ProgressBar';
 export * from './RadioButton/RadioButton';

package/dist/esm/components/atoms/index.js

@@ -10,6 +10,8 @@ export * from './InputMoney/InputMoney';
 export * from './InputNumber/InputNumber';
 export * from './InputPassword/InputPassword';
 export * from './InputText/InputText';
+export * from './Label/Label';
+export * from './MessageIcon/MessageIcon';
 export * from './Poster/Poster';
 export * from './ProgressBar/ProgressBar';
 export * from './RadioButton/RadioButton';

package/dist/esm/components/atoms/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/atoms/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/atoms/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC"}

package/dist/esm/components/molecules/ButtonToggle/ButtonToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonToggle.js","sourceRoot":"","sources":["../../../../../src/components/molecules/ButtonToggle/ButtonToggle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAc,SAAS,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,oBAAoB,CAAC;AAc5B,MAAM,UAAU,eAAe,CAAC,EAC9B,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACK;IACb,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEhD,MAAM,CAAC,WAAW,CAAC,GAAG,OAAO,CAAC;IAE9B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IAClD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,WAAW,CAAC,EAAE,MAAM,EAAO;YAClC,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,EAAE;gBAC1C,UAAU,CAAC,KAAK,CAAC,CAAC;aACnB;QACH,CAAC;QAED,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAEhD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,WAAW;QAClB,UAAU,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC;IACxC,CAAC;IAED,SAAS,cAAc,CAAC,MAA0B;QAChD,SAAS,CAAC,MAAM,CAAC,CAAC;QAClB,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,mBAAmB,EAAC,GAAG,EAAE,UAAU,eAAa,QAAQ,aACrE,eAAK,SAAS,EAAC,4BAA4B,aACxC,MAAM,IAAI,CACT,cAAK,SAAS,EAAC,2BAA2B,YACxC,KAAC,SAAS,IACR,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,GAAG,EAAE;gCACZ,IAAI,QAAQ,EAAE;oCACZ,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;iCACxB;4BACH,CAAC,YAEA,MAAM,CAAC,KAAK,GACH,GACR,CACP,EAED,cAAK,SAAS,EAAC,yBAAyB,YACtC,KAAC,SAAS,IACR,IAAI,EAAE,IAAI,EACV,UAAU,EAAC,gBAAgB,EAC3B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,GACpB,GACE,IACF,EAEN,cACE,SAAS,EAAE,iBAAiB,CAAC,yBAAyB,EAAE;oBACtD,OAAO;oBACP,IAAI,EAAE,CAAC,OAAO;iBACf,CAAC,YAEF,uBACG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,aACE,SAAS,EAAC,UAAU,EAEpB,OAAO,EAAE,GAAG,EAAE;4BACZ,cAAc,CAAC,MAAM,CAAC,CAAC;wBACzB,CAAC,YAEA,MAAM,CAAC,KAAK,IALR,KAAK,CAMP,CACN,CAAC,GACC,GACD,IACF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"ButtonToggle.js","sourceRoot":"","sources":["../../../../../src/components/molecules/ButtonToggle/ButtonToggle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAc,SAAS,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,oBAAoB,CAAC;AAc5B,MAAM,UAAU,eAAe,CAAC,EAC9B,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACK;IACb,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEhD,MAAM,CAAC,WAAW,CAAC,GAAG,OAAO,CAAC;IAE9B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IAClD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,WAAW,CAAC,EAAE,MAAM,EAAO;YAClC,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;gBAC3C,UAAU,CAAC,KAAK,CAAC,CAAC;YACpB,CAAC;QACH,CAAC;QAED,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAEhD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,WAAW;QAClB,UAAU,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC;IACxC,CAAC;IAED,SAAS,cAAc,CAAC,MAA0B;QAChD,SAAS,CAAC,MAAM,CAAC,CAAC;QAClB,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,mBAAmB,EAAC,GAAG,EAAE,UAAU,eAAa,QAAQ,aACrE,eAAK,SAAS,EAAC,4BAA4B,aACxC,MAAM,IAAI,CACT,cAAK,SAAS,EAAC,2BAA2B,YACxC,KAAC,SAAS,IACR,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,GAAG,EAAE;gCACZ,IAAI,QAAQ,EAAE,CAAC;oCACb,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gCACzB,CAAC;4BACH,CAAC,YAEA,MAAM,CAAC,KAAK,GACH,GACR,CACP,EAED,cAAK,SAAS,EAAC,yBAAyB,YACtC,KAAC,SAAS,IACR,IAAI,EAAE,IAAI,EACV,UAAU,EAAC,gBAAgB,EAC3B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,GACpB,GACE,IACF,EAEN,cACE,SAAS,EAAE,iBAAiB,CAAC,yBAAyB,EAAE;oBACtD,OAAO;oBACP,IAAI,EAAE,CAAC,OAAO;iBACf,CAAC,YAEF,uBACG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,aACE,SAAS,EAAC,UAAU,EAEpB,OAAO,EAAE,GAAG,EAAE;4BACZ,cAAc,CAAC,MAAM,CAAC,CAAC;wBACzB,CAAC,YAEA,MAAM,CAAC,KAAK,IALR,KAAK,CAMP,CACN,CAAC,GACC,GACD,IACF,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/components/molecules/CheckBoxLabel/CheckBoxLabel.css

@@ -4,10 +4,8 @@
   --pvt-text-overflow: hidden;
   --pvt-text-white-space: nowrap;
   --pvt-text-text-overflow: ellipsis;
-  position: relative;
-  float: left;
-  width: 100%;
   display: flex;
+  column-gap: var(--sizing-8);
 }
 .rls-checkbox-label--disabled {
   --pvt-text-opacity: 0.5;
@@ -20,11 +18,9 @@
   --pvt-text-height: auto;
 }
 .rls-checkbox-label__component {
-  margin-right: var(--sizing-8);
   width: auto;
 }
 .rls-checkbox-label__text {
-  float: left;
   max-width: calc(100% - var(--sizing-32));
   height: var(--pvt-text-height);
   line-height: var(--sizing-24);