namirasoft-site-react 1.3.166 → 1.3.168

package/dist/components/NSBox.module.css

@@ -11,6 +11,7 @@
 
 .ns_input_parent img {
 	position: absolute;
+	z-index: 2;
 	right: 5%;
 	top: 50%;
 }

package/dist/components/NSBoxOTP.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
-declare const NSBoxOTP: React.FC;
+import { IBaseComponentProps } from '../main';
+interface INSBoxOTPProps extends IBaseComponentProps {
+    onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+declare function NSBoxOTP(props: INSBoxOTPProps): import("react/jsx-runtime").JSX.Element;
 export default NSBoxOTP;

package/dist/components/NSBoxOTP.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, useRef } from 'react';
 import Styles from './NSBoxOTP.module.css';
-const NSBoxOTP = () => {
+function NSBoxOTP(props) {
     const [values, setValues] = useState(Array(6).fill(''));
     const inputsRef = useRef([]);
     const handleChange = (index) => (event) => {
@@ -15,6 +15,8 @@ const NSBoxOTP = () => {
                 (_a = inputsRef.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
             }
         }
+        if (props.onChanged)
+            props.onChanged(event);
     };
     const handleKeyDown = (index) => (event) => {
         var _a;
@@ -22,7 +24,8 @@ const NSBoxOTP = () => {
             (_a = inputsRef.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
         }
     };
-    return (_jsx("div", { style: { display: 'flex', gap: '10px' }, children: values.map((value, index) => (_jsx("input", { ref: el => inputsRef.current[index] = el, type: "text", value: value, onChange: handleChange(index), onKeyDown: handleKeyDown(index), maxLength: 1, style: { width: '30px', textAlign: 'center' }, className: Styles.ns_otp_input }, index))) }));
-};
+    return (_jsx("div", { style: { display: 'flex', gap: '10px' }, children: values.map((value, index) => (_jsx("input", { ref: el => inputsRef.current[index] = el, type: "text", value: value, onChange: handleChange(index), onKeyDown: handleKeyDown(index), maxLength: 1, style: { width: '30px', textAlign: 'center' }, className: Styles.ns_otp_input }, index + 10))) }));
+}
+;
 export default NSBoxOTP;
 //# sourceMappingURL=NSBoxOTP.js.map

package/dist/components/NSBoxOTP.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSBoxOTP.js","sourceRoot":"","sources":["../../src/components/NSBoxOTP.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAe,MAAM,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,MAAM,MAAM,uBAAuB,CAAA;AAE1C,MAAM,QAAQ,GAAa,GAAG,EAAE;IAC5B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAW,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;IAClE,MAAM,SAAS,GAAG,MAAM,CAA8B,EAAE,CAAC,CAAC;IAE1D,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,KAAoC,EAAE,EAAE;;QAC7E,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACpC,IAAI,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;YACxB,MAAM,aAAa,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC;YAClC,aAAa,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC;YAChC,SAAS,CAAC,aAAa,CAAC,CAAC;YACzB,IAAI,QAAQ,IAAI,KAAK,GAAG,CAAC,EAAE;gBACvB,MAAA,SAAS,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC,0CAAE,KAAK,EAAE,CAAC;aACzC;SACJ;IACL,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,KAA4C,EAAE,EAAE;;QACtF,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,EAAE;YAC1D,MAAA,SAAS,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC,0CAAE,KAAK,EAAE,CAAC;SACzC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,YACvC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,gBAEI,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE,EACxC,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAE,aAAa,CAAC,KAAK,CAAC,EAC/B,SAAS,EAAE,CAAC,EACZ,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAC7C,SAAS,EAAE,MAAM,CAAC,YAAY,IARzB,KAAK,CASZ,CACL,CAAC,GACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"NSBoxOTP.js","sourceRoot":"","sources":["../../src/components/NSBoxOTP.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAe,MAAM,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,MAAM,MAAM,uBAAuB,CAAA;AAQ1C,SAAS,QAAQ,CAAC,KAAoB;IAClC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAW,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;IAClE,MAAM,SAAS,GAAG,MAAM,CAA8B,EAAE,CAAC,CAAC;IAE1D,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,KAAoC,EAAE,EAAE;;QAC7E,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACpC,IAAI,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;YACxB,MAAM,aAAa,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC;YAClC,aAAa,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC;YAChC,SAAS,CAAC,aAAa,CAAC,CAAC;YACzB,IAAI,QAAQ,IAAI,KAAK,GAAG,CAAC,EAAE;gBACvB,MAAA,SAAS,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC,0CAAE,KAAK,EAAE,CAAC;aACzC;SACJ;QACD,IAAI,KAAK,CAAC,SAAS;YACrB,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,KAA4C,EAAE,EAAE;;QACtF,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,EAAE;YAC1D,MAAA,SAAS,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC,0CAAE,KAAK,EAAE,CAAC;SACzC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,YACvC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,gBAEI,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE,EACxC,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAE,aAAa,CAAC,KAAK,CAAC,EAC/B,SAAS,EAAE,CAAC,EACZ,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAC7C,SAAS,EAAE,MAAM,CAAC,YAAY,IARzB,KAAK,GAAG,EAAE,CASjB,CACL,CAAC,GACA,CACT,CAAC;AACN,CAAC;AAAA,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/NSLayoutAction.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { NSLayout } from './NSLayout';
 import { NSSpace, NSSpaceSizeType } from './NSSpace';
 import Styles from './NSLayoutAction.module.css';
@@ -13,9 +13,9 @@ export function NSLayoutAction(props) {
     });
     const filtered_actions = props.actions.filter((action) => action.group);
     return (_jsxs(NSLayout, Object.assign({}, props, { children: [_jsxs("div", { className: Styles.ns_action_bar_holder, children: [_jsxs("div", { className: `d-none d-lg-flex ${Styles.ns_desktop_action_bar_title}`, children: [_jsx("h1", { className: Styles.title, children: props.title }), props.description !== "" &&
-                                _jsxs("button", { className: Styles.ns_info_container, onClick: () => setState({ show: true }), children: [_jsx("img", { src: 'https://static.namirasoft.com/image/concept/info/white-blue.svg', alt: 'info-icon', width: 24, height: 24 }), _jsx("span", { children: " Info " })] }), _jsx(NSModal, { show: state.show, description: props.description, title: props.title, onClose: () => setState({ show: false }) })] }), _jsx("div", { className: Styles.ns_actions_hodler, children: filtered_actions.map((action) => _jsx(NSActionMenu, { group: action.group, items: action.items }, action.id)) })] }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("div", { className: `container d-block d-lg-none ${Styles.ns_mobile_action_bar_title}`, children: [_jsx("h1", { className: Styles.title, children: props.title }), props.description && lines &&
+                                _jsxs("button", { className: Styles.ns_info_container, onClick: () => setState({ show: true }), children: [_jsx("img", { src: 'https://static.namirasoft.com/image/concept/info/white-blue.svg', alt: 'info-icon', width: 24, height: 24 }), _jsx("span", { children: " Info " })] }), _jsx(NSModal, { show: state.show, description: props.description, title: props.title, onClose: () => setState({ show: false }) })] }), _jsx("div", { style: { padding: props.actions.length !== 0 ? "16px 0" : "0" }, className: Styles.ns_actions_hodler, children: filtered_actions.map((action) => _jsx(NSActionMenu, { group: action.group, items: action.items }, action.id)) })] }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("div", { className: `container d-block d-lg-none ${Styles.ns_mobile_action_bar_title}`, children: [_jsx("h1", { className: Styles.title, children: props.title }), props.description && lines &&
                         _jsxs(_Fragment, { children: [_jsx("p", { className: Styles.description, children: lines.map((line, index) => {
-                                        return (_jsxs("div", { children: [line.trim(), index !== lines.length - 1 && _jsx("br", {})] }, index));
+                                        return (_jsxs(React.Fragment, { children: [line.trim(), index !== lines.length - 1 && _jsx("br", {})] }, index));
                                     }) }), _jsx(NSSpace, { size: NSSpaceSizeType.MINI })] })] }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), props.children] })));
 }
 //# sourceMappingURL=NSLayoutAction.js.map

package/dist/components/NSLayoutAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSLayoutAction.js","sourceRoot":"","sources":["../../src/components/NSLayoutAction.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAkB,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAErD,OAAO,MAAM,MAAM,6BAA6B,CAAC;AACjD,OAAO,EAAsB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAapC,MAAM,UAAU,cAAc,CAAC,KAA2B;;IAEzD,IAAI,KAAK,GAAG,CAAC,MAAA,KAAK,CAAC,WAAW,mCAAI,EAAE,CAAC,CAAC,KAAK,CAAC,2BAA2B,CAAC,CAAC;IACzE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAsB;QACvD,IAAI,EAAE,KAAK;KACX,CAAC,CAAA;IAEF,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IAEvE,OAAO,CACN,MAAC,QAAQ,oBAAK,KAAK,eAClB,eAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,aAE1C,eAAK,SAAS,EAAE,oBAAoB,MAAM,CAAC,2BAA2B,EAAE,aACvE,aAAI,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,CAAC,KAAK,GAAM,EAE9C,KAAK,CAAC,WAAW,KAAK,EAAE;gCACxB,kBAAQ,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,aACnF,cAAK,GAAG,EAAC,iEAAiE,EAAC,GAAG,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,EACpH,oCAAmB,IACX,EAEV,KAAC,OAAO,IACP,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GACvC,IACG,EACN,cAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,YACtC,gBAAgB,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAChC,KAAC,YAAY,IAEZ,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,KAAK,EAAE,MAAM,CAAC,KAAK,IAFd,MAAM,CAAC,EAAE,CAGb,CACF,GACI,IACD,EACN,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,KAAK,GAAI,EAExC,eAAK,SAAS,EAAE,+BAA+B,MAAM,CAAC,0BAA0B,EAAE,aACjF,aAAI,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,CAAC,KAAK,GAAM,EAE9C,KAAK,CAAC,WAAW,IAAI,KAAK;wBAC1B,8BACC,YAAG,SAAS,EAAE,MAAM,CAAC,WAAW,YAE9B,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;wCAEzB,OAAO,CACN,0BACE,IAAI,CAAC,IAAI,EAAE,EACX,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,cAAM,KAF5B,KAAK,CAGT,CACN,CAAA;oCACF,CAAC,CAAC,GAEA,EACJ,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,IAAI,GAAI,IACrC,IAEC,EACN,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,KAAK,GAAI,EACvC,KAAK,CAAC,QAAQ,KACL,CACX,CAAC;AACH,CAAC"}
+{"version":3,"file":"NSLayoutAction.js","sourceRoot":"","sources":["../../src/components/NSLayoutAction.tsx"],"names":[],"mappings":"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"}

package/dist/components/NSLayoutAction.module.css

@@ -12,7 +12,7 @@
 
 .ns_action_bar_holder {
 	z-index: 1;
-	padding: 16px;
+	padding: 0 16px;
 	position: sticky;
 	top: 0;
 	background-color: #fff;

package/dist/components/NSModal.js

@@ -9,6 +9,6 @@ export function NSModal(props) {
     };
     return (_jsx("div", { className: Styles.ns_modal_container, onClick: props.onClose, children: _jsx("section", { id: props.id, className: `${props.show ? Styles.ns_show : Styles.ns_hide}
 					${Styles.ns_modal} 
-					${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: props.style, onClick: props.onClose, children: _jsxs("div", { className: Styles.ns_modal_container, onClick: handleModalClick, children: [_jsx(NSButton, { onClick: props.onClose, icon: { src: "https://static.namirasoft.com/image/concept/close/white.svg", alt: "close modal" }, classList: [Styles.ns_close_modal] }), _jsxs("div", { className: Styles.ns_modal_content, children: [props.column && (_jsxs(_Fragment, { children: [_jsx(NSTitle, { title: props.column }), _jsx(NSSpace, { size: NSSpaceSizeType.NORMAL })] })), props.title && (_jsxs(_Fragment, { children: [_jsx(NSTitle, { title: props.title }), _jsx(NSSpace, { size: NSSpaceSizeType.NORMAL })] })), props.description && (_jsx("div", { children: _jsx("p", { className: Styles.ns_modal_description, children: props.description }) })), props.children && (_jsx("div", { children: props.children }))] })] }) }) }));
+					${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: props.style, onClick: props.onClose, children: _jsxs("div", { className: Styles.ns_modal_container, onClick: handleModalClick, children: [_jsx(NSButton, { onClick: props.onClose, icon: { src: "https://static.namirasoft.com/image/concept/close/white.svg", alt: "close modal" }, classList: [Styles.ns_close_modal] }), _jsxs("div", { className: Styles.ns_modal_content, children: [props.column && (_jsxs(_Fragment, { children: [_jsx(NSTitle, { title: props.column }), _jsx(NSSpace, { size: NSSpaceSizeType.NORMAL })] })), props.title && (_jsxs(_Fragment, { children: [_jsx(NSTitle, { style: { marginBottom: "0" }, title: props.title }), _jsx(NSSpace, { size: NSSpaceSizeType.MEDUIM })] })), props.description && (_jsx("div", { children: _jsx("p", { style: { marginBottom: "0" }, className: Styles.ns_modal_description, children: props.description }) })), props.children && (_jsx("div", { children: props.children }))] })] }) }) }));
 }
 //# sourceMappingURL=NSModal.js.map

package/dist/components/NSModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSModal.js","sourceRoot":"","sources":["../../src/components/NSModal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AACjF,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,QAAQ,MAAM,YAAY,CAAC;AAUlC,MAAM,UAAU,OAAO,CAAC,KAAoB;;IAE3C,MAAM,gBAAgB,GAAG,CAAC,KAAuB,EAAE,EAAE;QAEpD,KAAK,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC,CAAC;IACF,OAAO,CACN,cAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,YAChE,kBACC,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO;OACvD,MAAM,CAAC,QAAQ;OACf,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAC/B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,KAAK,CAAC,OAAO,YAEtB,eAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,EAAE,OAAO,EAAE,gBAAgB,aACnE,KAAC,QAAQ,IACR,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,IAAI,EAAE,EAAE,GAAG,EAAE,6DAA6D,EAAE,GAAG,EAAE,aAAa,EAAE,EAChG,SAAS,EAAE,CAAC,MAAM,CAAC,cAAc,CAAC,GACjC,EACF,eAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,aACrC,KAAK,CAAC,MAAM,IAAI,CAChB,8BACC,KAAC,OAAO,IAAC,KAAK,EAAE,KAAK,CAAC,MAAM,GAAI,EAChC,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,MAAM,GAAI,IACvC,CACH,EACA,KAAK,CAAC,KAAK,IAAI,CACf,8BACC,KAAC,OAAO,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAI,EAC/B,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,MAAM,GAAI,IACvC,CACH,EACA,KAAK,CAAC,WAAW,IAAI,CACrB,wBACC,YAAG,SAAS,EAAE,MAAM,CAAC,oBAAoB,YAAG,KAAK,CAAC,WAAW,GAAK,GAC7D,CACN,EACA,KAAK,CAAC,QAAQ,IAAI,CAClB,wBACE,KAAK,CAAC,QAAQ,GACV,CACN,IACI,IACD,GACG,GACL,CACN,CAAC;AACH,CAAC"}
+{"version":3,"file":"NSModal.js","sourceRoot":"","sources":["../../src/components/NSModal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AACjF,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,QAAQ,MAAM,YAAY,CAAC;AAUlC,MAAM,UAAU,OAAO,CAAC,KAAoB;;IAE3C,MAAM,gBAAgB,GAAG,CAAC,KAAuB,EAAE,EAAE;QAEpD,KAAK,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC,CAAC;IACF,OAAO,CACN,cAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,YAChE,kBACC,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO;OACvD,MAAM,CAAC,QAAQ;OACf,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAC/B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,KAAK,CAAC,OAAO,YAEtB,eAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,EAAE,OAAO,EAAE,gBAAgB,aACnE,KAAC,QAAQ,IACR,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,IAAI,EAAE,EAAE,GAAG,EAAE,6DAA6D,EAAE,GAAG,EAAE,aAAa,EAAE,EAChG,SAAS,EAAE,CAAC,MAAM,CAAC,cAAc,CAAC,GACjC,EACF,eAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,aACrC,KAAK,CAAC,MAAM,IAAI,CAChB,8BACC,KAAC,OAAO,IAAC,KAAK,EAAE,KAAK,CAAC,MAAM,GAAI,EAChC,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,MAAM,GAAI,IACvC,CACH,EACA,KAAK,CAAC,KAAK,IAAI,CACf,8BACC,KAAC,OAAO,IAAC,KAAK,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,GAAI,EAC7D,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,MAAM,GAAI,IACvC,CACH,EACA,KAAK,CAAC,WAAW,IAAI,CACrB,wBACC,YAAG,KAAK,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,oBAAoB,YAAG,KAAK,CAAC,WAAW,GAAK,GAC3F,CACN,EACA,KAAK,CAAC,QAAQ,IAAI,CAClB,wBACE,KAAK,CAAC,QAAQ,GACV,CACN,IACI,IACD,GACG,GACL,CACN,CAAC;AACH,CAAC"}

package/dist/components/NSModal.module.css

@@ -1,10 +1,6 @@
 /* Modal */
 .ns_modal {
 	position: fixed;
-	top: 25%;
-	left: 25%;
-	border-radius: 8px;
-	padding: 24px;
 	margin: 0 16px;
 	z-index: 10;
 	color: rgba(20, 27, 92, 1);
@@ -21,23 +17,24 @@
 	align-items: center;
 	z-index: 99;
 	text-align: center;
+	padding: 0 12px;
 }
 
 .ns_modal_container {
 	background-color: #fff;
-	width: 50%;
-	height: 50%;
-	top: 25%;
-	left: 25%;
+	width: 100%;
+	max-width: 600px;
 	position: relative;
 	border-radius: 8px;
+	border-radius: 8px;
+	padding: 24px;
 }
 
 .ns_close_modal {
 	border: none;
 	position: absolute;
-	right: 0;
-	margin: 0 24px 0 0;
+	right: 24px;
+	margin: 0;
 	top: 24px;
 	width: 24px;
 	height: 24px;
@@ -59,9 +56,16 @@
 }
 
 .ns_show {
-	display: block;
+	display: flex;
 }
 
 .ns_hide {
 	display: none;
+}
+
+
+@media screen and (min-width: 554px) {
+	.ns_modal {
+		padding: 0;
+	}
 }

package/dist/components/NSVerification.d.ts

@@ -1,6 +1,8 @@
+import React from "react";
 import { IBaseComponentProps, IImageProps } from '../main';
 interface INSVerificationProps extends IBaseComponentProps {
     verificationType: string;
+    onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     image?: IImageProps;
 }
 declare function NSVerification(props: INSVerificationProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/NSVerification.js

@@ -1,10 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import vector from '../assets/images/verify.png';
 import NSBoxOTP from './NSBoxOTP';
 import Styles from './NSVerification.module.css';
 function NSVerification(props) {
     var _a, _b, _c, _d, _e;
-    return (_jsxs("div", { className: `${Styles.ns_verification_container} ${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: props.style, children: [_jsx("img", { src: (_c = (_b = props.image) === null || _b === void 0 ? void 0 : _b.src) !== null && _c !== void 0 ? _c : vector, alt: (_e = (_d = props.image) === null || _d === void 0 ? void 0 : _d.alt) !== null && _e !== void 0 ? _e : 'verification vector', className: Styles.ns_verification_vector }), _jsxs("p", { children: ["Please enter code sent to ", props.verificationType] }), _jsx(NSBoxOTP, {})] }));
+    const [values, setValue] = useState('');
+    function onChanged(event) {
+        setValue(prevValues => [...prevValues, event.target.value].join(''));
+        if (props.onChanged)
+            props.onChanged(event);
+        console.log(values);
+        return (values);
+    }
+    return (_jsxs("div", { className: `${Styles.ns_verification_container} ${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: props.style, children: [_jsx("img", { src: (_c = (_b = props.image) === null || _b === void 0 ? void 0 : _b.src) !== null && _c !== void 0 ? _c : vector, alt: (_e = (_d = props.image) === null || _d === void 0 ? void 0 : _d.alt) !== null && _e !== void 0 ? _e : 'verification vector', className: Styles.ns_verification_vector }), _jsxs("p", { children: ["Please enter code sent to ", props.verificationType] }), _jsx(NSBoxOTP, { onChanged: onChanged })] }));
 }
 export default NSVerification;
 //# sourceMappingURL=NSVerification.js.map

package/dist/components/NSVerification.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSVerification.js","sourceRoot":"","sources":["../../src/components/NSVerification.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAEhD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAOhD,SAAS,cAAc,CAAC,KAA0B;;IAC9C,OAAO,CACH,eACI,SAAS,EAAE,GAAG,MAAM,CAAC,yBAAyB,IAAI,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EACpF,KAAK,EAAE,KAAK,CAAC,KAAK,aAEZ,cACA,GAAG,EAAE,MAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,GAAG,mCAAI,MAAM,EAC/B,GAAG,EAAE,MAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,GAAG,mCAAI,qBAAqB,EAC9C,SAAS,EAAE,MAAM,CAAC,sBAAsB,GACtC,EACF,sDAA8B,KAAK,CAAC,gBAAgB,IAAK,EACzD,KAAC,QAAQ,KAAG,IACV,CACT,CAAC;AACN,CAAC;AAED,eAAe,cAAc,CAAC"}
+{"version":3,"file":"NSVerification.js","sourceRoot":"","sources":["../../src/components/NSVerification.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAEhD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAUhD,SAAS,cAAc,CAAC,KAA0B;;IAC9C,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAA;IAE/C,SAAS,SAAS,CAAC,KAA0C;QAE/D,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,GAAG,UAAU,EAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QACtE,IAAI,KAAK,CAAC,SAAS;YAClB,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QAClB,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QACpB,OAAO,CAAC,MAAM,CAAC,CAAC;IACvB,CAAC;IACE,OAAO,CACH,eACI,SAAS,EAAE,GAAG,MAAM,CAAC,yBAAyB,IAAI,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EACpF,KAAK,EAAE,KAAK,CAAC,KAAK,aAEZ,cACA,GAAG,EAAE,MAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,GAAG,mCAAI,MAAM,EAC/B,GAAG,EAAE,MAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,GAAG,mCAAI,qBAAqB,EAC9C,SAAS,EAAE,MAAM,CAAC,sBAAsB,GACtC,EACF,sDAA8B,KAAK,CAAC,gBAAgB,IAAK,EACzD,KAAC,QAAQ,IAAC,SAAS,EAAE,SAAS,GAAG,IAC/B,CACT,CAAC;AACN,CAAC;AAED,eAAe,cAAc,CAAC"}

package/dist/main.d.ts

@@ -1,3 +1,4 @@
+export * from "./components/NSActionMenu";
 export * from "./components/NSBoxBoolean";
 export * from "./components/NSBoxDate";
 export * from "./components/NSBoxDateTime";

package/dist/main.js

@@ -1,3 +1,4 @@
+export * from "./components/NSActionMenu";
 export * from "./components/NSBoxBoolean";
 export * from "./components/NSBoxDate";
 export * from "./components/NSBoxDateTime";

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iCAAiC,CAAC;AAChD,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iCAAiC,CAAC;AAChD,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "namirasoft-site-react",
-    "title": "Namirasoft Site React",
+    "title": "Namirasoft Site React NPM Package",
     "description": "Namira Software Corporation Site React NPM Package",
     "icon": "logo.png",
     "logo": "https://static.namirasoft.com/image/namirasoft/site/logo/name.png",
@@ -8,7 +8,7 @@
     "framework": "npm",
     "application": "package",
     "private": false,
-    "version": "1.3.166",
+    "version": "1.3.168",
     "author": "Amir Abolhasani, Alireza Esmaeeli, Sepideh Mazloumi, Hooman Shashaeh",
     "license": "MIT",
     "main": "./dist/main.js",
@@ -21,7 +21,7 @@
         "copy": "copyfiles -u 1 src/**/*.html src/**/*.css src/**/*.svg src/**/*.png src/**/*.jpg dist/"
     },
     "dependencies": {
-        "@types/node": "^20.12.12",
+        "@types/node": "^20.12.13",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
         "antd": "^5.17.4",

package/src/components/NSBox.module.css

@@ -11,6 +11,7 @@
 
 .ns_input_parent img {
 	position: absolute;
+	z-index: 2;
 	right: 5%;
 	top: 50%;
 }

package/src/components/NSBoxOTP.tsx

@@ -1,7 +1,13 @@
 import React, { useState, ChangeEvent, useRef } from 'react';
 import Styles from './NSBoxOTP.module.css'
+import { IBaseComponentProps } from '../main';
 
-const NSBoxOTP: React.FC = () => {
+interface INSBoxOTPProps extends IBaseComponentProps
+{
+    onChanged ?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+function NSBoxOTP(props:INSBoxOTPProps) {
     const [values, setValues] = useState<string[]>(Array(6).fill(''));
     const inputsRef = useRef<(HTMLInputElement | null)[]>([]);
 
@@ -15,6 +21,8 @@ const NSBoxOTP: React.FC = () => {
                 inputsRef.current[index + 1]?.focus();
             }
         }
+        if (props.onChanged)
+		    props.onChanged(event);
     };
 
     const handleKeyDown = (index: number) => (event: React.KeyboardEvent<HTMLInputElement>) => {
@@ -27,7 +35,7 @@ const NSBoxOTP: React.FC = () => {
         <div style={{ display: 'flex', gap: '10px' }}>
             {values.map((value, index) => (
                 <input
-                    key={index}
+                    key={index + 10}
                     ref={el => inputsRef.current[index] = el}
                     type="text"
                     value={value}

package/src/components/NSLayoutAction.module.css

@@ -12,7 +12,7 @@
 
 .ns_action_bar_holder {
 	z-index: 1;
-	padding: 16px;
+	padding: 0 16px;
 	position: sticky;
 	top: 0;
 	background-color: #fff;

package/src/components/NSLayoutAction.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import { NSLayout, INSLayoutProps } from './NSLayout';
 import { NSSpace, NSSpaceSizeType } from './NSSpace';
 import { IBaseComponentProps } from '../props/IBaseComponentProps';
@@ -46,7 +46,10 @@ export function NSLayoutAction(props: INSLayoutActionProps)
 						onClose={() => setState({ show: false })}
 					/>
 				</div>
-				<div className={Styles.ns_actions_hodler}>
+				<div
+					style={{ padding: props.actions.length !== 0 ? "16px 0" : "0" }}
+					className={Styles.ns_actions_hodler}
+				>
 					{filtered_actions.map((action) =>
 						<NSActionMenu
 							key={action.id}
@@ -68,10 +71,10 @@ export function NSLayoutAction(props: INSLayoutActionProps)
 								lines.map((line, index) =>
 								{
 									return (
-										<div key={index}>
+										<React.Fragment key={index}>
 											{line.trim()}
 											{index !== lines.length - 1 && <br />}
-										</div>
+										</React.Fragment>
 									)
 								})
 							}

package/src/components/NSModal.module.css

@@ -1,10 +1,6 @@
 /* Modal */
 .ns_modal {
 	position: fixed;
-	top: 25%;
-	left: 25%;
-	border-radius: 8px;
-	padding: 24px;
 	margin: 0 16px;
 	z-index: 10;
 	color: rgba(20, 27, 92, 1);
@@ -21,23 +17,24 @@
 	align-items: center;
 	z-index: 99;
 	text-align: center;
+	padding: 0 12px;
 }
 
 .ns_modal_container {
 	background-color: #fff;
-	width: 50%;
-	height: 50%;
-	top: 25%;
-	left: 25%;
+	width: 100%;
+	max-width: 600px;
 	position: relative;
 	border-radius: 8px;
+	border-radius: 8px;
+	padding: 24px;
 }
 
 .ns_close_modal {
 	border: none;
 	position: absolute;
-	right: 0;
-	margin: 0 24px 0 0;
+	right: 24px;
+	margin: 0;
 	top: 24px;
 	width: 24px;
 	height: 24px;
@@ -59,9 +56,16 @@
 }
 
 .ns_show {
-	display: block;
+	display: flex;
 }
 
 .ns_hide {
 	display: none;
+}
+
+
+@media screen and (min-width: 554px) {
+	.ns_modal {
+		padding: 0;
+	}
 }

package/src/components/NSModal.tsx

@@ -41,13 +41,13 @@ export function NSModal(props: INSModalProps)
 						)}
 						{props.title && (
 							<>
-								<NSTitle title={props.title} />
-								<NSSpace size={NSSpaceSizeType.NORMAL} />
+								<NSTitle style={{ marginBottom: "0" }} title={props.title} />
+								<NSSpace size={NSSpaceSizeType.MEDUIM} />
 							</>
 						)}
 						{props.description && (
 							<div>
-								<p className={Styles.ns_modal_description}>{props.description}</p>
+								<p style={{ marginBottom: "0" }} className={Styles.ns_modal_description}>{props.description}</p>
 							</div>
 						)}
 						{props.children && (

package/src/components/NSVerification.tsx

@@ -1,3 +1,4 @@
+import React, { useState } from "react";
 import vector from '../assets/images/verify.png'
 import { IBaseComponentProps, IImageProps } from '../main';
 import NSBoxOTP from './NSBoxOTP';
@@ -5,10 +6,23 @@ import Styles from './NSVerification.module.css'
 
 interface INSVerificationProps extends IBaseComponentProps {
     verificationType : string;
+    onChanged ?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     image ?: IImageProps;
 }
 
+
+
 function NSVerification(props:INSVerificationProps) {
+    const [values, setValue] = useState<string>('')
+
+    function onChanged(event: React.ChangeEvent<HTMLInputElement>): string | undefined
+	{
+		setValue(prevValues => [...prevValues , event.target.value].join(''));
+		if (props.onChanged)
+			props.onChanged(event);
+        console.log(values);
+        return (values);
+	}
     return (
         <div 
             className={`${Styles.ns_verification_container} ${props.classList?.join(" ")}`}
@@ -20,7 +34,7 @@ function NSVerification(props:INSVerificationProps) {
             className={Styles.ns_verification_vector}
             />
             <p>Please enter code sent to {props.verificationType}</p>
-            <NSBoxOTP />
+            <NSBoxOTP onChanged={onChanged}/>
         </div>
     );
 }

package/src/main.ts

@@ -1,3 +1,4 @@
+export * from "./components/NSActionMenu";
 export * from "./components/NSBoxBoolean";
 export * from "./components/NSBoxDate";
 export * from "./components/NSBoxDateTime";