namirasoft-site-react 1.3.46 → 1.3.48

package/dist/App.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { NSLayoutTitle, NSTable } from './main';
+import { NSFooter, NSHeader, NSTable } from './main';
 export function App() {
     let columns = {
         "id": "ID",
@@ -28,6 +28,6 @@ export function App() {
             status: "Done"
         }
     ];
-    return (_jsx(NSLayoutTitle, { scope: 'Namirasoft Account Console', logo: '', title: "Namirasoft", children: _jsx("div", { className: "container", children: _jsx(NSTable, { columns: columns, rows: rows, getRowKey: row => row.id.toString() }) }) }));
+    return (_jsxs(_Fragment, { children: [_jsx(NSHeader, { name: 'Header', scope: 'Namira Software Corporation', logo: 'https://static.namirasoft.com/logo/namirasoft/base.png', account: false, background: { color: "transparent !important" } }), _jsx("div", { className: "container", children: _jsx(NSTable, { columns: columns, rows: rows, getRowKey: row => row.id.toString() }) }), _jsx(NSFooter, { name: 'Footer', scope: 'Namira Software Corporation', logo: 'https://static.namirasoft.com/logo/namirasoft/base.png' })] }));
 }
 //# sourceMappingURL=App.js.map

package/dist/App.js.map

@@ -1 +1 @@
-{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,CAAC;AACnB,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEhD,MAAM,UAAU,GAAG;IAEf,IAAI,OAAO,GAAG;QACV,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,SAAS;QACpB,OAAO,EAAE,OAAO;QAChB,SAAS,EAAE,SAAS;QACpB,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,QAAQ;KACrB,CAAA;IACD,IAAI,IAAI,GAAG,CAAC;YACR,EAAE,EAAE,CAAC;YACL,OAAO,EAAE,oBAAoB;YAC7B,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,yCAAyC;YAClD,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,MAAM;SACjB;QACD;YACI,EAAE,EAAE,CAAC;YACL,OAAO,EAAE,oBAAoB;YAC7B,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,yCAAyC;YAClD,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,MAAM;SACjB;KACA,CAAA;IAUD,OAAO,CACH,KAAC,aAAa,IAAC,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,YAAY,YACxE,cAAK,SAAS,EAAC,WAAW,YACtB,KAAC,OAAO,IAAM,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAI,GACjF,GACM,CACnB,CAAC;AACN,CAAC"}
+{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,CAAC;AACnB,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAErD,MAAM,UAAU,GAAG;IAElB,IAAI,OAAO,GAAG;QACb,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,SAAS;QACpB,OAAO,EAAE,OAAO;QAChB,SAAS,EAAE,SAAS;QACpB,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,QAAQ;KAClB,CAAA;IACD,IAAI,IAAI,GAAG,CAAC;YACX,EAAE,EAAE,CAAC;YACL,OAAO,EAAE,oBAAoB;YAC7B,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,yCAAyC;YAClD,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,MAAM;SACd;QACD;YACC,EAAE,EAAE,CAAC;YACL,OAAO,EAAE,oBAAoB;YAC7B,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,yCAAyC;YAClD,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,MAAM;SACd;KACA,CAAA;IAUD,OAAO,CACN,8BACC,KAAC,QAAQ,IACR,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,6BAA6B,EACnC,IAAI,EAAC,wDAAwD,EAC7D,OAAO,EAAE,KAAK,EACd,UAAU,EAAE,EAAE,KAAK,EAAE,wBAAwB,EAAE,GAC9C,EAEF,cAAK,SAAS,EAAC,WAAW,YACzB,KAAC,OAAO,IAAM,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAI,GAC9E,EACN,KAAC,QAAQ,IAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,6BAA6B,EAAC,IAAI,EAAC,wDAAwD,GAAG,IAC1H,CACH,CAAC;AACH,CAAC"}

package/dist/Validator.d.ts

@@ -0,0 +1,9 @@
+import { ValidationNumberProps } from "./props/ValidationNumberProps";
+import { ValidationProps } from "./props/ValidationProps";
+import { ValidationStringProps } from "./props/ValidationStringProps";
+export declare class Validator {
+    static getError(name: string, value: string | null | undefined, validator: ValidationProps): string | null;
+    static getErrorString(name: string, value: string | null | undefined, validator: ValidationStringProps): string | null;
+    static getErrorNumber(name: string, value: string | null | undefined, validator: ValidationNumberProps): string | null;
+    static getErrorEmail(name: string, value: string | null | undefined): string | null;
+}

package/dist/Validator.js

@@ -0,0 +1,52 @@
+export class Validator {
+    static getError(name, value, validator) {
+        if (validator.required)
+            if (!value)
+                return `${name} is required.`;
+        if (value)
+            if (validator.regex)
+                if (!validator.regex.regex.test(value))
+                    return `${name} is not a valid ${validator.regex.name}.`;
+        return null;
+    }
+    static getErrorString(name, value, validator) {
+        let error = this.getError(name, value, validator);
+        if (error)
+            return error;
+        if (value) {
+            if (validator.max_length != null)
+                if (validator.max_length < value.length)
+                    return `Max length of ${name} should be ${validator.max_length} characters.`;
+            if (validator.min_length != null)
+                if (validator.min_length > value.length)
+                    return `Minlength of ${name} should be ${validator.min_length} characters.`;
+        }
+        return null;
+    }
+    static getErrorNumber(name, value, validator) {
+        let error = this.getError(name, value, validator);
+        if (error)
+            return error;
+        if (value) {
+            let numValue = parseFloat(value);
+            if (isNaN(numValue))
+                return `${name} is not a number.`;
+            if (validator.max != null)
+                if (validator.max < numValue)
+                    return `Max value of ${name} should be ${validator.max} characters.`;
+            if (validator.min != null)
+                if (validator.min > numValue)
+                    return `Min value of ${name} should be ${validator.min} characters.`;
+        }
+        return null;
+    }
+    static getErrorEmail(name, value) {
+        return Validator.getError(name, value, {
+            required: true, regex: {
+                name: "Email",
+                regex: /^[\w]+@([\w]+\.)+\w{2,}$/gm
+            }
+        });
+    }
+}
+//# sourceMappingURL=Validator.js.map

package/dist/Validator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Validator.js","sourceRoot":"","sources":["../src/Validator.ts"],"names":[],"mappings":"AAIA,MAAM,OAAO,SAAS;IAElB,MAAM,CAAC,QAAQ,CAAC,IAAY,EAAE,KAAgC,EAAE,SAA0B;QAEtF,IAAI,SAAS,CAAC,QAAQ;YAClB,IAAI,CAAC,KAAK;gBACN,OAAO,GAAG,IAAI,eAAe,CAAC;QACtC,IAAI,KAAK;YACL,IAAI,SAAS,CAAC,KAAK;gBACf,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;oBAClC,OAAO,GAAG,IAAI,mBAAmB,SAAS,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC;QACrE,OAAO,IAAI,CAAC;IAChB,CAAC;IACD,MAAM,CAAC,cAAc,CAAC,IAAY,EAAE,KAAgC,EAAE,SAAgC;QAElG,IAAI,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC;QAClD,IAAI,KAAK;YACL,OAAO,KAAK,CAAC;QACjB,IAAI,KAAK,EACT,CAAC;YACG,IAAI,SAAS,CAAC,UAAU,IAAI,IAAI;gBAC5B,IAAI,SAAS,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM;oBACnC,OAAO,iBAAiB,IAAI,cAAc,SAAS,CAAC,UAAU,cAAc,CAAC;YACrF,IAAI,SAAS,CAAC,UAAU,IAAI,IAAI;gBAC5B,IAAI,SAAS,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM;oBACnC,OAAO,gBAAgB,IAAI,cAAc,SAAS,CAAC,UAAU,cAAc,CAAC;QACxF,CAAC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;IACD,MAAM,CAAC,cAAc,CAAC,IAAY,EAAE,KAAgC,EAAE,SAAgC;QAElG,IAAI,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC;QAClD,IAAI,KAAK;YACL,OAAO,KAAK,CAAC;QACjB,IAAI,KAAK,EACT,CAAC;YACG,IAAI,QAAQ,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;YACjC,IAAI,KAAK,CAAC,QAAQ,CAAC;gBACf,OAAO,GAAG,IAAI,mBAAmB,CAAC;YACtC,IAAI,SAAS,CAAC,GAAG,IAAI,IAAI;gBACrB,IAAI,SAAS,CAAC,GAAG,GAAG,QAAQ;oBACxB,OAAO,gBAAgB,IAAI,cAAc,SAAS,CAAC,GAAG,cAAc,CAAC;YAC7E,IAAI,SAAS,CAAC,GAAG,IAAI,IAAI;gBACrB,IAAI,SAAS,CAAC,GAAG,GAAG,QAAQ;oBACxB,OAAO,gBAAgB,IAAI,cAAc,SAAS,CAAC,GAAG,cAAc,CAAC;QACjF,CAAC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;IACD,MAAM,CAAC,aAAa,CAAC,IAAY,EAAE,KAAgC;QAE/D,OAAO,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE;YACnC,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE;gBACnB,IAAI,EAAE,OAAO;gBACb,KAAK,EAAE,4BAA4B;aACtC;SACJ,CAAC,CAAA;IACN,CAAC;CACJ"}

package/dist/components/NSInputEmail.d.ts

@@ -1,15 +1,19 @@
 import React from "react";
-export interface NSInputEmailProps {
+import { ValidationProps } from "../props/ValidationProps";
+import { ValidationStringProps } from "../props/ValidationStringProps";
+export interface NSInputEmailProps extends ValidationProps, ValidationStringProps {
     title: string;
     defaultValue?: string;
+    placeholder?: string;
     onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 export interface NSInputEmailState {
     value: string;
-    error: boolean;
+    error?: string;
 }
 export declare class NSInputEmail extends React.Component<NSInputEmailProps, NSInputEmailState> {
     constructor(props: NSInputEmailProps);
+    getError(): string | null;
     getValue(): string;
     setValue(value: string): void;
     private onChanged;

package/dist/components/NSInputEmail.js

@@ -4,30 +4,29 @@ import React from "react";
 import Styles from "./NSInputEmail.module.css";
 import IconInputEmail from '../assets/images/icon-input-email.svg';
 import Danger from '../assets/images/danger.svg';
+import { Validator } from "../Validator";
 export class NSInputEmail extends React.Component {
     constructor(props) {
         var _a;
         super(props);
-        this.state = {
-            value: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : "",
-            error: false,
-        };
+        this.state = { value: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : "" };
         this.setValue = this.setValue.bind(this);
         this.getValue = this.getValue.bind(this);
         this.onChanged = this.onChanged.bind(this);
     }
+    getError() {
+        return Validator.getErrorString(this.props.title, this.state.value, this.props) && Validator.getErrorEmail(this.props.title, this.state.value);
+    }
     getValue() {
+        let error = this.getError();
+        if (error) {
+            this.setState({ error });
+            throw new Error(error);
+        }
         return this.state.value;
     }
     setValue(value) {
-        let email = /^(([^<>()[]\\.,;:\s@"]+(\.[^<>()[]\\.,;:\s@"]+)*)|(".+"))@(([[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-        debugger;
-        if (!email.test(value)) {
-            this.setState({ error: true, value });
-        }
-        else {
-            this.setState({ error: false, value });
-        }
+        this.setState({ value });
     }
     onChanged(e) {
         this.setValue(e.target.value);
@@ -35,7 +34,7 @@ export class NSInputEmail extends React.Component {
             this.props.onChanged(e);
     }
     render() {
-        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${Styles.ns_input_parent} p-2`, children: [_jsx("span", { className: Styles.ns_input_title, children: this.props.title }), _jsx("img", { className: Styles.ns_input_icon, src: IconInputEmail, alt: "icon", width: 24, height: 24 }), _jsx("input", { value: this.state.value, onChange: this.onChanged, type: "email", className: `${this.state.error === true ? Styles.ns_input_red : ""} ${Styles.ns_input}`, placeholder: "Sample@gmail.com" })] }), this.state.error === true ? (_jsx(_Fragment, { children: _jsxs("div", { className: "d-flex justify-content-start align-items-center gap-2 ms-2 ", children: [_jsx("img", { className: "", src: Danger, alt: "icon", width: 13, height: 13 }), _jsx("span", { className: Styles.ns_input_error, children: "Enter a valid email." })] }) })) : null] }));
+        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${Styles.ns_input_parent} p-2`, children: [_jsx("span", { className: Styles.ns_input_title, children: this.props.title }), _jsx("img", { className: Styles.ns_input_icon, src: IconInputEmail, alt: "Email Icon", width: 24, height: 24 }), _jsx("input", { value: this.state.value, onChange: this.onChanged, type: "email", className: `${this.state.error ? Styles.ns_input_red : ""} ${Styles.ns_input}`, placeholder: this.props.placeholder })] }), this.state.error && (_jsx(_Fragment, { children: _jsxs("div", { className: "d-flex justify-content-start align-items-center gap-2 ms-2", children: [_jsx("img", { className: "", src: Danger, alt: "Error Icon", width: 13, height: 13 }), _jsx("span", { className: Styles.ns_input_error, children: this.state.error })] }) }))] }));
     }
 }
 //# sourceMappingURL=NSInputEmail.js.map

package/dist/components/NSInputEmail.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSInputEmail.js","sourceRoot":"","sources":["../../src/components/NSInputEmail.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAC/C,OAAO,cAAc,MAAM,uCAAuC,CAAC;AACnE,OAAO,MAAM,MAAM,6BAA6B,CAAC;AAejD,MAAM,OAAO,YAAa,SAAQ,KAAK,CAAC,SAA+C;IACnF,YAAY,KAAwB;;QAEhC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YAClB,KAAK,EAAE,MAAA,KAAK,CAAC,YAAY,mCAAI,EAAE;YACtB,KAAK,EAAE,KAAK;SACf,CAAC;QACF,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5C,CAAC;IACE,QAAQ;QAEJ,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IAC/B,CAAC;IACE,QAAQ,CAAC,KAAa;QAExB,IAAI,KAAK,GAAG,mJAAmJ,CAAC;QAChK,QAAQ,CAAA;QACF,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EACtB,CAAC;YACG,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;QAC1C,CAAC;aAED,CAAC;YACG,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;QAC3C,CAAC;IACR,CAAC;IACU,SAAS,CAAC,CAAsC;QAEpD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS;YACpB,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAChC,CAAC;IACQ,MAAM;QAEX,OAAO,CACH,8BACI,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,eAAe,MAAM,aAC3C,eAAM,SAAS,EAAE,MAAM,CAAC,cAAc,YAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAQ,EACjE,cACI,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,GAAG,EAAE,cAAc,EACnB,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACZ,EACF,gBACI,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,QAAQ,EAAE,IAAI,CAAC,SAAS,EACxB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,MAAM,CAAC,QAAQ,EAAE,EACvF,WAAW,EAAC,kBAAkB,GAChC,IACA,EAEF,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,CACxB,4BACI,eAAK,SAAS,EAAC,6DAA6D,aACxE,cACI,SAAS,EAAE,EAAE,EACb,GAAG,EAAE,MAAM,EACX,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACZ,EACF,eAAM,SAAS,EAAE,MAAM,CAAC,cAAc,qCAA6B,IACjE,GACP,CAAC,CAAC,CAAC,CAAC,IAAI,IAEpB,CACN,CAAC;IACN,CAAC;CACJ"}
+{"version":3,"file":"NSInputEmail.js","sourceRoot":"","sources":["../../src/components/NSInputEmail.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAC/C,OAAO,cAAc,MAAM,uCAAuC,CAAC;AACnE,OAAO,MAAM,MAAM,6BAA6B,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAkBzC,MAAM,OAAO,YAAa,SAAQ,KAAK,CAAC,SAA+C;IAEnF,YAAY,KAAwB;;QAEhC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,KAAK,EAAE,MAAA,KAAK,CAAC,YAAY,mCAAI,EAAE,EAAE,CAAC;QACjD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/C,CAAC;IACD,QAAQ;QAEJ,OAAO,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACnJ,CAAC;IACD,QAAQ;QAEJ,IAAI,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC5B,IAAI,KAAK,EACT,CAAC;YACG,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;YACzB,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC;QACD,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IAC5B,CAAC;IACD,QAAQ,CAAC,KAAa;QAElB,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAC7B,CAAC;IACO,SAAS,CAAC,CAAsC;QAEpD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS;YACpB,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAChC,CAAC;IACQ,MAAM;QAEX,OAAO,CACH,8BACI,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,eAAe,MAAM,aAC3C,eAAM,SAAS,EAAE,MAAM,CAAC,cAAc,YAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAQ,EACjE,cACI,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,GAAG,EAAE,cAAc,EACnB,GAAG,EAAC,YAAY,EAChB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACZ,EACF,gBACI,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,QAAQ,EAAE,IAAI,CAAC,SAAS,EACxB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,MAAM,CAAC,QAAQ,EAAE,EAC9E,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,GACrC,IACA,EAGF,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,CAChB,4BACI,eAAK,SAAS,EAAC,4DAA4D,aACvE,cACI,SAAS,EAAE,EAAE,EACb,GAAG,EAAE,MAAM,EACX,GAAG,EAAC,YAAY,EAChB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACZ,EACF,eAAM,SAAS,EAAE,MAAM,CAAC,cAAc,YAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAQ,IAC/D,GACP,CAAC,IAEb,CACN,CAAC;IACN,CAAC;CACJ"}

package/dist/components/NSInputFloat.d.ts

@@ -1,14 +1,19 @@
 import React from "react";
-export interface NSInputFloatProps {
+import { BaseComponentProps } from "../props/BaseComponentProps";
+import { ValidationProps } from "../props/ValidationProps";
+import { ValidationNumberProps } from "../props/ValidationNumberProps";
+export interface NSInputFloatProps extends BaseComponentProps, ValidationProps, ValidationNumberProps {
     title: string;
     defaultValue?: string;
     onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 export interface NSInputFloatState {
     value: string;
+    error?: string;
 }
 export declare class NSInputFloat extends React.Component<NSInputFloatProps, NSInputFloatState> {
     constructor(props: NSInputFloatProps);
+    getError(): string | null;
     getValue(): string;
     setValue(value: string): void;
     private onChanged;

package/dist/components/NSInputFloat.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import Styles from "./NSInputFloat.module.css";
 import IconInputFloat from '../assets/images/icon-input-float.svg';
+import { Validator } from "../Validator";
 export class NSInputFloat extends React.Component {
     constructor(props) {
         var _a;
@@ -14,7 +15,15 @@ export class NSInputFloat extends React.Component {
         this.getValue = this.getValue.bind(this);
         this.onChanged = this.onChanged.bind(this);
     }
+    getError() {
+        return Validator.getErrorNumber(this.props.title, this.state.value, this.props);
+    }
     getValue() {
+        let error = this.getError();
+        if (error) {
+            this.setState({ error });
+            throw new Error(error);
+        }
         return this.state.value;
     }
     setValue(value) {
@@ -26,7 +35,8 @@ export class NSInputFloat extends React.Component {
             this.props.onChanged(e);
     }
     render() {
-        return (_jsxs("div", { className: `${Styles.ns_input_parent} p-2`, children: [_jsx("span", { className: Styles.ns_input_title, children: this.props.title }), _jsx("img", { className: Styles.ns_input_icon, src: IconInputFloat, alt: "icon", width: 24, height: 24 }), _jsx("input", { value: this.state.value, onChange: this.onChanged, type: "number", className: Styles.ns_input, placeholder: "1.2" })] }));
+        var _a;
+        return (_jsxs("div", { className: `${Styles.ns_input_parent} p-2 ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: this.props.style, children: [_jsxs("span", { className: Styles.ns_input_title, children: [this.props.required && _jsx("span", { children: "*" }), this.props.title] }), _jsx("img", { className: Styles.ns_input_icon, src: IconInputFloat, alt: "icon", width: 24, height: 24 }), _jsx("input", { value: this.state.value, onChange: this.onChanged, type: "number", className: Styles.ns_input, placeholder: "1.2" })] }));
     }
 }
 //# sourceMappingURL=NSInputFloat.js.map

package/dist/components/NSInputFloat.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSInputFloat.js","sourceRoot":"","sources":["../../src/components/NSInputFloat.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAC/C,OAAO,cAAc,MAAM,uCAAuC,CAAC;AAcnE,MAAM,OAAO,YAAa,SAAQ,KAAK,CAAC,SAA+C;IACnF,YAAY,KAAwB;;QAEhC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YACT,KAAK,EAAE,MAAA,KAAK,CAAC,YAAY,mCAAI,EAAE;SAClC,CAAC;QACF,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/C,CAAC;IACD,QAAQ;QAEJ,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IAC/B,CAAC;IACE,QAAQ,CAAC,KAAa;QAElB,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAChC,CAAC;IAEU,SAAS,CAAC,CAAsC;QAEpD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS;YACpB,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAChC,CAAC;IACQ,MAAM;QAEX,OAAO,CACH,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,eAAe,MAAM,aAC3C,eAAM,SAAS,EAAE,MAAM,CAAC,cAAc,YAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAQ,EACjE,cACI,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,GAAG,EAAE,cAAc,EACnB,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACZ,EACF,gBACI,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,QAAQ,EAAE,IAAI,CAAC,SAAS,EACxB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,WAAW,EAAC,KAAK,GACnB,IACA,CACT,CAAC;IACN,CAAC;CACJ"}
+{"version":3,"file":"NSInputFloat.js","sourceRoot":"","sources":["../../src/components/NSInputFloat.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAC/C,OAAO,cAAc,MAAM,uCAAuC,CAAC;AAInE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAezC,MAAM,OAAO,YAAa,SAAQ,KAAK,CAAC,SAA+C;IAEnF,YAAY,KAAwB;;QAEhC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YACT,KAAK,EAAE,MAAA,KAAK,CAAC,YAAY,mCAAI,EAAE;SAClC,CAAC;QACF,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/C,CAAC;IACD,QAAQ;QAEJ,OAAO,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACpF,CAAC;IACD,QAAQ;QAEJ,IAAI,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC5B,IAAI,KAAK,EACT,CAAC;YACG,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;YACzB,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC;QACD,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IAC5B,CAAC;IACD,QAAQ,CAAC,KAAa;QAElB,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAC7B,CAAC;IACO,SAAS,CAAC,CAAsC;QAEpD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS;YACpB,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAChC,CAAC;IACQ,MAAM;;QAEX,OAAO,CACH,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,eAAe,QAAQ,MAAA,IAAI,CAAC,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,aACvG,gBAAM,SAAS,EAAE,MAAM,CAAC,cAAc,aAE9B,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,+BAAc,EAExC,IAAI,CAAC,KAAK,CAAC,KAAK,IACd,EACP,cACI,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,GAAG,EAAE,cAAc,EACnB,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACZ,EACF,gBACI,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,QAAQ,EAAE,IAAI,CAAC,SAAS,EACxB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,WAAW,EAAC,KAAK,GACnB,IACA,CACT,CAAC;IACN,CAAC;CACJ"}

package/dist/components/NSSectionBars.js

@@ -1,13 +1,14 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Component } from 'react';
 import Styles from './NSSectionBars.module.css';
 import { NSEntityBar } from './NSEntityBar';
 import { NSSection } from './NSSection';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
 export class NSSectionBars extends Component {
     render() {
         var _a;
-        return (_jsx(_Fragment, { children: _jsx(NSSection, { background: this.props.background, children: _jsx("div", { className: `container mx-auto px-4 lg:px-12 ${Styles.ns_entity_bar_container}`, children: (_a = this.props.bars) === null || _a === void 0 ? void 0 : _a.map((bar) => _jsx(NSEntityBar, Object.assign({}, bar), bar.id)) }) }) }));
+        return (_jsx(_Fragment, { children: _jsxs(NSSection, { background: this.props.background, children: [_jsx(NSSpace, { size: NSSpaceSizeType.NORMAL }), _jsx("div", { className: `container mx-auto px-4 lg:px-12 ${Styles.ns_entity_bar_container}`, children: (_a = this.props.bars) === null || _a === void 0 ? void 0 : _a.map((bar) => _jsx(NSEntityBar, Object.assign({}, bar), bar.id)) }), _jsx(NSSpace, { size: NSSpaceSizeType.NORMAL })] }) }));
     }
 }
 //# sourceMappingURL=NSSectionBars.js.map

package/dist/components/NSSectionBars.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSSectionBars.js","sourceRoot":"","sources":["../../src/components/NSSectionBars.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AASxC,MAAM,OAAO,aAAc,SAAQ,SAA6B;IAEtD,MAAM;;QAEd,OAAO,CACN,4BACC,KAAC,SAAS,IAAC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,YAC3C,cAAK,SAAS,EAAE,mCAAmC,MAAM,CAAC,uBAAuB,EAAE,YAEjF,MAAA,IAAI,CAAC,KAAK,CAAC,IAAI,0CAAE,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,KAAC,WAAW,oBAAkB,GAAG,GAAf,GAAG,CAAC,EAAE,CAAa,CAAC,GAEhE,GACK,GACV,CACH,CAAC;IACH,CAAC;CACD"}
+{"version":3,"file":"NSSectionBars.js","sourceRoot":"","sources":["../../src/components/NSSectionBars.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAQrD,MAAM,OAAO,aAAc,SAAQ,SAA6B;IAEtD,MAAM;;QAEd,OAAO,CACN,4BACC,MAAC,SAAS,IAAC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,aAC3C,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,MAAM,GAAI,EACzC,cAAK,SAAS,EAAE,mCAAmC,MAAM,CAAC,uBAAuB,EAAE,YAEjF,MAAA,IAAI,CAAC,KAAK,CAAC,IAAI,0CAAE,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,KAAC,WAAW,oBAAkB,GAAG,GAAf,GAAG,CAAC,EAAE,CAAa,CAAC,GAEhE,EACN,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,MAAM,GAAI,IAC9B,GACV,CACH,CAAC;IACH,CAAC;CACD"}

package/dist/components/NSSectionCards.js

@@ -6,13 +6,14 @@ import { NSTitle } from './NSTitle';
 import { NSCard } from './NSCard';
 import { NSSection } from './NSSection';
 import { NSLinkBlue } from './NSLinkBlue';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
 export class NSSectionCards extends Component {
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (_jsx(_Fragment, { children: _jsx(NSSection, { background: this.props.background, children: _jsxs("div", { className: `container mx-auto px-4 lg:px-12 ${Styles.ns_section_cards_holder}`, children: [this.props.title &&
-                            _jsxs("div", { className: Styles.ns_section_cards_title_container, children: [_jsx(NSTitle, { color: (_a = this.props.title) === null || _a === void 0 ? void 0 : _a.color, title: (_b = this.props.title) === null || _b === void 0 ? void 0 : _b.text }), this.props.description &&
-                                        _jsxs("p", { style: { color: (_c = this.props.description) === null || _c === void 0 ? void 0 : _c.color }, className: Styles.ns_description, children: [" ", this.props.description.text, " "] })] }), _jsx("div", { className: ` ${Styles.ns_card_container}`, children: (_d = this.props.cards) === null || _d === void 0 ? void 0 : _d.map((card) => _jsx(NSCard, Object.assign({}, card), card.id)) }), this.props.button &&
-                            _jsx("div", { className: `mt-12 w-full- text-center ${Styles.ns_section_cards_link_container}`, children: _jsx(NSLinkBlue, { href: (_e = this.props.button) === null || _e === void 0 ? void 0 : _e.href, title: (_f = this.props.button) === null || _f === void 0 ? void 0 : _f.title }) })] }) }) }));
+        return (_jsx(_Fragment, { children: _jsxs(NSSection, { background: this.props.background, children: [_jsx(NSSpace, { size: NSSpaceSizeType.NORMAL }), _jsxs("div", { className: `container mx-auto px-4 lg:px-12 ${Styles.ns_section_cards_holder}`, children: [this.props.title &&
+                                _jsxs("div", { className: Styles.ns_section_cards_title_container, children: [_jsx(NSTitle, { color: (_a = this.props.title) === null || _a === void 0 ? void 0 : _a.color, title: (_b = this.props.title) === null || _b === void 0 ? void 0 : _b.text }), this.props.description &&
+                                            _jsxs("p", { style: { color: (_c = this.props.description) === null || _c === void 0 ? void 0 : _c.color }, className: Styles.ns_description, children: [" ", this.props.description.text, " "] })] }), _jsx("div", { className: ` ${Styles.ns_card_container}`, children: (_d = this.props.cards) === null || _d === void 0 ? void 0 : _d.map((card) => _jsx(NSCard, Object.assign({}, card), card.id)) }), this.props.button &&
+                                _jsx("div", { className: `mt-12 w-full- text-center ${Styles.ns_section_cards_link_container}`, children: _jsx(NSLinkBlue, { href: (_e = this.props.button) === null || _e === void 0 ? void 0 : _e.href, title: (_f = this.props.button) === null || _f === void 0 ? void 0 : _f.title }) })] }), _jsx(NSSpace, { size: NSSpaceSizeType.NORMAL })] }) }));
     }
 }
 //# sourceMappingURL=NSSectionCards.js.map

package/dist/components/NSSectionCards.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSSectionCards.js","sourceRoot":"","sources":["../../src/components/NSSectionCards.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,MAAM,MAAM,6BAA6B,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAqB1C,MAAM,OAAO,cAAe,SAAQ,SAA8B;IAExD,MAAM;;QAEd,OAAO,CACN,4BACC,KAAC,SAAS,IAAC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,YAC3C,eAAK,SAAS,EAAE,mCAAmC,MAAM,CAAC,uBAAuB,EAAE,aAEjF,IAAI,CAAC,KAAK,CAAC,KAAK;4BAChB,eAAK,SAAS,EAAE,MAAM,CAAC,gCAAgC,aACtD,KAAC,OAAO,IAAC,KAAK,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,KAAK,0CAAE,KAAK,EAAE,KAAK,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,KAAK,0CAAE,IAAI,GAAI,EAEzE,IAAI,CAAC,KAAK,CAAC,WAAW;wCACtB,aAAG,KAAK,EAAE,EAAE,KAAK,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,WAAW,0CAAE,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,cAAc,kBAAI,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,SAAM,IAErH,EAEP,cAAK,SAAS,EAAE,IAAI,MAAM,CAAC,iBAAiB,EAAE,YAE5C,MAAA,IAAI,CAAC,KAAK,CAAC,KAAK,0CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,KAAC,MAAM,oBAAmB,IAAI,GAAjB,IAAI,CAAC,EAAE,CAAc,CAAC,GAE/D,EAEL,IAAI,CAAC,KAAK,CAAC,MAAM;4BACjB,cAAK,SAAS,EAAE,6BAA6B,MAAM,CAAC,+BAA+B,EAAE,YACpF,KAAC,UAAU,IAAC,IAAI,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,MAAM,0CAAE,IAAI,EAAE,KAAK,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,MAAM,0CAAE,KAAK,GAAI,GACzE,IAEF,GACK,GACV,CACH,CAAC;IACH,CAAC;CACD"}
+{"version":3,"file":"NSSectionCards.js","sourceRoot":"","sources":["../../src/components/NSSectionCards.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,MAAM,MAAM,6BAA6B,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAoBrD,MAAM,OAAO,cAAe,SAAQ,SAA8B;IAExD,MAAM;;QAEd,OAAO,CACN,4BACC,MAAC,SAAS,IAAC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,aAC3C,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,MAAM,GAAI,EACzC,eAAK,SAAS,EAAE,mCAAmC,MAAM,CAAC,uBAAuB,EAAE,aAEjF,IAAI,CAAC,KAAK,CAAC,KAAK;gCAChB,eAAK,SAAS,EAAE,MAAM,CAAC,gCAAgC,aACrD,KAAC,OAAO,IAAC,KAAK,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,KAAK,0CAAE,KAAK,EAAE,KAAK,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,KAAK,0CAAE,IAAI,GAAI,EAE1E,IAAI,CAAC,KAAK,CAAC,WAAW;4CACtB,aAAG,KAAK,EAAE,EAAE,KAAK,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,WAAW,0CAAE,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,cAAc,kBAAI,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,SAAM,IAErH,EAEP,cAAK,SAAS,EAAE,IAAI,MAAM,CAAC,iBAAiB,EAAE,YAE5C,MAAA,IAAI,CAAC,KAAK,CAAC,KAAK,0CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,KAAC,MAAM,oBAAmB,IAAI,GAAjB,IAAI,CAAC,EAAE,CAAc,CAAC,GAE/D,EAEL,IAAI,CAAC,KAAK,CAAC,MAAM;gCACjB,cAAK,SAAS,EAAE,6BAA6B,MAAM,CAAC,+BAA+B,EAAE,YACpF,KAAC,UAAU,IAAC,IAAI,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,MAAM,0CAAE,IAAI,EAAE,KAAK,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,MAAM,0CAAE,KAAK,GAAI,GACzE,IAEF,EACN,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,MAAM,GAAI,IAC9B,GACV,CACH,CAAC;IACH,CAAC;CACD"}

package/dist/components/NSSectionTitle.js

@@ -3,9 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Component } from 'react';
 import { NSSection } from './NSSection';
 import { NSTitle } from './NSTitle';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
 export class NSSectionTitle extends Component {
     render() {
-        return (_jsxs(NSSection, { background: this.props.background, children: [_jsx(NSTitle, { color: this.props.title.color, title: this.props.title.text }), this.props.children] }));
+        return (_jsxs(NSSection, { background: this.props.background, children: [_jsx(NSSpace, { size: NSSpaceSizeType.NORMAL }), _jsx(NSTitle, { color: this.props.title.color, title: this.props.title.text }), this.props.children] }));
     }
 }
 //# sourceMappingURL=NSSectionTitle.js.map

package/dist/components/NSSectionTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSSectionTitle.js","sourceRoot":"","sources":["../../src/components/NSSectionTitle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAapC,MAAM,OAAO,cAAe,SAAQ,SAA8B;IAExD,MAAM;QAEd,OAAO,CACN,MAAC,SAAS,IAAC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,aAC3C,KAAC,OAAO,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,GAAI,EACvE,IAAI,CAAC,KAAK,CAAC,QAAQ,IACT,CACZ,CAAC;IACH,CAAC;CACD"}
+{"version":3,"file":"NSSectionTitle.js","sourceRoot":"","sources":["../../src/components/NSSectionTitle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAYrD,MAAM,OAAO,cAAe,SAAQ,SAA8B;IAExD,MAAM;QAEd,OAAO,CACN,MAAC,SAAS,IAAC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,aAC3C,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,MAAM,GAAI,EACzC,KAAC,OAAO,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,GAAI,EACvE,IAAI,CAAC,KAAK,CAAC,QAAQ,IACT,CACZ,CAAC;IACH,CAAC;CACD"}

package/dist/components/NSSpace.d.ts

@@ -15,11 +15,7 @@ export declare enum NSSpaceSizeType {
     XXXLARGE = "128px"
 }
 export interface NSSpaceState {
-    size: NSSpaceSizeType;
 }
 export declare class NSSpace extends React.Component<NSSpaceProps, NSSpaceState> {
-    constructor(props: NSSpaceProps);
-    setValue(size: NSSpaceSizeType): void;
-    getValue(): NSSpaceSizeType;
     render(): import("react/jsx-runtime").JSX.Element;
 }

package/dist/components/NSSpace.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 export var NSSpaceSizeType;
@@ -15,20 +14,8 @@ export var NSSpaceSizeType;
     NSSpaceSizeType["XXXLARGE"] = "128px";
 })(NSSpaceSizeType || (NSSpaceSizeType = {}));
 export class NSSpace extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = { size: props.size };
-        this.setValue = this.setValue.bind(this);
-        this.getValue = this.getValue.bind(this);
-    }
-    setValue(size) {
-        this.setState({ size });
-    }
-    getValue() {
-        return this.state.size;
-    }
     render() {
-        return (_jsx("hr", { style: { width: "100%", height: this.state.size, margin: "0px", padding: "0px", background: "transparent", color: "transparent" } }));
+        return (_jsx("hr", { style: { width: "100%", height: this.props.size, margin: "0px", padding: "0px", background: "transparent", color: "transparent", border: 0 } }));
     }
 }
 //# sourceMappingURL=NSSpace.js.map

package/dist/components/NSSpace.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSSpace.js","sourceRoot":"","sources":["../../src/components/NSSpace.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,CAAN,IAAY,eAYX;AAZD,WAAY,eAAe;IAEvB,+BAAY,CAAA;IACZ,gCAAa,CAAA;IACb,gCAAa,CAAA;IACb,iCAAc,CAAA;IACd,kCAAe,CAAA;IACf,kCAAe,CAAA;IACf,iCAAc,CAAA;IACd,kCAAe,CAAA;IACf,mCAAgB,CAAA;IAChB,qCAAkB,CAAA;AACtB,CAAC,EAZW,eAAe,KAAf,eAAe,QAY1B;AAOD,MAAM,OAAO,OAAQ,SAAQ,KAAK,CAAC,SAAqC;IAEpE,YAAY,KAAmB;QAE3B,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC;QAClC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7C,CAAC;IACD,QAAQ,CAAC,IAAqB;QAE1B,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAC5B,CAAC;IACD,QAAQ;QAEJ,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;IAC3B,CAAC;IACQ,MAAM;QAEX,OAAO,CACH,aAAI,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE,GAAI,CAC5I,CAAC;IACN,CAAC;CACJ"}
+{"version":3,"file":"NSSpace.js","sourceRoot":"","sources":["../../src/components/NSSpace.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,CAAN,IAAY,eAYX;AAZD,WAAY,eAAe;IAEvB,+BAAY,CAAA;IACZ,gCAAa,CAAA;IACb,gCAAa,CAAA;IACb,iCAAc,CAAA;IACd,kCAAe,CAAA;IACf,kCAAe,CAAA;IACf,iCAAc,CAAA;IACd,kCAAe,CAAA;IACf,mCAAgB,CAAA;IAChB,qCAAkB,CAAA;AACtB,CAAC,EAZW,eAAe,KAAf,eAAe,QAY1B;AAMD,MAAM,OAAO,OAAQ,SAAQ,KAAK,CAAC,SAAqC;IAE3D,MAAM;QAEX,OAAO,CACH,aAAI,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC,EAAE,GAAI,CACvJ,CAAC;IACN,CAAC;CACJ"}

package/dist/props/BaseComponentProps.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export interface BaseComponentProps {
+    classList?: string[];
+    style?: React.CSSProperties;
+}

package/dist/props/BaseComponentProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=BaseComponentProps.js.map

package/dist/props/BaseComponentProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseComponentProps.js","sourceRoot":"","sources":["../../src/props/BaseComponentProps.ts"],"names":[],"mappings":""}

package/dist/props/ValidationNumberProps.d.ts

@@ -0,0 +1,5 @@
+import { ValidationProps } from "./ValidationProps";
+export interface ValidationNumberProps extends ValidationProps {
+    min?: number;
+    max?: number;
+}

package/dist/props/ValidationNumberProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ValidationNumberProps.js.map

package/dist/props/ValidationNumberProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationNumberProps.js","sourceRoot":"","sources":["../../src/props/ValidationNumberProps.ts"],"names":[],"mappings":""}

package/dist/props/ValidationProps.d.ts

@@ -0,0 +1,5 @@
+import { ValidationRegexProps } from "./ValidationRegexProps";
+export interface ValidationProps {
+    required: boolean;
+    regex?: ValidationRegexProps;
+}

package/dist/props/ValidationProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ValidationProps.js.map

package/dist/props/ValidationProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationProps.js","sourceRoot":"","sources":["../../src/props/ValidationProps.ts"],"names":[],"mappings":""}

package/dist/props/ValidationRegexProps.d.ts

@@ -0,0 +1,4 @@
+export interface ValidationRegexProps {
+    name: string;
+    regex: RegExp;
+}

package/dist/props/ValidationRegexProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ValidationRegexProps.js.map

package/dist/props/ValidationRegexProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationRegexProps.js","sourceRoot":"","sources":["../../src/props/ValidationRegexProps.ts"],"names":[],"mappings":""}

package/dist/props/ValidationStringProps.d.ts

@@ -0,0 +1,5 @@
+import { ValidationProps } from "./ValidationProps";
+export interface ValidationStringProps extends ValidationProps {
+    min_length?: number;
+    max_length?: number;
+}

package/dist/props/ValidationStringProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ValidationStringProps.js.map

package/dist/props/ValidationStringProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationStringProps.js","sourceRoot":"","sources":["../../src/props/ValidationStringProps.ts"],"names":[],"mappings":""}

package/package.json

@@ -8,7 +8,7 @@
     "framework": "npm",
     "application": "package",
     "private": false,
-    "version": "1.3.46",
+    "version": "1.3.48",
     "author": "Amir Abolhasani, Alireza Esmaeeli, Hooman Shashaeh",
     "license": "MIT",
     "main": "./dist/main.js",
@@ -22,7 +22,7 @@
     },
     "dependencies": {
         "@types/node": "^20.12.7",
-        "@types/react": "^18.2.78",
+        "@types/react": "^18.2.79",
         "@types/react-dom": "^18.2.25",
         "antd": "^5.16.2",
         "bootstrap": "^5.3.3",

package/src/App.tsx

@@ -1,48 +1,57 @@
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { NSLayoutTitle, NSTable } from './main';
+import { NSFooter, NSHeader, NSTable } from './main';
 
 export function App()
 {
-    let columns = {
-        "id": "ID",
-        "project": "Project",
-        "level": "Level",
-        "message": "Message",
-        "cent": "Cent",
-        "status": "Status",
-    }
-    let rows = [{
-        id: 1,
-        project: "Namirasoft Account",
-        level: "Debug",
-        message: "Lorem ipsum dolor sit amet, consetetur ",
-        cent: "24",
-        status: "Done"
-    },
-    {
-        id: 2,
-        project: "Namirasoft Account",
-        level: "Debug",
-        message: "Lorem ipsum dolor sit amet, consetetur ",
-        cent: "24",
-        status: "Done"
-    }
-    ]
-    interface Row
-    {
-        id: number,
-        project: string,
-        level: string,
-        message: string,
-        cent: string,
-        status: string
-    }
-    return (
-        <NSLayoutTitle scope='Namirasoft Account Console' logo='' title="Namirasoft">
-            <div className="container">
-                <NSTable<Row> columns={columns} rows={rows} getRowKey={row => row.id.toString()} />
-            </div>
-        </NSLayoutTitle>
-    );
+	let columns = {
+		"id": "ID",
+		"project": "Project",
+		"level": "Level",
+		"message": "Message",
+		"cent": "Cent",
+		"status": "Status",
+	}
+	let rows = [{
+		id: 1,
+		project: "Namirasoft Account",
+		level: "Debug",
+		message: "Lorem ipsum dolor sit amet, consetetur ",
+		cent: "24",
+		status: "Done"
+	},
+	{
+		id: 2,
+		project: "Namirasoft Account",
+		level: "Debug",
+		message: "Lorem ipsum dolor sit amet, consetetur ",
+		cent: "24",
+		status: "Done"
+	}
+	]
+	interface Row
+	{
+		id: number,
+		project: string,
+		level: string,
+		message: string,
+		cent: string,
+		status: string
+	}
+	return (
+		<>
+			<NSHeader
+				name='Header'
+				scope='Namira Software Corporation'
+				logo='https://static.namirasoft.com/logo/namirasoft/base.png'
+				account={false}
+				background={{ color: "transparent !important" }}
+			/>
+
+			<div className="container">
+				<NSTable<Row> columns={columns} rows={rows} getRowKey={row => row.id.toString()} />
+			</div>
+			<NSFooter name='Footer' scope='Namira Software Corporation' logo='https://static.namirasoft.com/logo/namirasoft/base.png' />
+		</>
+	);
 }   

package/src/Validator.ts

@@ -0,0 +1,62 @@
+import { ValidationNumberProps } from "./props/ValidationNumberProps";
+import { ValidationProps } from "./props/ValidationProps";
+import { ValidationStringProps } from "./props/ValidationStringProps";
+
+export class Validator
+{
+    static getError(name: string, value: string | null | undefined, validator: ValidationProps): string | null
+    {
+        if (validator.required)
+            if (!value)
+                return `${name} is required.`;
+        if (value)
+            if (validator.regex)
+                if (!validator.regex.regex.test(value))
+                    return `${name} is not a valid ${validator.regex.name}.`;
+        return null;
+    }
+    static getErrorString(name: string, value: string | null | undefined, validator: ValidationStringProps): string | null
+    {
+        let error = this.getError(name, value, validator);
+        if (error)
+            return error;
+        if (value)
+        {
+            if (validator.max_length != null)
+                if (validator.max_length < value.length)
+                    return `Max length of ${name} should be ${validator.max_length} characters.`;
+            if (validator.min_length != null)
+                if (validator.min_length > value.length)
+                    return `Minlength of ${name} should be ${validator.min_length} characters.`;
+        }
+        return null;
+    }
+    static getErrorNumber(name: string, value: string | null | undefined, validator: ValidationNumberProps): string | null
+    {
+        let error = this.getError(name, value, validator);
+        if (error)
+            return error;
+        if (value)
+        {
+            let numValue = parseFloat(value);
+            if (isNaN(numValue))
+                return `${name} is not a number.`;
+            if (validator.max != null)
+                if (validator.max < numValue)
+                    return `Max value of ${name} should be ${validator.max} characters.`;
+            if (validator.min != null)
+                if (validator.min > numValue)
+                    return `Min value of ${name} should be ${validator.min} characters.`;
+        }
+        return null;
+    }
+    static getErrorEmail(name: string, value: string | null | undefined): string | null
+    {
+        return Validator.getError(name, value, {
+            required: true, regex: {
+                name: "Email",
+                regex: /^[\w]+@([\w]+\.)+\w{2,}$/gm
+            }
+        })
+    }
+}

package/src/components/NSInputEmail.tsx

@@ -4,49 +4,52 @@ import React from "react";
 import Styles from "./NSInputEmail.module.css";
 import IconInputEmail from '../assets/images/icon-input-email.svg';
 import Danger from '../assets/images/danger.svg';
+import { Validator } from "../Validator";
+import { ValidationProps } from "../props/ValidationProps";
+import { ValidationStringProps } from "../props/ValidationStringProps";
 
-export interface NSInputEmailProps
+export interface NSInputEmailProps extends ValidationProps, ValidationStringProps
 {
     title: string;
-	defaultValue?: string;
+    defaultValue?: string;
+    placeholder?: string;
     onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 export interface NSInputEmailState
 {
     value: string;
-    error: boolean;
+    error?: string;
 }
 
-export class NSInputEmail extends React.Component<NSInputEmailProps, NSInputEmailState> {
+export class NSInputEmail extends React.Component<NSInputEmailProps, NSInputEmailState>
+{
     constructor(props: NSInputEmailProps)
     {
         super(props);
-        this.state = {
-			value: props.defaultValue ?? "",
-            error: false,
-        };
+        this.state = { value: props.defaultValue ?? "" };
         this.setValue = this.setValue.bind(this);
         this.getValue = this.getValue.bind(this);
-		this.onChanged = this.onChanged.bind(this);
-	}
+        this.onChanged = this.onChanged.bind(this);
+    }
+    getError(): string | null
+    {
+        return Validator.getErrorString(this.props.title, this.state.value, this.props) && Validator.getErrorEmail(this.props.title, this.state.value);
+    }
     getValue(): string
     {
+        let error = this.getError();
+        if (error)
+        {
+            this.setState({ error });
+            throw new Error(error);
+        }
         return this.state.value;
-	}
+    }
     setValue(value: string): void
     {
-		let email = /^(([^<>()[]\\.,;:\s@"]+(\.[^<>()[]\\.,;:\s@"]+)*)|(".+"))@(([[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-		debugger
-        if (!email.test(value))
-        {
-            this.setState({ error: true, value });
-        }
-        else
-        {
-            this.setState({ error: false, value });
-        }
-	}
+        this.setState({ value });
+    }
     private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
     {
         this.setValue(e.target.value);
@@ -62,7 +65,7 @@ export class NSInputEmail extends React.Component<NSInputEmailProps, NSInputEmai
                     <img
                         className={Styles.ns_input_icon}
                         src={IconInputEmail}
-                        alt="icon"
+                        alt="Email Icon"
                         width={24}
                         height={24}
                     />
@@ -70,24 +73,25 @@ export class NSInputEmail extends React.Component<NSInputEmailProps, NSInputEmai
                         value={this.state.value}
                         onChange={this.onChanged}
                         type="email"
-                        className={`${this.state.error === true ? Styles.ns_input_red : ""} ${Styles.ns_input}`}
-                        placeholder="Sample@gmail.com"
+                        className={`${this.state.error ? Styles.ns_input_red : ""} ${Styles.ns_input}`}
+                        placeholder={this.props.placeholder}
                     />
                 </div>
                 {
-                    this.state.error === true ? (
+                    // todo make it a component
+                    this.state.error && (
                         <>
-                            <div className="d-flex justify-content-start align-items-center gap-2 ms-2 ">
+                            <div className="d-flex justify-content-start align-items-center gap-2 ms-2">
                                 <img
                                     className={""}
                                     src={Danger}
-                                    alt="icon"
+                                    alt="Error Icon"
                                     width={13}
                                     height={13}
                                 />
-                                <span className={Styles.ns_input_error}>Enter a valid email.</span>
+                                <span className={Styles.ns_input_error}>{this.state.error}</span>
                             </div>
-                        </>) : null
+                        </>)
                 }
             </>
         );

package/src/components/NSInputFloat.tsx

@@ -3,20 +3,26 @@
 import React from "react";
 import Styles from "./NSInputFloat.module.css";
 import IconInputFloat from '../assets/images/icon-input-float.svg';
+import { BaseComponentProps } from "../props/BaseComponentProps";
+import { ValidationProps } from "../props/ValidationProps";
+import { ValidationNumberProps } from "../props/ValidationNumberProps";
+import { Validator } from "../Validator";
 
-export interface NSInputFloatProps
+export interface NSInputFloatProps extends BaseComponentProps, ValidationProps, ValidationNumberProps
 {
-	title: string;
-	defaultValue?: string;
+    title: string;
+    defaultValue?: string;
     onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 export interface NSInputFloatState
 {
     value: string;
+    error?: string;
 }
 
-export class NSInputFloat extends React.Component<NSInputFloatProps, NSInputFloatState> {
+export class NSInputFloat extends React.Component<NSInputFloatProps, NSInputFloatState>
+{
     constructor(props: NSInputFloatProps)
     {
         super(props);
@@ -27,15 +33,24 @@ export class NSInputFloat extends React.Component<NSInputFloatProps, NSInputFloa
         this.getValue = this.getValue.bind(this);
         this.onChanged = this.onChanged.bind(this);
     }
+    getError(): string | null
+    {
+        return Validator.getErrorNumber(this.props.title, this.state.value, this.props);
+    }
     getValue(): string
     {
+        let error = this.getError();
+        if (error)
+        {
+            this.setState({ error });
+            throw new Error(error);
+        }
         return this.state.value;
-	}
+    }
     setValue(value: string): void
     {
         this.setState({ value });
-	}
-	
+    }
     private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
     {
         this.setValue(e.target.value);
@@ -45,8 +60,13 @@ export class NSInputFloat extends React.Component<NSInputFloatProps, NSInputFloa
     override render()
     {
         return (
-            <div className={`${Styles.ns_input_parent} p-2`}>
-                <span className={Styles.ns_input_title}>{this.props.title}</span>
+            <div className={`${Styles.ns_input_parent} p-2 ${this.props.classList?.join(" ")}`} style={this.props.style}>
+                <span className={Styles.ns_input_title}>
+                    {
+                        this.props.required && <span>*</span>
+                    }
+                    {this.props.title}
+                </span>
                 <img
                     className={Styles.ns_input_icon}
                     src={IconInputFloat}

package/src/components/NSSectionBars.tsx

@@ -5,6 +5,7 @@ import Styles from './NSSectionBars.module.css';
 import { NSEntityBar, NSEntityBarProps } from './NSEntityBar';
 import { NSSection } from './NSSection';
 import { BackgroundProps } from '../props/BackgroundProps';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
 
 export interface NSSectionBarsProps
 {
@@ -19,11 +20,13 @@ export class NSSectionBars extends Component<NSSectionBarsProps>
 		return (
 			<>
 				<NSSection background={this.props.background} >
+					<NSSpace size={NSSpaceSizeType.NORMAL} />
 					<div className={`container mx-auto px-4 lg:px-12 ${Styles.ns_entity_bar_container}`}>
 						{
 							this.props.bars?.map((bar) => <NSEntityBar key={bar.id} {...bar} />)
 						}
 					</div>
+					<NSSpace size={NSSpaceSizeType.NORMAL} />
 				</NSSection>
 			</>
 		);

package/src/components/NSSectionCards.tsx

@@ -7,6 +7,7 @@ import { NSCard, NSCardProps } from './NSCard';
 import { NSSection } from './NSSection';
 import { NSLinkBlue } from './NSLinkBlue';
 import { BackgroundProps } from '../props/BackgroundProps';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
 
 export interface NSSectionCardsProps
 {
@@ -33,11 +34,12 @@ export class NSSectionCards extends Component<NSSectionCardsProps>
 		return (
 			<>
 				<NSSection background={this.props.background} >
+					<NSSpace size={NSSpaceSizeType.NORMAL} />
 					<div className={`container mx-auto px-4 lg:px-12 ${Styles.ns_section_cards_holder}`}>
 						{
 							this.props.title &&
 							<div className={Styles.ns_section_cards_title_container}>
-								<NSTitle color={this.props.title?.color} title={this.props.title?.text} />
+									<NSTitle color={this.props.title?.color} title={this.props.title?.text} />
 								{
 									this.props.description &&
 									<p style={{ color: this.props.description?.color }} className={Styles.ns_description}> {this.props.description.text} </p>
@@ -56,6 +58,7 @@ export class NSSectionCards extends Component<NSSectionCardsProps>
 							</div>
 						}
 					</div>
+					<NSSpace size={NSSpaceSizeType.NORMAL} />
 				</NSSection>
 			</>
 		);

package/src/components/NSSectionTitle.tsx

@@ -4,6 +4,7 @@ import { Component, ReactNode } from 'react';
 import { NSSection } from './NSSection';
 import { NSTitle } from './NSTitle';
 import { BackgroundProps } from '../props/BackgroundProps';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
 
 export interface NSSectionTitleProps
 {
@@ -21,6 +22,7 @@ export class NSSectionTitle extends Component<NSSectionTitleProps>
 	{
 		return (
 			<NSSection background={this.props.background} >
+				<NSSpace size={NSSpaceSizeType.NORMAL} />
 				<NSTitle color={this.props.title.color} title={this.props.title.text} />
 				{this.props.children}
 			</NSSection>

package/src/components/NSSpace.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 
 export interface NSSpaceProps
@@ -23,30 +21,14 @@ export enum NSSpaceSizeType
 
 export interface NSSpaceState
 {
-    size: NSSpaceSizeType;
 }
 
 export class NSSpace extends React.Component<NSSpaceProps, NSSpaceState>
 {
-    constructor(props: NSSpaceProps)
-    {
-        super(props);
-        this.state = { size: props.size };
-        this.setValue = this.setValue.bind(this);
-        this.getValue = this.getValue.bind(this);
-    }
-    setValue(size: NSSpaceSizeType): void
-    {
-        this.setState({ size });
-    }
-    getValue(): NSSpaceSizeType
-    {
-        return this.state.size;
-    }
     override render()
     {
         return (
-            <hr style={{ width: "100%", height: this.state.size, margin: "0px", padding: "0px", background: "transparent", color: "transparent" }} />
+            <hr style={{ width: "100%", height: this.props.size, margin: "0px", padding: "0px", background: "transparent", color: "transparent", border: 0 }} />
         );
     }
 }

package/src/props/BaseComponentProps.ts

@@ -0,0 +1,7 @@
+import React from "react";
+
+export interface BaseComponentProps
+{
+    classList?: string[]
+    style?: React.CSSProperties
+}

package/src/props/ValidationNumberProps.ts

@@ -0,0 +1,7 @@
+import { ValidationProps } from "./ValidationProps";
+
+export interface ValidationNumberProps extends ValidationProps
+{
+    min?: number;
+    max?: number;
+}

package/src/props/ValidationProps.ts

@@ -0,0 +1,7 @@
+import { ValidationRegexProps } from "./ValidationRegexProps";
+
+export interface ValidationProps
+{
+    required: boolean;
+    regex?: ValidationRegexProps;
+}

package/src/props/ValidationRegexProps.ts

@@ -0,0 +1,5 @@
+export interface ValidationRegexProps
+{
+    name: string
+    regex: RegExp;
+}

package/src/props/ValidationStringProps.ts

@@ -0,0 +1,7 @@
+import { ValidationProps } from "./ValidationProps";
+
+export interface ValidationStringProps extends ValidationProps
+{
+    min_length?: number;
+    max_length?: number;
+}