namirasoft-site-react 1.3.19 → 1.3.21

package/dist/App.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { NSButtonBlue, NSButtonBlueVector, NSLayoutTitle, NSPagination } from './main';
+import { NSButtonBlue, NSButtonBlueVector, NSLayoutTitle, NSPagination, NSInputCopy } from './main';
 export function App() {
-    return (_jsx("div", { className: "App", children: _jsxs(NSLayoutTitle, { scope: 'Namirasoft Account Console', logo: '', title: "Namirasoft", description: 'paragraph', children: [_jsx(NSPagination, { page: 1, size: 25 }), _jsx(NSButtonBlue, { title: 'Apply', onClick: () => "" }), _jsx(NSButtonBlueVector, { title: 'New', onClick: () => "", vector: '/assets/images/add-vector.png' })] }) }));
+    return (_jsx("div", { className: "App", children: _jsxs(NSLayoutTitle, { scope: 'Namirasoft Account Console', logo: '', title: "Namirasoft", description: 'paragraph', children: [_jsx(NSPagination, { page: 1, size: 25 }), _jsx(NSButtonBlue, { title: 'Apply', onClick: () => "" }), _jsx(NSButtonBlueVector, { title: 'New', onClick: () => "", vector: '/assets/images/add-vector.png' }), _jsx(NSInputCopy, { title: "Your Token" })] }) }));
 }
 //# 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,YAAY,EAAE,kBAAkB,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAEvF,MAAM,UAAU,GAAG;IAEf,OAAO,CACH,cAAK,SAAS,EAAC,KAAK,YAChB,MAAC,aAAa,IAAC,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,YAAY,EAAC,WAAW,EAAC,WAAW,aAChG,KAAC,YAAY,IAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,GAAI,EACnC,KAAC,YAAY,IAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,GAAI,EACjD,KAAC,kBAAkB,IAAC,KAAK,EAAC,KAAK,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,MAAM,EAAC,+BAA+B,GAAG,IAChF,GACd,CACT,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,YAAY,EAAE,kBAAkB,EAAE,aAAa,EAAE,YAAY,EAAC,WAAW,EAAE,MAAM,QAAQ,CAAC;AAEnG,MAAM,UAAU,GAAG;IAEf,OAAO,CACH,cAAK,SAAS,EAAC,KAAK,YAChB,MAAC,aAAa,IAAC,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,YAAY,EAAC,WAAW,EAAC,WAAW,aAChG,KAAC,YAAY,IAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,GAAI,EACnC,KAAC,YAAY,IAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,GAAI,EACjD,KAAC,kBAAkB,IAAC,KAAK,EAAC,KAAK,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,MAAM,EAAC,+BAA+B,GAAG,EAC5F,KAAC,WAAW,IAAC,KAAK,EAAC,YAAY,GAAG,IACtB,GACd,CACT,CAAC;AACN,CAAC"}

package/dist/assets/images/icon-input-copy.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.8297 4.99144L9.54839 0.832127C9.4396 0.726307 9.29201 0.666788 9.13806 0.666656H7.22581C6.66115 0.666656 6.11962 0.884574 5.72035 1.27247C5.32108 1.66037 5.09677 2.18647 5.09677 2.73503V3.6752H4.12903C3.56438 3.6752 3.02285 3.89312 2.62358 4.28102C2.22431 4.66891 2 5.19501 2 5.74358V13.2649C2 13.8135 2.22431 14.3396 2.62358 14.7275C3.02285 15.1154 3.56438 15.3333 4.12903 15.3333H9.54839C10.113 15.3333 10.6546 15.1154 11.0538 14.7275C11.4531 14.3396 11.6774 13.8135 11.6774 13.2649V12.3248H11.871C12.4356 12.3248 12.9771 12.1069 13.3764 11.719C13.7757 11.3311 14 10.805 14 10.2564V5.36751C13.9939 5.22581 13.9331 5.09154 13.8297 4.99144ZM9.74194 2.59213L12.0181 4.80341H9.74194V2.59213ZM10.5161 13.2649C10.5161 13.5143 10.4142 13.7534 10.2327 13.9297C10.0512 14.1061 9.80505 14.2051 9.54839 14.2051H4.12903C3.87237 14.2051 3.62622 14.1061 3.44474 13.9297C3.26325 13.7534 3.16129 13.5143 3.16129 13.2649V5.74358C3.16129 5.49423 3.26325 5.25509 3.44474 5.07878C3.62622 4.90246 3.87237 4.80341 4.12903 4.80341H5.09677V10.2564C5.09677 10.805 5.32108 11.3311 5.72035 11.719C6.11962 12.1069 6.66115 12.3248 7.22581 12.3248H10.5161V13.2649ZM11.871 11.1966H7.22581C6.96915 11.1966 6.723 11.0975 6.54151 10.9212C6.36002 10.7449 6.25806 10.5057 6.25806 10.2564V2.73503C6.25806 2.48568 6.36002 2.24655 6.54151 2.07023C6.723 1.89391 6.96915 1.79486 7.22581 1.79486H8.58065V5.36751C8.58265 5.51651 8.64447 5.65887 8.75293 5.76424C8.86139 5.86961 9.00792 5.92967 9.16129 5.93161H12.8387V10.2564C12.8387 10.5057 12.7368 10.7449 12.5553 10.9212C12.3738 11.0975 12.1276 11.1966 11.871 11.1966Z" fill="#141B5C"/>
+</svg>

package/dist/components/NSInputCopy.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+export interface NSNSInputCopyProps {
+    title: string;
+    defaultValue?: string;
+    onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export interface NSNSInputCopyState {
+    value: string;
+}
+export declare class NSInputCopy extends React.Component<NSNSInputCopyProps, NSNSInputCopyState> {
+    constructor(props: NSNSInputCopyProps);
+    getValue(): string;
+    setValue(value: string): void;
+    private onChanged;
+    copyToClipboard(): void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}

package/dist/components/NSInputCopy.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import Styles from "./NSInputCopy.module.css";
+import IconInputString from '../assets/images/icon-input-copy.svg';
+export class NSInputCopy extends React.Component {
+    constructor(props) {
+        var _a;
+        super(props);
+        this.state = {
+            value: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : "",
+        };
+        this.getValue = this.getValue.bind(this);
+        this.setValue = this.setValue.bind(this);
+        this.onChanged = this.onChanged.bind(this);
+        this.copyToClipboard = this.copyToClipboard.bind(this);
+    }
+    getValue() {
+        return this.state.value;
+    }
+    setValue(value) {
+        this.setState({ value });
+    }
+    onChanged(e) {
+        this.setValue(e.target.value);
+        if (this.props.onChanged)
+            this.props.onChanged(e);
+    }
+    copyToClipboard() {
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+            navigator.clipboard.writeText(this.getValue());
+        }
+    }
+    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: IconInputString, alt: "icon", width: 16, height: 16, onClick: this.copyToClipboard }), _jsx("input", { value: this.state.value, onChange: this.onChanged, type: "text", className: Styles.ns_input, placeholder: "12AB34cf" })] }));
+    }
+}
+//# sourceMappingURL=NSInputCopy.js.map

package/dist/components/NSInputCopy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NSInputCopy.js","sourceRoot":"","sources":["../../src/components/NSInputCopy.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAC9C,OAAO,eAAe,MAAM,sCAAsC,CAAC;AAenE,MAAM,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAiD;IAEpF,YAAY,KAAyB;;QAEjC,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;QAC3C,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3D,CAAC;IACD,QAAQ;QAEJ,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;IACD,eAAe;QAEX,IAAI,SAAS,CAAC,SAAS,IAAI,SAAS,CAAC,SAAS,CAAC,SAAS,EACxD,CAAC;YACG,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QACnD,CAAC;IACL,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,eAAe,EACpB,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,OAAO,EAAE,IAAI,CAAC,eAAe,GAC/B,EACF,gBACI,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,QAAQ,EAAE,IAAI,CAAC,SAAS,EACxB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,WAAW,EAAC,UAAU,GACxB,IACA,CACT,CAAC;IACN,CAAC;CACJ"}

package/dist/components/NSInputCopy.module.css

@@ -0,0 +1,33 @@
+.ns_input_parent {
+    display: flex;
+    flex-direction: column;
+    width: 326px;
+    color: #fff;
+    position: relative;
+    max-width: 100%;
+}
+
+.ns_input {
+    border-radius: 8px;
+    padding: 10px 12px;
+    font-size: 16px;
+    font-weight: 400;
+    background-color: #0000;
+    text-align: center;
+    border: 1px solid rgba(20, 27, 92, 1);
+}
+
+.ns_input_icon {
+    position: absolute;
+    right: 20px;
+    top: 67%;
+    z-index: 1;
+}
+
+.ns_input_title {
+    font-size: 24px;
+    font-weight: 700;
+    color:rgba(20, 27, 92, 1);
+    text-align: center;
+    margin-bottom: 16px;
+}

package/dist/components/NSLoading.d.ts

@@ -0,0 +1,10 @@
+import { Component } from 'react';
+import { Background } from '../types/Background';
+interface NSLoadingProps {
+    background?: Background;
+    padding_bottom?: string;
+}
+export declare class NSLoading extends Component<NSLoadingProps> {
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/dist/components/NSLoading.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Component } from 'react';
+import Styles from './NSLoading.module.css';
+import { NSSection } from './NSSection';
+export class NSLoading extends Component {
+    render() {
+        return (_jsx(NSSection, { background: this.props.background, padding_bottom: this.props.padding_bottom, children: _jsx("div", { className: Styles.ns_loading_parent, children: _jsx("div", { className: Styles.ns_loader }) }) }));
+    }
+}
+//# sourceMappingURL=NSLoading.js.map

package/dist/components/NSLoading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NSLoading.js","sourceRoot":"","sources":["../../src/components/NSLoading.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AASxC,MAAM,OAAO,SAAU,SAAQ,SAAyB;IAE9C,MAAM;QAEd,OAAO,CACN,KAAC,SAAS,IAAC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,YACtF,cAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,YACvC,cAAK,SAAS,EAAE,MAAM,CAAC,SAAS,GAAQ,GACnC,GACK,CACZ,CAAC;IACH,CAAC;CACD"}

package/dist/components/NSLoading.module.css

@@ -0,0 +1,27 @@
+.ns_loading_parent {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin: 0 auto;
+}
+
+.ns_loader {
+	width: 50px;
+	height: 50px;
+	border-radius: 50%;
+	padding: 1px;
+	background: conic-gradient(#0000 10%, #001664) content-box;
+	-webkit-mask:
+		repeating-conic-gradient(#0000 0deg, #000 1deg 20deg, #0000 21deg 36deg),
+		radial-gradient(farthest-side, #0000 calc(100% - 9px), #000 calc(100% - 8px));
+	-webkit-mask-composite: destination-in;
+	mask-composite: intersect;
+	animation: s4 1s infinite steps(10);
+}
+
+@keyframes s4 {
+	to {
+		transform: rotate(1turn)
+	}
+}

package/dist/main.d.ts

@@ -7,6 +7,7 @@ export * from "./components/NSEntityCardBackground";
 export * from "./components/NSEntityBar";
 export * from "./components/NSFooter";
 export * from "./components/NSHeader";
+export * from "./components/NSInputCopy";
 export * from "./components/NSInputDate";
 export * from "./components/NSInputDuration";
 export * from "./components/NSInputEmail";

package/dist/main.js

@@ -7,6 +7,7 @@ export * from "./components/NSEntityCardBackground";
 export * from "./components/NSEntityBar";
 export * from "./components/NSFooter";
 export * from "./components/NSHeader";
+export * from "./components/NSInputCopy";
 export * from "./components/NSInputDate";
 export * from "./components/NSInputDuration";
 export * from "./components/NSInputEmail";

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,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,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,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,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,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC"}

package/package.json

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

package/src/App.tsx

@@ -1,6 +1,6 @@
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { NSButtonBlue, NSButtonBlueVector, NSLayoutTitle, NSPagination } from './main';
+import { NSButtonBlue, NSButtonBlueVector, NSLayoutTitle, NSPagination,NSInputCopy } from './main';
 
 export function App()
 {
@@ -10,6 +10,7 @@ export function App()
                 <NSPagination page={1} size={25} />
                 <NSButtonBlue title='Apply' onClick={() => ""} />
                 <NSButtonBlueVector title='New' onClick={() => ""} vector='/assets/images/add-vector.png' />
+                <NSInputCopy title="Your Token" />
             </NSLayoutTitle>
         </div>
     );

package/src/assets/images/icon-input-copy.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.8297 4.99144L9.54839 0.832127C9.4396 0.726307 9.29201 0.666788 9.13806 0.666656H7.22581C6.66115 0.666656 6.11962 0.884574 5.72035 1.27247C5.32108 1.66037 5.09677 2.18647 5.09677 2.73503V3.6752H4.12903C3.56438 3.6752 3.02285 3.89312 2.62358 4.28102C2.22431 4.66891 2 5.19501 2 5.74358V13.2649C2 13.8135 2.22431 14.3396 2.62358 14.7275C3.02285 15.1154 3.56438 15.3333 4.12903 15.3333H9.54839C10.113 15.3333 10.6546 15.1154 11.0538 14.7275C11.4531 14.3396 11.6774 13.8135 11.6774 13.2649V12.3248H11.871C12.4356 12.3248 12.9771 12.1069 13.3764 11.719C13.7757 11.3311 14 10.805 14 10.2564V5.36751C13.9939 5.22581 13.9331 5.09154 13.8297 4.99144ZM9.74194 2.59213L12.0181 4.80341H9.74194V2.59213ZM10.5161 13.2649C10.5161 13.5143 10.4142 13.7534 10.2327 13.9297C10.0512 14.1061 9.80505 14.2051 9.54839 14.2051H4.12903C3.87237 14.2051 3.62622 14.1061 3.44474 13.9297C3.26325 13.7534 3.16129 13.5143 3.16129 13.2649V5.74358C3.16129 5.49423 3.26325 5.25509 3.44474 5.07878C3.62622 4.90246 3.87237 4.80341 4.12903 4.80341H5.09677V10.2564C5.09677 10.805 5.32108 11.3311 5.72035 11.719C6.11962 12.1069 6.66115 12.3248 7.22581 12.3248H10.5161V13.2649ZM11.871 11.1966H7.22581C6.96915 11.1966 6.723 11.0975 6.54151 10.9212C6.36002 10.7449 6.25806 10.5057 6.25806 10.2564V2.73503C6.25806 2.48568 6.36002 2.24655 6.54151 2.07023C6.723 1.89391 6.96915 1.79486 7.22581 1.79486H8.58065V5.36751C8.58265 5.51651 8.64447 5.65887 8.75293 5.76424C8.86139 5.86961 9.00792 5.92967 9.16129 5.93161H12.8387V10.2564C12.8387 10.5057 12.7368 10.7449 12.5553 10.9212C12.3738 11.0975 12.1276 11.1966 11.871 11.1966Z" fill="#141B5C"/>
+</svg>

package/src/components/NSInputCopy.module.css

@@ -0,0 +1,33 @@
+.ns_input_parent {
+    display: flex;
+    flex-direction: column;
+    width: 326px;
+    color: #fff;
+    position: relative;
+    max-width: 100%;
+}
+
+.ns_input {
+    border-radius: 8px;
+    padding: 10px 12px;
+    font-size: 16px;
+    font-weight: 400;
+    background-color: #0000;
+    text-align: center;
+    border: 1px solid rgba(20, 27, 92, 1);
+}
+
+.ns_input_icon {
+    position: absolute;
+    right: 20px;
+    top: 67%;
+    z-index: 1;
+}
+
+.ns_input_title {
+    font-size: 24px;
+    font-weight: 700;
+    color:rgba(20, 27, 92, 1);
+    text-align: center;
+    margin-bottom: 16px;
+}

package/src/components/NSInputCopy.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import React from "react";
+import Styles from "./NSInputCopy.module.css";
+import IconInputString from '../assets/images/icon-input-copy.svg';
+
+
+export interface NSNSInputCopyProps
+{
+    title: string;
+    defaultValue?: string;
+    onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export interface NSNSInputCopyState
+{
+    value: string;
+}
+
+export class NSInputCopy extends React.Component<NSNSInputCopyProps, NSNSInputCopyState>
+{
+    constructor(props: NSNSInputCopyProps)
+    {
+        super(props);
+        this.state = {
+            value: props.defaultValue ?? "",
+        };
+        this.getValue = this.getValue.bind(this);
+        this.setValue = this.setValue.bind(this);
+        this.onChanged = this.onChanged.bind(this);
+        this.copyToClipboard = this.copyToClipboard.bind(this);
+    }
+    getValue(): string
+    {
+        return this.state.value;
+    }
+    setValue(value: string): void
+    {
+        this.setState({ value });
+    }
+    private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
+    {
+        this.setValue(e.target.value);
+        if (this.props.onChanged)
+            this.props.onChanged(e);
+    }
+    copyToClipboard(): void
+    {
+        if (navigator.clipboard && navigator.clipboard.writeText)
+        {
+            navigator.clipboard.writeText(this.getValue());
+        } 
+    }
+    override render()
+    {
+        return (
+            <div className={`${Styles.ns_input_parent} p-2`}>
+                <span className={Styles.ns_input_title}>{this.props.title}</span>
+                <img
+                    className={Styles.ns_input_icon}
+                    src={IconInputString}
+                    alt="icon"
+                    width={16}
+                    height={16}
+                    onClick={this.copyToClipboard}
+                />
+                <input
+                    value={this.state.value}
+                    onChange={this.onChanged}
+                    type="text"
+                    className={Styles.ns_input}
+                    placeholder="12AB34cf"
+                />
+            </div>
+        );
+    }
+}

package/src/components/NSLoading.module.css

@@ -0,0 +1,27 @@
+.ns_loading_parent {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin: 0 auto;
+}
+
+.ns_loader {
+	width: 50px;
+	height: 50px;
+	border-radius: 50%;
+	padding: 1px;
+	background: conic-gradient(#0000 10%, #001664) content-box;
+	-webkit-mask:
+		repeating-conic-gradient(#0000 0deg, #000 1deg 20deg, #0000 21deg 36deg),
+		radial-gradient(farthest-side, #0000 calc(100% - 9px), #000 calc(100% - 8px));
+	-webkit-mask-composite: destination-in;
+	mask-composite: intersect;
+	animation: s4 1s infinite steps(10);
+}
+
+@keyframes s4 {
+	to {
+		transform: rotate(1turn)
+	}
+}

package/src/components/NSLoading.tsx

@@ -0,0 +1,25 @@
+import { Component } from 'react';
+import Styles from './NSLoading.module.css';
+import { NSSection } from './NSSection';
+import { Background } from '../types/Background';
+
+interface NSLoadingProps
+{
+	background?: Background;
+	padding_bottom?: string;
+}
+
+export class NSLoading extends Component<NSLoadingProps>
+{
+	override render()
+	{
+		return (
+			<NSSection background={this.props.background} padding_bottom={this.props.padding_bottom}>
+				<div className={Styles.ns_loading_parent}>
+					<div className={Styles.ns_loader}></div>
+				</div>
+			</NSSection>
+		);
+	}
+}
+

package/src/main.ts

@@ -7,6 +7,7 @@ export * from "./components/NSEntityCardBackground";
 export * from "./components/NSEntityBar";
 export * from "./components/NSFooter";
 export * from "./components/NSHeader";
+export * from "./components/NSInputCopy";
 export * from "./components/NSInputDate";
 export * from "./components/NSInputDuration";
 export * from "./components/NSInputEmail";