namirasoft-site-react 1.4.137 → 1.4.139

package/dist/App.js

@@ -1,93 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import './App.css';
-import { VariableType } from 'namirasoft-schema';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { NSMenuAction, NSBarAction, NSBoxEmail, NSBoxPhone, NSBoxSearch, NSBoxCombo, NSBoxBoolean, NSSection, NSPanel, NSBoxDate, NSBoxDateTime, NSBoxDouble, NSBoxInteger, NSBoxDuration, NSBoxTime, NSBoxEnum, NSBoxFile, NSBoxIPV4, NSBoxIPV6, NSBoxPassword, NSBoxMoney, NSBoxRadio, NSBoxTextArea, NSPagination, NSBoxBooleans, } from './main';
-import { NSBoxEntity } from './components/NSBoxEntity';
-import { NamirasoftAPIProductServer } from 'namirasoft-api-product';
-import { useRef } from 'react';
+import { NSPanel, NSBoxDate, NSSection, NSBoxFile, NSLayout, } from './main';
+import { NSRow } from './components/NSRow';
 export function App() {
-    let NSBoxTest = useRef(null);
-    return (_jsxs(_Fragment, { children: [_jsx(NSMenuAction, { items: [{
-                        handler: () => { },
-                        id: "1",
-                        menu_item: "Name",
-                        isActive: () => true
-                    }, {
-                        handler: () => { },
-                        id: "2",
-                        menu_item: "Text",
-                        isActive: () => false
-                    }], name: 'Test' }), _jsx(NSBarAction, { menus: {
-                    "Test1": [{
-                            handler: () => { },
-                            id: "1",
-                            menu_item: "Name",
-                            isActive: () => true
-                        }, {
-                            handler: () => { },
-                            id: "2",
-                            menu_item: "Text",
-                            isActive: () => false
-                        }],
-                    "Test2": [{
-                            handler: () => { },
-                            id: "1",
-                            menu_item: "Name",
-                            isActive: () => true
-                        }, {
-                            handler: () => { },
-                            id: "2",
-                            menu_item: "Text",
-                            isActive: () => false
-                        }],
-                    "Test3": [{
-                            handler: () => { },
-                            id: "1",
-                            menu_item: "Test3",
-                            isActive: () => true
-                        }],
-                    "Test4": [{
-                            handler: () => { },
-                            id: "1",
-                            menu_item: "Test4",
-                            isActive: () => true
-                        }]
-                }, title: 'Title' }), _jsx(NSSection, { center_items: true, children: _jsxs(NSPanel, { grid: true, children: [_jsx(NSBoxBooleans, { hideHeaderAll: true, hideHeaderBoxes: true, items: [{
-                                    text: "1",
-                                    value: "1",
-                                }, {
-                                    text: "1",
-                                    value: "1",
-                                }, {
-                                    text: "1",
-                                    value: "1",
-                                }, {
-                                    text: "1",
-                                    value: "1",
-                                }, {
-                                    text: "1",
-                                    value: "1",
-                                }, {
-                                    text: "1",
-                                    value: "1",
-                                }, {
-                                    text: "1",
-                                    value: "1",
-                                }] }), _jsx(NSPagination, { onPageChange: () => { }, totalItems: 25000 - 100 }), _jsx(NSBoxBoolean, { title: 'Text', required: true, indeterminate: true }), _jsx(NSBoxCombo, { title: 'Text', required: true, multiple: false, getOptions: () => [{
-                                    value: "1",
-                                    title: "1",
-                                }] }), _jsx(NSBoxEnum, { title: 'Type', required: true, multiple: true, getEnumObject: () => { return VariableType; }, onChanged: e => {
-                                console.log(e.getValues(VariableType, VariableType.Any));
-                            } }), _jsx(NSBoxEntity, { title: 'Product', required: true, multiple: false, getItems: new NamirasoftAPIProductServer("https://namirasoft.com/api/product/v1", console.error).product.List, getValue: x => x.id, getTitle: x => x.name, onChanged: e => {
-                                var _a, _b;
-                                let box = e;
-                                console.log((_a = box.NSBoxBaseCombo.current) === null || _a === void 0 ? void 0 : _a.getData());
-                                try {
-                                    (_b = NSBoxTest.current) === null || _b === void 0 ? void 0 : _b.getValue();
-                                }
-                                catch (error) {
-                                }
-                            } }), _jsx(NSBoxEmail, { title: 'Email', required: true }), _jsx(NSBoxTextArea, { title: 'Test', required: true, style: { width: "100%" } }), _jsx(NSBoxMoney, { title: 'Money', required: true }), _jsx(NSBoxRadio, { title: 'NSBoxRadio', required: true }), _jsx(NSBoxPhone, { title: 'Phone', required: true }), _jsx(NSBoxPassword, { title: 'Password', required: true }), _jsx(NSBoxIPV4, { ref: NSBoxTest, title: 'IPV4', required: true }), _jsx(NSBoxIPV6, { title: 'IPV6', required: true }), _jsx(NSBoxDate, { title: 'Date', required: true }), _jsx(NSBoxDateTime, { title: 'Datetime', required: true }), _jsx(NSBoxDouble, { title: 'Double', required: true }), _jsx(NSBoxDuration, { title: 'Duration', required: true }), _jsx(NSBoxTime, { title: 'Time', required: true }), _jsx(NSBoxInteger, { title: 'Integer', required: true }), _jsx(NSBoxSearch, { title: 'Search', required: true }), _jsx(NSBoxFile, { required: true, title: 'Driver License', multiple: true, maxFilesCount: 3, style: { width: "100%" } })] }) })] }));
+    return (_jsx(_Fragment, { children: _jsx(NSLayout, { header: {
+                icons: [],
+                title: "",
+            }, isLoggedIn: () => true, logo: 'https://img.freepik.com/free-photo/colorful-abstract-textured-background-design_53876-108265.jpg', notifications: [], notifier: {}, scope: '', background: 'url("https://img.freepik.com/free-photo/colorful-abstract-textured-background-design_53876-108265.jpg")', children: _jsx(NSSection, { children: _jsxs(NSPanel, { children: [_jsx(NSBoxDate, { title: 'Date', required: true }), _jsxs(NSRow, { children: [_jsx(NSBoxDate, { title: 'Date', required: true }), _jsx(NSBoxDate, { title: 'Date', required: true })] }), _jsx(NSBoxDate, { title: 'Date', required: true }), _jsx(NSBoxDate, { title: 'Date', required: true }), _jsx(NSRow, { children: _jsx(NSBoxFile, { title: 'Date', required: true, style: { width: "100%" } }) }), _jsxs(NSRow, { children: [_jsx(NSBoxDate, { title: 'Date', required: true }), _jsx(NSBoxDate, { title: 'Date', required: true }), _jsx(NSBoxDate, { title: 'Date', required: true }), _jsx(NSBoxDate, { title: 'Date', required: true })] })] }) }) }) }));
 }
 //# sourceMappingURL=App.js.map

package/dist/App.js.map

@@ -1 +1 @@
-{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,CAAC;AACnB,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,GAAG,MAAM,QAAQ,CAAC;AAC7E,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,MAAM,UAAU,GAAG;IAElB,OAAO,CACN,4BACC,KAAC,QAAQ,IACR,MAAM,EAAE;gBACP,KAAK,EAAE,EAAE;gBACT,KAAK,EAAE,EAAE;aACT,EACD,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,EACtB,IAAI,EAAC,kGAAkG,EACvG,aAAa,EAAE,EAAE,EACjB,QAAQ,EAAE,EAAS,EACnB,KAAK,EAAC,EAAE,EACR,UAAU,EAAC,yGAAyG,YAEpH,KAAC,SAAS,cACT,MAAC,OAAO,eACP,KAAC,SAAS,IACT,KAAK,EAAC,MAAM,EACZ,QAAQ,SACP,EACF,MAAC,KAAK,eACL,KAAC,SAAS,IACT,KAAK,EAAC,MAAM,EACZ,QAAQ,SACP,EACF,KAAC,SAAS,IACT,KAAK,EAAC,MAAM,EACZ,QAAQ,SACP,IACK,EACR,KAAC,SAAS,IACT,KAAK,EAAC,MAAM,EACZ,QAAQ,SACP,EACF,KAAC,SAAS,IACT,KAAK,EAAC,MAAM,EACZ,QAAQ,SACP,EACF,KAAC,KAAK,cACL,KAAC,SAAS,IACT,KAAK,EAAC,MAAM,EACZ,QAAQ,QACR,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GACvB,GACK,EACR,MAAC,KAAK,eACL,KAAC,SAAS,IACT,KAAK,EAAC,MAAM,EACZ,QAAQ,SACP,EACF,KAAC,SAAS,IACT,KAAK,EAAC,MAAM,EACZ,QAAQ,SACP,EACF,KAAC,SAAS,IACT,KAAK,EAAC,MAAM,EACZ,QAAQ,SACP,EACF,KAAC,SAAS,IACT,KAAK,EAAC,MAAM,EACZ,QAAQ,SACP,IACK,IACC,GACC,GACD,GACV,CACH,CAAC;AACH,CAAC"}

package/dist/components/NSBarAlert.js

@@ -3,6 +3,6 @@ import { NSSection } from './NSSection';
 import Styles from './NSBarAlert.module.css';
 export function NSBarAlert(props) {
     var _a;
-    return (_jsx(NSSection, { style: props.style, classList: [Styles.ns_bar_alert_section], children: _jsx("div", { className: "container", children: _jsxs("article", { className: Styles.ns_bar_alert_container, children: [_jsxs("div", { className: Styles.ns_bar_alert_title, children: [_jsx("img", { src: "https://static.namirasoft.com/image/concept/alarm/blue.svg", alt: "Alarm", width: 24, height: 24 }), _jsxs("h3", { children: [" ", props.title.title, " "] })] }), _jsxs("p", { className: Styles.ns_bar_alert_description, children: [" ", props.title.description, " "] }), _jsx("div", { className: Styles.ns_bar_alert_link, children: _jsx("button", { onClick: props.onClick, children: (_a = props.button_text) !== null && _a !== void 0 ? _a : "Continue" }) })] }) }) }));
+    return (_jsx(NSSection, { style: props.style, classList: [Styles.ns_bar_alert_section], children: _jsxs("article", { className: Styles.ns_bar_alert_container, children: [_jsxs("div", { className: Styles.ns_bar_alert_title_parent, children: [_jsxs("div", { className: Styles.ns_bar_alert_title, children: [_jsx("img", { src: "https://static.namirasoft.com/image/concept/alarm/blue.svg", alt: "Alarm", width: 24, height: 24 }), _jsxs("h3", { children: [" ", props.title.title, " "] })] }), _jsx("p", { className: Styles.ns_bar_alert_description, children: props.title.description })] }), _jsx("div", { className: Styles.ns_bar_alert_link, children: _jsx("button", { onClick: props.onClick, children: (_a = props.button_text) !== null && _a !== void 0 ? _a : "Continue" }) })] }) }));
 }
 //# sourceMappingURL=NSBarAlert.js.map

package/dist/components/NSBarAlert.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSBarAlert.js","sourceRoot":"","sources":["../../src/components/NSBarAlert.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAU7C,MAAM,UAAU,UAAU,CAAC,KAAsB;;IAEhD,OAAO,CACN,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,CAAC,MAAM,CAAC,oBAAoB,CAAC,YACtE,cAAK,SAAS,EAAC,WAAW,YACzB,mBAAS,SAAS,EAAE,MAAM,CAAC,sBAAsB,aAChD,eAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,aACxC,cAAK,GAAG,EAAC,4DAA4D,EAAC,GAAG,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,EAC3G,8BAAM,KAAK,CAAC,KAAK,CAAC,KAAK,SAAO,IACzB,EACN,aAAG,SAAS,EAAE,MAAM,CAAC,wBAAwB,kBAAI,KAAK,CAAC,KAAK,CAAC,WAAW,SAAM,EAC9E,cAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,YACvC,iBAAQ,OAAO,EAAE,KAAK,CAAC,OAAO,YAAG,MAAA,KAAK,CAAC,WAAW,mCAAI,UAAU,GAAU,GACrE,IACG,GACL,GACK,CACZ,CAAC;AACH,CAAC"}
+{"version":3,"file":"NSBarAlert.js","sourceRoot":"","sources":["../../src/components/NSBarAlert.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAU7C,MAAM,UAAU,UAAU,CAAC,KAAsB;;IAEhD,OAAO,CACN,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,CAAC,MAAM,CAAC,oBAAoB,CAAC,YACtE,mBAAS,SAAS,EAAE,MAAM,CAAC,sBAAsB,aAChD,eAAK,SAAS,EAAE,MAAM,CAAC,yBAAyB,aAC/C,eAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,aACxC,cAAK,GAAG,EAAC,4DAA4D,EAAC,GAAG,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,EAC3G,8BAAM,KAAK,CAAC,KAAK,CAAC,KAAK,SAAO,IACzB,EACN,YAAG,SAAS,EAAE,MAAM,CAAC,wBAAwB,YAAG,KAAK,CAAC,KAAK,CAAC,WAAW,GAAK,IACvE,EACN,cAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,YACvC,iBAAQ,OAAO,EAAE,KAAK,CAAC,OAAO,YAAG,MAAA,KAAK,CAAC,WAAW,mCAAI,UAAU,GAAU,GACrE,IACG,GACC,CACZ,CAAC;AACH,CAAC"}

package/dist/components/NSBarAlert.module.css

@@ -15,6 +15,10 @@
 	gap: 8px;
 }
 
+.ns_bar_alert_title_parent {
+	align-items: center;
+}
+
 .ns_bar_alert_title {
 	color: inherit;
 	display: flex;
@@ -58,6 +62,11 @@
 		gap: 0;
 	}
 
+	.ns_bar_alert_title_parent {
+		display: flex;
+		align-items: center;
+	}
+
 	.ns_bar_alert_title {
 		justify-content: space-between;
 		gap: 0;

package/dist/components/NSBoxFile.module.css

@@ -6,6 +6,6 @@
 
 @media screen and (min-width: 540px) {
     .ns_box_file_dagger_parent {
-        max-width: 700px;
+        max-width: 100%;
     }
 }

package/dist/components/NSLayout.js

@@ -29,7 +29,7 @@ export function NSLayout(props) {
             backgroundSize: "cover",
             backgroundAttachment: "fixed"
         }, children: [_jsx(NSHeader, { scope: props.scope, name: "Header", logo: props.logo, header: props.header, isLoggedIn: props.isLoggedIn, notifier: props.notifier }), props.notifications.length !== 0 &&
-                _jsx(_Fragment, { children: props.notifications.map((notification, index) => _jsx(Fragment, { children: _jsx(NSBarNotification, Object.assign({}, notification)) }, `NSLayout_fragment_key_${index}`)) }), alerts.length !== 0 && alerts.map((alert, index) => _jsx(NSBarAlert, Object.assign({}, alert), `NSLayout_NSBarAlert_key_${index}`)), isValidAction(props.action) && _jsx(NSBarAction, Object.assign({}, props.action)), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), props.title &&
-                _jsxs(_Fragment, { children: [_jsx(NSBarTitle, Object.assign({}, props.title)), _jsx(NSSpace, { size: NSSpaceSizeType.MEDUIM })] }), _jsx("main", { className: `d-flex flex-column text-white ${Styles.ns_layout_main}`, children: props.children }), _jsx(NSSpace, { size: NSSpaceSizeType.MEDUIM }), _jsx(NSFooter, { scope: props.scope, name: "Footer", logo: props.logo, isLoggedIn: props.isLoggedIn })] }));
+                _jsx(_Fragment, { children: props.notifications.map((notification, index) => _jsx(Fragment, { children: _jsx(NSBarNotification, Object.assign({}, notification)) }, `NSLayout_fragment_key_${index}`)) }), alerts.length !== 0 && alerts.map((alert, index) => _jsx(NSBarAlert, Object.assign({}, alert), `NSLayout_NSBarAlert_key_${index}`)), isValidAction(props.action) && _jsx(NSBarAction, Object.assign({}, props.action)), _jsx(NSSpace, { size: NSSpaceSizeType.MINI }), props.title &&
+                _jsxs(_Fragment, { children: [_jsx(NSBarTitle, Object.assign({}, props.title)), _jsx(NSSpace, { size: NSSpaceSizeType.MEDUIM })] }), _jsx("main", { className: `d-flex flex-column text-white ${Styles.ns_layout_main}`, children: props.children }), _jsx(NSSpace, { size: NSSpaceSizeType.MINI }), _jsx(NSFooter, { scope: props.scope, name: "Footer", logo: props.logo, isLoggedIn: props.isLoggedIn })] }));
 }
 //# sourceMappingURL=NSLayout.js.map

package/dist/components/NSLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSLayout.js","sourceRoot":"","sources":["../../src/components/NSLayout.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"NSLayout.js","sourceRoot":"","sources":["../../src/components/NSLayout.tsx"],"names":[],"mappings":"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"}

package/dist/components/NSListProduct.js

@@ -3,6 +3,7 @@ import { useState, useEffect } from "react";
 import { NamirasoftAPIProductServer } from "namirasoft-api-product";
 import { NSCard } from "./NSCard";
 import { EnvService } from 'namirasoft-core';
+import { NSSection } from "./NSSection";
 export function NSListProduct(props) {
     const [state, setState] = useState({ products: [] });
     useEffect(() => {
@@ -12,7 +13,7 @@ export function NSListProduct(props) {
             setState({ products: products.rows });
         }).catch(() => { });
     }, []);
-    return (_jsx("div", { className: "d-flex gap-3 flex-wrap justify-content-center container", children: state.products.map((product) => {
+    return (_jsx(NSSection, { children: state.products.map((product) => {
             var _a, _b;
             return (_jsx(NSCard, { link: { href: (_a = product.link) !== null && _a !== void 0 ? _a : "" }, title: product.name, image: { src: (_b = product.logo) !== null && _b !== void 0 ? _b : '', alt: product.name } }, product.id));
         }) }));

package/dist/components/NSListProduct.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSListProduct.js","sourceRoot":"","sources":["../../src/components/NSListProduct.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,0BAA0B,EAAkB,MAAM,wBAAwB,CAAC;AACpF,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAc5C,MAAM,UAAU,aAAa,CAAC,KAAyB;IAEnD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;IAEzE,SAAS,CAAC,GAAG,EAAE;QAEX,IAAI,8BAA8B,GAAG,IAAI,UAAU,CAAC,gCAAgC,EAAE,IAAI,CAAC,CAAC,SAAS,EAAE,CAAC;QACxG,IAAI,MAAM,GAAG,IAAI,0BAA0B,CAAC,8BAA8B,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;QACvF,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE;YAExF,QAAQ,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;QAC1C,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;IAGxB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACH,cAAK,SAAS,EAAC,yDAAyD,YAEhE,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAuB,EAAE,EAAE;;YAE3C,OAAO,CACH,KAAC,MAAM,IAAkB,IAAI,EAAE,EAAE,IAAI,EAAE,MAAA,OAAO,CAAC,IAAI,mCAAI,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,MAAA,OAAO,CAAC,IAAI,mCAAI,EAAE,EAAE,GAAG,EAAE,OAAO,CAAC,IAAI,EAAE,IAA1H,OAAO,CAAC,EAAE,CAAoH,CAC9I,CAAC;QACN,CAAC,CAAC,GAEJ,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"NSListProduct.js","sourceRoot":"","sources":["../../src/components/NSListProduct.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,0BAA0B,EAAkB,MAAM,wBAAwB,CAAC;AACpF,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAE5C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAaxC,MAAM,UAAU,aAAa,CAAC,KAAyB;IAEnD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;IAEzE,SAAS,CAAC,GAAG,EAAE;QAEX,IAAI,8BAA8B,GAAG,IAAI,UAAU,CAAC,gCAAgC,EAAE,IAAI,CAAC,CAAC,SAAS,EAAE,CAAC;QACxG,IAAI,MAAM,GAAG,IAAI,0BAA0B,CAAC,8BAA8B,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;QACvF,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE;YAExF,QAAQ,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;QAC1C,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;IAGxB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACH,KAAC,SAAS,cAEF,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAuB,EAAE,EAAE;;YAE3C,OAAO,CACH,KAAC,MAAM,IAAkB,IAAI,EAAE,EAAE,IAAI,EAAE,MAAA,OAAO,CAAC,IAAI,mCAAI,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,MAAA,OAAO,CAAC,IAAI,mCAAI,EAAE,EAAE,GAAG,EAAE,OAAO,CAAC,IAAI,EAAE,IAA1H,OAAO,CAAC,EAAE,CAAoH,CAC9I,CAAC;QACN,CAAC,CAAC,GAEE,CACf,CAAC;AACN,CAAC"}

package/dist/components/NSPanel.d.ts

@@ -2,6 +2,5 @@ import { ReactNode } from "react";
 import { IBaseComponentProps } from "../props/IBaseComponentProps";
 export interface NSPanelProps extends IBaseComponentProps {
     children: ReactNode;
-    grid: boolean;
 }
 export declare function NSPanel(props: NSPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/NSPanel.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import Styles from './NSPanel.module.css';
 export function NSPanel(props) {
     var _a;
-    return (_jsx("section", { id: props.id, className: `${props.grid ? Styles.ns_panel_grid : Styles.ns_panel_column} ${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: props.style, children: props.children }));
+    return (_jsx("div", { id: props.id, className: `${Styles.ns_panel} ${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: props.style, children: props.children }));
 }
 //# sourceMappingURL=NSPanel.js.map

package/dist/components/NSPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSPanel.js","sourceRoot":"","sources":["../../src/components/NSPanel.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAQ1C,MAAM,UAAU,OAAO,CAAC,KAAmB;;IAEvC,OAAO,CACH,kBAAS,EAAE,EAAE,KAAK,CAAC,EAAE,EACjB,SAAS,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,IAAI,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EACxG,KAAK,EAAE,KAAK,CAAC,KAAK,YAEjB,KAAK,CAAC,QAAQ,GACT,CACb,CAAC;AACN,CAAC"}
+{"version":3,"file":"NSPanel.js","sourceRoot":"","sources":["../../src/components/NSPanel.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAO1C,MAAM,UAAU,OAAO,CAAC,KAAmB;;IAEvC,OAAO,CACH,cAAK,EAAE,EAAE,KAAK,CAAC,EAAE,EACb,SAAS,EAAE,GAAG,MAAM,CAAC,QAAQ,IAAI,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAC7D,KAAK,EAAE,KAAK,CAAC,KAAK,YAEjB,KAAK,CAAC,QAAQ,GACb,CACT,CAAC;AACN,CAAC"}

package/dist/components/NSPanel.module.css

@@ -1,47 +1,19 @@
-.ns_panel_grid {
+.ns_panel {
     background-color: #fff;
-    padding: 24px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 16px;
-    border-radius: 16px;
-    margin: 0 auto;
-    border: 1px solid rgba(161, 164, 176, 1);
-    box-shadow: 0px 0px 2px 0px rgba(161, 164, 176, 1);
-    justify-content: center;
-}
-
-.ns_panel_column {
-    background-color: #fff;
-    padding: 24px;
+    padding: 16px;
     display: flex;
     flex-direction: column;
     align-items: center;
     border-radius: 8px;
+    gap: 16px;
     margin: 0 auto;
     width: 100%;
     border: 1px solid rgba(161, 164, 176, 1);
     box-shadow: 0px 0px 2px 0px rgba(161, 164, 176, 1);
 }
 
-@media only screen and (min-width: 768px) {
-    .ns_panel_column {
-        max-width: 700px;
-        min-width: 270px;
-    }
-
-    .ns_panel_grid {
-        flex-direction: row;
-        max-width: 700px;
-        flex-wrap: wrap;
-        min-width: 270px;
-        max-width: 610px;
-    }
-}
-
-@media only screen and (min-width: 425px) {
-    .ns_panel_column {
+@media only screen and (min-width: 480px) {
+    .ns_panel {
         width: max-content;
     }
 }

package/dist/components/NSRow.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+export interface NSRowProps extends IBaseComponentProps {
+    children: ReactNode;
+}
+export declare function NSRow(props: NSRowProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/NSRow.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Styles from './NSRow.module.css';
+export function NSRow(props) {
+    var _a;
+    return (_jsx("div", { id: props.id, className: `${Styles.ns_row} ${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: props.style, children: props.children }));
+}
+//# sourceMappingURL=NSRow.js.map

package/dist/components/NSRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NSRow.js","sourceRoot":"","sources":["../../src/components/NSRow.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAOxC,MAAM,UAAU,KAAK,CAAC,KAAiB;;IAEnC,OAAO,CACH,cAAK,EAAE,EAAE,KAAK,CAAC,EAAE,EACb,SAAS,EAAE,GAAG,MAAM,CAAC,MAAM,IAAI,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAC3D,KAAK,EAAE,KAAK,CAAC,KAAK,YAEjB,KAAK,CAAC,QAAQ,GACb,CACT,CAAC;AACN,CAAC"}

package/dist/components/NSRow.module.css

@@ -0,0 +1,18 @@
+.ns_row {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    margin: 0;
+    justify-content: center;
+    width: max-content;
+    max-width: 100%;
+    width: 100%;
+}
+
+@media only screen and (min-width: 768px) {
+    .ns_row {
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+}

package/dist/components/NSSection.d.ts

@@ -2,6 +2,5 @@ import { ReactNode } from "react";
 import { IBaseComponentProps } from "../props/IBaseComponentProps";
 export interface NSSectionProps extends IBaseComponentProps {
     children: ReactNode;
-    center_items?: boolean;
 }
 export declare function NSSection(props: NSSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/NSSection.js

@@ -2,9 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import Styles from './NSSection.module.css';
 export function NSSection(props) {
     var _a;
-    let styles = [Styles.ns_section];
-    if (props.center_items)
-        styles.push(Styles.ns_section_center);
-    return (_jsx("section", { id: props.id, className: `${styles.join(" ")} ${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: props.style, children: props.children }));
+    return (_jsx("section", { id: props.id, className: `container d-flex flex-wrap justify-content-center ${Styles.ns_section} ${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: props.style, children: props.children }));
 }
 //# sourceMappingURL=NSSection.js.map

package/dist/components/NSSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSSection.js","sourceRoot":"","sources":["../../src/components/NSSection.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAS3C,MAAM,UAAU,SAAS,CAAC,KAAqB;;IAE9C,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IACjC,IAAI,KAAK,CAAC,YAAY;QACrB,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;IACvC,OAAO,CACN,kBAAS,EAAE,EAAE,KAAK,CAAC,EAAE,EACpB,SAAS,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAC9D,KAAK,EAAE,KAAK,CAAC,KAAK,YAEjB,KAAK,CAAC,QAAQ,GACN,CACV,CAAC;AACH,CAAC"}
+{"version":3,"file":"NSSection.js","sourceRoot":"","sources":["../../src/components/NSSection.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAQ3C,MAAM,UAAU,SAAS,CAAC,KAAqB;;IAE9C,OAAO,CACN,kBACC,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,qDAAqD,MAAM,CAAC,UAAU,IAAI,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EACjH,KAAK,EAAE,KAAK,CAAC,KAAK,YAEjB,KAAK,CAAC,QAAQ,GACN,CACV,CAAC;AACH,CAAC"}

package/dist/components/NSSection.module.css

@@ -2,10 +2,4 @@
 	background-repeat: no-repeat;
 	background-size: cover;
 	background-position: center;
-}
-
-.ns_section_center {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
 }

package/dist/components/NSSectionCards.js

@@ -7,7 +7,7 @@ import { NSLinkBlue } from './NSLinkBlue';
 import { NSSpace, NSSpaceSizeType } from './NSSpace';
 export function NSSectionCards(props) {
     var _a, _b;
-    return (_jsxs(NSSection, Object.assign({}, props, { children: [_jsx(NSSpace, { size: NSSpaceSizeType.NORMAL }), _jsxs("div", { className: `container mx-auto px-4 lg:px-12 ${Styles.ns_section_cards_holder}`, children: [props.title &&
+    return (_jsxs(NSSection, Object.assign({}, props, { children: [_jsx(NSSpace, { size: NSSpaceSizeType.NORMAL }), _jsxs("div", { className: `mx-auto px-4 lg:px-12 ${Styles.ns_section_cards_holder}`, children: [props.title &&
                         _jsxs("div", { className: Styles.ns_section_cards_title_container, children: [_jsx(NSTitle, { title: props.title }), props.description &&
                                     _jsxs("p", { style: { color: (_a = props.description) === null || _a === void 0 ? void 0 : _a.color }, className: Styles.ns_description, children: [" ", props.description.text, " "] })] }), _jsx("div", { className: ` ${Styles.ns_card_container}`, children: (_b = props.cards) === null || _b === void 0 ? void 0 : _b.map((card) => _jsx(NSCard, Object.assign({}, card), card.id)) }), props.button &&
                         _jsx("div", { className: `mt-12 w-full- text-center ${Styles.ns_section_cards_link_container}`, children: _jsx(NSLinkBlue, Object.assign({}, props.button)) })] }), _jsx(NSSpace, { size: NSSpaceSizeType.NORMAL })] })));

package/dist/components/NSSectionCards.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSSectionCards.js","sourceRoot":"","sources":["../../src/components/NSSectionCards.tsx"],"names":[],"mappings":";AAAA,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;AAC1C,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAerD,MAAM,UAAU,cAAc,CAAC,KAA0B;;IAExD,OAAO,CACN,MAAC,SAAS,oBAAK,KAAK,eACnB,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,MAAM,GAAI,EACzC,eAAK,SAAS,EAAE,mCAAmC,MAAM,CAAC,uBAAuB,EAAE,aAEjF,KAAK,CAAC,KAAK;wBACX,eAAK,SAAS,EAAE,MAAM,CAAC,gCAAgC,aACtD,KAAC,OAAO,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAI,EAE9B,KAAK,CAAC,WAAW;oCACjB,aAAG,KAAK,EAAE,EAAE,KAAK,EAAE,MAAA,KAAK,CAAC,WAAW,0CAAE,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,cAAc,kBAAI,KAAK,CAAC,WAAW,CAAC,IAAI,SAAM,IAE3G,EAEP,cAAK,SAAS,EAAE,IAAI,MAAM,CAAC,iBAAiB,EAAE,YAE5C,MAAA,KAAK,CAAC,KAAK,0CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,KAAC,MAAM,oBAAmB,IAAI,GAAjB,IAAI,CAAC,EAAE,CAAc,CAAC,GAE1D,EAEL,KAAK,CAAC,MAAM;wBACZ,cAAK,SAAS,EAAE,6BAA6B,MAAM,CAAC,+BAA+B,EAAE,YACpF,KAAC,UAAU,oBAAK,KAAK,CAAC,MAAM,EAAI,GAC3B,IAEF,EACN,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,MAAM,GAAI,KAC9B,CACZ,CAAC;AACH,CAAC"}
+{"version":3,"file":"NSSectionCards.js","sourceRoot":"","sources":["../../src/components/NSSectionCards.tsx"],"names":[],"mappings":";AAAA,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;AAC1C,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAerD,MAAM,UAAU,cAAc,CAAC,KAA0B;;IAExD,OAAO,CACN,MAAC,SAAS,oBAAK,KAAK,eACnB,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,MAAM,GAAI,EACzC,eAAK,SAAS,EAAE,yBAAyB,MAAM,CAAC,uBAAuB,EAAE,aAEvE,KAAK,CAAC,KAAK;wBACX,eAAK,SAAS,EAAE,MAAM,CAAC,gCAAgC,aACtD,KAAC,OAAO,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAI,EAE9B,KAAK,CAAC,WAAW;oCACjB,aAAG,KAAK,EAAE,EAAE,KAAK,EAAE,MAAA,KAAK,CAAC,WAAW,0CAAE,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,cAAc,kBAAI,KAAK,CAAC,WAAW,CAAC,IAAI,SAAM,IAE3G,EAEP,cAAK,SAAS,EAAE,IAAI,MAAM,CAAC,iBAAiB,EAAE,YAE5C,MAAA,KAAK,CAAC,KAAK,0CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,KAAC,MAAM,oBAAmB,IAAI,GAAjB,IAAI,CAAC,EAAE,CAAc,CAAC,GAE1D,EAEL,KAAK,CAAC,MAAM;wBACZ,cAAK,SAAS,EAAE,6BAA6B,MAAM,CAAC,+BAA+B,EAAE,YACpF,KAAC,UAAU,oBAAK,KAAK,CAAC,MAAM,EAAI,GAC3B,IAEF,EACN,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,MAAM,GAAI,KAC9B,CACZ,CAAC;AACH,CAAC"}

package/dist/components/NSSectionTiles.js

@@ -5,6 +5,6 @@ import { NSSection } from './NSSection';
 import { NSSpace, NSSpaceSizeType } from './NSSpace';
 export function NSSectionTiles(props) {
     var _a;
-    return (_jsxs(NSSection, Object.assign({}, props, { children: [_jsx(NSSpace, { size: NSSpaceSizeType.NORMAL }), _jsx("div", { className: `container mx-auto px-4 lg:px-12 ${Styles.ns_entity_bar_container}`, children: (_a = props.tiles) === null || _a === void 0 ? void 0 : _a.map((bar) => _jsx(NSTile, Object.assign({}, bar), bar.id)) }), _jsx(NSSpace, { size: NSSpaceSizeType.NORMAL })] })));
+    return (_jsxs(NSSection, Object.assign({}, props, { children: [_jsx(NSSpace, { size: NSSpaceSizeType.NORMAL }), _jsx("div", { className: `mx-auto px-4 lg:px-12 ${Styles.ns_entity_bar_container}`, children: (_a = props.tiles) === null || _a === void 0 ? void 0 : _a.map((bar) => _jsx(NSTile, Object.assign({}, bar), bar.id)) }), _jsx(NSSpace, { size: NSSpaceSizeType.NORMAL })] })));
 }
 //# sourceMappingURL=NSSectionTiles.js.map

package/dist/components/NSSectionTiles.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSSectionTiles.js","sourceRoot":"","sources":["../../src/components/NSSectionTiles.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,6BAA6B,CAAC;AACjD,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AASrD,MAAM,UAAU,cAAc,CAAC,KAA0B;;IAExD,OAAO,CACN,MAAC,SAAS,oBAAK,KAAK,eACnB,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,MAAM,GAAI,EACzC,cAAK,SAAS,EAAE,mCAAmC,MAAM,CAAC,uBAAuB,EAAE,YAEjF,MAAA,KAAK,CAAC,KAAK,0CAAE,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,KAAC,MAAM,oBAAkB,GAAG,GAAf,GAAG,CAAC,EAAE,CAAa,CAAC,GAEvD,EACN,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,MAAM,GAAI,KAC9B,CACZ,CAAC;AACH,CAAC"}
+{"version":3,"file":"NSSectionTiles.js","sourceRoot":"","sources":["../../src/components/NSSectionTiles.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,6BAA6B,CAAC;AACjD,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AASrD,MAAM,UAAU,cAAc,CAAC,KAA0B;;IAExD,OAAO,CACN,MAAC,SAAS,oBAAK,KAAK,eACnB,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,MAAM,GAAI,EACzC,cAAK,SAAS,EAAE,yBAAyB,MAAM,CAAC,uBAAuB,EAAE,YAEvE,MAAA,KAAK,CAAC,KAAK,0CAAE,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,KAAC,MAAM,oBAAkB,GAAG,GAAf,GAAG,CAAC,EAAE,CAAa,CAAC,GAEvD,EACN,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,MAAM,GAAI,KAC9B,CACZ,CAAC;AACH,CAAC"}

package/package.json

@@ -8,7 +8,7 @@
 	"framework": "npm",
 	"application": "package",
 	"private": false,
-	"version": "1.4.137",
+	"version": "1.4.139",
 	"author": "Amir Abolhasani",
 	"license": "MIT",
 	"main": "./dist/main.js",

package/src/App.tsx

@@ -1,226 +1,76 @@
 import './App.css';
-import { VariableType } from 'namirasoft-schema';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import
-{
-	NSMenuAction, NSBarAction, NSBoxEmail, NSBoxPhone, NSBoxSearch, NSBoxCombo,
-	NSBoxBoolean, NSSection, NSPanel, NSBoxDate, NSBoxDateTime, NSBoxDouble, NSBoxInteger, NSBoxDuration, NSBoxTime, NSBoxEnum,
-	NSBoxFile, NSBoxIPV4, NSBoxIPV6, NSBoxPassword, NSBoxMoney,
-	NSBoxRadio,
-	NSBoxTextArea,
-	NSPagination,
-	NSBoxBooleans,
-} from './main';
-import { NSBoxEntity } from './components/NSBoxEntity';
-import { NamirasoftAPIProductServer, ProductFullRow } from 'namirasoft-api-product';
-import { useRef } from 'react';
+import { NSPanel, NSBoxDate, NSSection, NSBoxFile, NSLayout, } from './main';
+import { NSRow } from './components/NSRow';
 
 export function App()
 {
-	let NSBoxTest = useRef<NSBoxIPV4>(null);
 	return (
 		<>
-			<NSMenuAction
-				items={[{
-					handler: () => { },
-					id: "1",
-					menu_item: "Name",
-					isActive: () => true
-				}, {
-					handler: () => { },
-					id: "2",
-					menu_item: "Text",
-					isActive: () => false
-				}]}
-				name='Test'
-			></NSMenuAction>
-			<NSBarAction
-				menus={{
-					"Test1": [{
-						handler: () => { },
-						id: "1",
-						menu_item: "Name",
-						isActive: () => true
-					}, {
-						handler: () => { },
-						id: "2",
-						menu_item: "Text",
-						isActive: () => false
-					}],
-					"Test2": [{
-						handler: () => { },
-						id: "1",
-						menu_item: "Name",
-						isActive: () => true
-					}, {
-						handler: () => { },
-						id: "2",
-						menu_item: "Text",
-						isActive: () => false
-					}],
-					"Test3": [{
-						handler: () => { },
-						id: "1",
-						menu_item: "Test3",
-						isActive: () => true
-					}],
-					"Test4": [{
-						handler: () => { },
-						id: "1",
-						menu_item: "Test4",
-						isActive: () => true
-					}]
+			<NSLayout
+				header={{
+					icons: [],
+					title: "",
 				}}
-				title='Title'
-			></NSBarAction>
-			<NSSection
-				center_items={true}
+				isLoggedIn={() => true}
+				logo='https://img.freepik.com/free-photo/colorful-abstract-textured-background-design_53876-108265.jpg'
+				notifications={[]}
+				notifier={{} as any}
+				scope=''
+				background='url("https://img.freepik.com/free-photo/colorful-abstract-textured-background-design_53876-108265.jpg")'
 			>
-				<NSPanel grid>
-					<NSBoxBooleans
-						hideHeaderAll
-						hideHeaderBoxes
-						items={[{
-							text: "1",
-							value: "1",
-						}, {
-							text: "1",
-							value: "1",
-						}, {
-							text: "1",
-							value: "1",
-						}, {
-							text: "1",
-							value: "1",
-						}, {
-							text: "1",
-							value: "1",
-						}, {
-							text: "1",
-							value: "1",
-						}, {
-							text: "1",
-							value: "1",
-						}]}
-					></NSBoxBooleans>
-					<NSPagination
-						onPageChange={() => { }}
-						totalItems={25000 - 100}
-					></NSPagination>
-					<NSBoxBoolean
-						title='Text'
-						required={true}
-						indeterminate={true}
-					/>
-					<NSBoxCombo
-						title='Text'
-						required
-						multiple={false}
-						getOptions={() => [{
-							value: "1",
-							title: "1",
-						}]}
-					/>
-					<NSBoxEnum<VariableType>
-						title='Type'
-						required
-						multiple={true}
-						getEnumObject={() => { return VariableType }}
-						onChanged={e =>
-						{
-							console.log(e.getValues(VariableType, VariableType.Any))
-						}}
-					></NSBoxEnum>
-					<NSBoxEntity<ProductFullRow>
-						title='Product'
-						required
-						multiple={false}
-						getItems={new NamirasoftAPIProductServer("https://namirasoft.com/api/product/v1", console.error).product.List}
-						getValue={x => x.id}
-						getTitle={x => x.name}
-						onChanged={e =>
-						{
-							let box = e as NSBoxEntity<ProductFullRow>;
-							console.log(box.NSBoxBaseCombo.current?.getData())
-							try
-							{
-								NSBoxTest.current?.getValue()
-							} catch (error)
-							{
-							}
-						}}
-					></NSBoxEntity>
-					<NSBoxEmail
-						title='Email'
-						required
-					/>
-					<NSBoxTextArea
-						title='Test'
-						required
-						style={{ width: "100%" }}
-					></NSBoxTextArea>
-					<NSBoxMoney
-						title='Money'
-						required
-					/>
-					<NSBoxRadio
-						title='NSBoxRadio'
-						required
-					/>
-					<NSBoxPhone
-						title='Phone'
-						required
-					/>
-					<NSBoxPassword
-						title='Password'
-						required
-					/>
-					<NSBoxIPV4
-						ref={NSBoxTest}
-						title='IPV4'
-						required
-					/>
-					<NSBoxIPV6
-						title='IPV6'
-						required
-					/>
-					<NSBoxDate
-						title='Date'
-						required
-					/>
-					<NSBoxDateTime
-						title='Datetime'
-						required
-					/>
-					<NSBoxDouble
-						title='Double'
-						required
-					/>
-					<NSBoxDuration
-						title='Duration'
-						required
-					/>
-					<NSBoxTime
-						title='Time'
-						required
-					/>
-					<NSBoxInteger
-						title='Integer'
-						required
-					/>
-					<NSBoxSearch
-						title='Search'
-						required
-					/>
-					<NSBoxFile
-						required
-						title='Driver License'
-						multiple={true}
-						maxFilesCount={3}
-						style={{ width: "100%" }}
-					></NSBoxFile>
-				</NSPanel>
-			</NSSection >
+				<NSSection>
+					<NSPanel >
+						<NSBoxDate
+							title='Date'
+							required
+						/>
+						<NSRow>
+							<NSBoxDate
+								title='Date'
+								required
+							/>
+							<NSBoxDate
+								title='Date'
+								required
+							/>
+						</NSRow>
+						<NSBoxDate
+							title='Date'
+							required
+						/>
+						<NSBoxDate
+							title='Date'
+							required
+						/>
+						<NSRow>
+							<NSBoxFile
+								title='Date'
+								required
+								style={{ width: "100%" }}
+							/>
+						</NSRow>
+						<NSRow>
+							<NSBoxDate
+								title='Date'
+								required
+							/>
+							<NSBoxDate
+								title='Date'
+								required
+							/>
+							<NSBoxDate
+								title='Date'
+								required
+							/>
+							<NSBoxDate
+								title='Date'
+								required
+							/>
+						</NSRow>
+					</NSPanel>
+				</NSSection>
+			</NSLayout >
 		</>
 	);
 }

package/src/components/NSBarAlert.module.css

@@ -15,6 +15,10 @@
 	gap: 8px;
 }
 
+.ns_bar_alert_title_parent {
+	align-items: center;
+}
+
 .ns_bar_alert_title {
 	color: inherit;
 	display: flex;
@@ -58,6 +62,11 @@
 		gap: 0;
 	}
 
+	.ns_bar_alert_title_parent {
+		display: flex;
+		align-items: center;
+	}
+
 	.ns_bar_alert_title {
 		justify-content: space-between;
 		gap: 0;

package/src/components/NSBarAlert.tsx

@@ -15,18 +15,18 @@ export function NSBarAlert(props: NSBarAlertProps)
 {
 	return (
 		<NSSection style={props.style} classList={[Styles.ns_bar_alert_section]}>
-			<div className="container">
-				<article className={Styles.ns_bar_alert_container}>
+			<article className={Styles.ns_bar_alert_container}>
+				<div className={Styles.ns_bar_alert_title_parent}>
 					<div className={Styles.ns_bar_alert_title}>
 						<img src="https://static.namirasoft.com/image/concept/alarm/blue.svg" alt="Alarm" width={24} height={24} />
 						<h3> {props.title.title} </h3>
 					</div>
-					<p className={Styles.ns_bar_alert_description}> {props.title.description} </p>
-					<div className={Styles.ns_bar_alert_link}>
-						<button onClick={props.onClick}>{props.button_text ?? "Continue"}</button>
-					</div>
-				</article>
-			</div>
+					<p className={Styles.ns_bar_alert_description}>{props.title.description}</p>
+				</div>
+				<div className={Styles.ns_bar_alert_link}>
+					<button onClick={props.onClick}>{props.button_text ?? "Continue"}</button>
+				</div>
+			</article>
 		</NSSection>
 	);
 }

package/src/components/NSBoxFile.module.css

@@ -6,6 +6,6 @@
 
 @media screen and (min-width: 540px) {
     .ns_box_file_dagger_parent {
-        max-width: 700px;
+        max-width: 100%;
     }
 }

package/src/components/NSLayout.tsx

@@ -78,7 +78,7 @@ export function NSLayout(props: NSLayoutProps)
 			{
 				isValidAction(props.action) && <NSBarAction {...props.action} />
 			}
-			<NSSpace size={NSSpaceSizeType.SMALL} />
+			<NSSpace size={NSSpaceSizeType.MINI} />
 			{
 				props.title &&
 				<>
@@ -89,7 +89,7 @@ export function NSLayout(props: NSLayoutProps)
 			<main className={`d-flex flex-column text-white ${Styles.ns_layout_main}`}>
 				{props.children}
 			</main>
-			<NSSpace size={NSSpaceSizeType.MEDUIM} />
+			<NSSpace size={NSSpaceSizeType.MINI} />
 			<NSFooter
 				scope={props.scope}
 				name="Footer"

package/src/components/NSListProduct.tsx

@@ -3,6 +3,7 @@ import { NamirasoftAPIProductServer, ProductFullRow } from "namirasoft-api-produ
 import { NSCard } from "./NSCard";
 import { EnvService } from 'namirasoft-core'
 import { INSRouterProps } from "../routing/INSRouterProps";
+import { NSSection } from "./NSSection";
 
 export interface NSListProductProps extends INSRouterProps
 {
@@ -32,7 +33,7 @@ export function NSListProduct(props: NSListProductProps)
     }, []);
 
     return (
-        <div className="d-flex gap-3 flex-wrap justify-content-center container">
+        <NSSection>
             {
                 state.products.map((product: ProductFullRow) =>
                 {
@@ -41,6 +42,6 @@ export function NSListProduct(props: NSListProductProps)
                     );
                 })
             }
-        </div>
+        </NSSection>
     );
 }

package/src/components/NSPanel.module.css

@@ -1,47 +1,19 @@
-.ns_panel_grid {
+.ns_panel {
     background-color: #fff;
-    padding: 24px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 16px;
-    border-radius: 16px;
-    margin: 0 auto;
-    border: 1px solid rgba(161, 164, 176, 1);
-    box-shadow: 0px 0px 2px 0px rgba(161, 164, 176, 1);
-    justify-content: center;
-}
-
-.ns_panel_column {
-    background-color: #fff;
-    padding: 24px;
+    padding: 16px;
     display: flex;
     flex-direction: column;
     align-items: center;
     border-radius: 8px;
+    gap: 16px;
     margin: 0 auto;
     width: 100%;
     border: 1px solid rgba(161, 164, 176, 1);
     box-shadow: 0px 0px 2px 0px rgba(161, 164, 176, 1);
 }
 
-@media only screen and (min-width: 768px) {
-    .ns_panel_column {
-        max-width: 700px;
-        min-width: 270px;
-    }
-
-    .ns_panel_grid {
-        flex-direction: row;
-        max-width: 700px;
-        flex-wrap: wrap;
-        min-width: 270px;
-        max-width: 610px;
-    }
-}
-
-@media only screen and (min-width: 425px) {
-    .ns_panel_column {
+@media only screen and (min-width: 480px) {
+    .ns_panel {
         width: max-content;
     }
 }

package/src/components/NSPanel.tsx

@@ -5,16 +5,15 @@ import { IBaseComponentProps } from "../props/IBaseComponentProps";
 export interface NSPanelProps extends IBaseComponentProps
 {
     children: ReactNode;
-    grid: boolean;
 }
 export function NSPanel(props: NSPanelProps)
 {
     return (
-        <section id={props.id}
-            className={`${props.grid ? Styles.ns_panel_grid : Styles.ns_panel_column} ${props.classList?.join(" ")}`}
+        <div id={props.id}
+            className={`${Styles.ns_panel} ${props.classList?.join(" ")}`}
             style={props.style}
         >
             {props.children}
-        </section>
+        </div>
     );
 }

package/src/components/NSRow.module.css

@@ -0,0 +1,18 @@
+.ns_row {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    margin: 0;
+    justify-content: center;
+    width: max-content;
+    max-width: 100%;
+    width: 100%;
+}
+
+@media only screen and (min-width: 768px) {
+    .ns_row {
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+}

package/src/components/NSRow.tsx

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+import Styles from './NSRow.module.css';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface NSRowProps extends IBaseComponentProps
+{
+    children: ReactNode;
+}
+export function NSRow(props: NSRowProps)
+{
+    return (
+        <div id={props.id}
+            className={`${Styles.ns_row} ${props.classList?.join(" ")}`}
+            style={props.style}
+        >
+            {props.children}
+        </div>
+    );
+}

package/src/components/NSSection.module.css

@@ -2,10 +2,4 @@
 	background-repeat: no-repeat;
 	background-size: cover;
 	background-position: center;
-}
-
-.ns_section_center {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
 }

package/src/components/NSSection.tsx

@@ -5,17 +5,14 @@ import { IBaseComponentProps } from "../props/IBaseComponentProps";
 export interface NSSectionProps extends IBaseComponentProps
 {
 	children: ReactNode;
-	center_items?: boolean;
 }
 
 export function NSSection(props: NSSectionProps)
 {
-	let styles = [Styles.ns_section];
-	if (props.center_items)
-		styles.push(Styles.ns_section_center);
 	return (
-		<section id={props.id}
-			className={`${styles.join(" ")} ${props.classList?.join(" ")}`}
+		<section
+			id={props.id}
+			className={`container d-flex flex-wrap justify-content-center ${Styles.ns_section} ${props.classList?.join(" ")}`}
 			style={props.style}
 		>
 			{props.children}

package/src/components/NSSectionCards.tsx

@@ -23,7 +23,7 @@ export function NSSectionCards(props: NSSectionCardsProps)
 	return (
 		<NSSection {...props} >
 			<NSSpace size={NSSpaceSizeType.NORMAL} />
-			<div className={`container mx-auto px-4 lg:px-12 ${Styles.ns_section_cards_holder}`}>
+			<div className={`mx-auto px-4 lg:px-12 ${Styles.ns_section_cards_holder}`}>
 				{
 					props.title &&
 					<div className={Styles.ns_section_cards_title_container}>

package/src/components/NSSectionTiles.tsx

@@ -15,7 +15,7 @@ export function NSSectionTiles(props: NSSectionTilesProps)
 	return (
 		<NSSection {...props} >
 			<NSSpace size={NSSpaceSizeType.NORMAL} />
-			<div className={`container mx-auto px-4 lg:px-12 ${Styles.ns_entity_bar_container}`}>
+			<div className={`mx-auto px-4 lg:px-12 ${Styles.ns_entity_bar_container}`}>
 				{
 					props.tiles?.map((bar) => <NSTile key={bar.id} {...bar} />)
 				}