namirasoft-site-react 1.3.196 → 1.3.198

package/dist/components/NSBoxTextArea.module.css

@@ -14,6 +14,7 @@
 	align-items: center;
 	position: relative;
 	width: 100%;
+	height: 100%;
 }
 
 .ns_text_area_icon_container {
@@ -38,6 +39,8 @@
 }
 
 .ns_btn_box {
+	opacity: 0;
+	visibility: hidden;
 	color: #000;
 	border: none;
 	cursor: pointer;
@@ -45,7 +48,7 @@
 	background-color: transparent;
 }
 
-.ns_input_parent:hover .ns_btn_box {
+.ns_text_area_parent:hover .ns_btn_box {
 	opacity: 1;
 	visibility: visible;
 	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
@@ -67,7 +70,8 @@
 	max-width: 100% !important;
 }
 
-.ns_full_screen input {
+.ns_full_screen textarea {
 	width: 100% !important;
 	max-width: 100%;
+	height: 100% !important;
 }

package/dist/components/NSBoxTime.js

@@ -37,7 +37,7 @@ export class NSBoxTime extends React.Component {
     }
     render() {
         var _a;
-        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${Styles.ns_input_parent} ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: this.props.style, children: [_jsxs("span", { className: Styles.ns_input_title, children: [" ", this.props.required && _jsx("span", { style: { color: "red" }, children: "*" }), " ", this.props.title, " "] }), _jsx("img", { className: Styles.ns_input_icon, src: IconInputTime, alt: "Time Icon", width: 24, height: 24 }), _jsx("input", { id: this.props.id, value: this.state.value, onChange: this.onChanged, type: "time", className: Styles.ns_input, placeholder: this.props.placeholder, step: "2" })] }), _jsx(NSBoxErrorNotifier, { error: this.state.error })] }));
+        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${Styles.ns_input_parent} ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: this.props.style, children: [_jsxs("span", { className: Styles.ns_input_title, children: [" ", this.props.required && _jsx("span", { style: { color: "red" }, children: "*" }), " ", this.props.title, " "] }), _jsx("input", { id: this.props.id, value: this.state.value, onChange: this.onChanged, type: "time", className: Styles.ns_input, placeholder: this.props.placeholder, step: "2", style: { background: `url(${IconInputTime}) white no-repeat scroll center right 16px` } })] }), _jsx(NSBoxErrorNotifier, { error: this.state.error })] }));
     }
 }
 //# sourceMappingURL=NSBoxTime.js.map

package/dist/components/NSBoxTime.js.map

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

package/dist/components/NSTabPage.module.css

@@ -42,4 +42,8 @@
     padding: 16px;
     border-radius: 0 8px 8px 8px;
     background-color: #fff;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 0;
+    border-right: 1px solid #ccc;
 }

package/package.json

@@ -8,7 +8,7 @@
     "framework": "npm",
     "application": "package",
     "private": false,
-    "version": "1.3.196",
+    "version": "1.3.198",
     "author": "Amir Abolhasani, Alireza Esmaeeli, Sepideh Mazloumi, Hooman Shashaeh",
     "license": "MIT",
     "main": "./dist/main.js",

package/src/App.css

@@ -10,4 +10,8 @@
     border-radius: 5px 0 0 5px;
     border: 1px solid rgba(47, 0, 236, 0.6) !important;
 }
-/*End Input Tell*/
+/*End Input Tell*/
+.ns_font_16_bold{
+    font-size: 16px;
+    font-weight: 600;
+}

package/src/App.tsx

@@ -1,6 +1,7 @@
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { NSBoxEmail, NSBoxPhone, NSBoxString, NSBoxText, NSBoxTextArea, NSLayout } from './main';
+import { NSBoxEmail, NSBoxPhone, NSBoxString, NSBoxText, NSBoxTextArea, NSLayout, NSTabPage } from './main';
+import { NSBoxLabel } from './components/NSBoxLabel';
 
 export function App()
 {
@@ -19,7 +20,26 @@ export function App()
 		{ src: "https://static.namirasoft.com/image/concept/logout/white.svg", alt: "", onClicked },
 		{ src: "https://static.namirasoft.com/image/concept/logout/white.svg", alt: "", onClicked },
 	];
-
+	let content1 = () => <>
+		<NSBoxLabel title="URL"><p style={{color:"#000"}}>http://URL.com</p></NSBoxLabel>
+		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
+		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
+		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
+		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
+		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
+		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
+		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
+		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
+		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
+		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
+	</>;
+	let content2 = () => <div>Content for Tab2</div>;
+	let content3 = () => <div>Content for Tab3</div>;
+	const tabs = [
+		{ title: 'Information', getContent: content1 },
+		{ title: 'Price History', getContent: content2 },
+		{ title: 'Price Estimator', getContent: content3 }
+	];
 	return (
 		<>
 			<NSLayout
@@ -33,11 +53,13 @@ export function App()
 				background=""
 			>
 				<>
-				<NSBoxEmail title='test' required={true}/>
+					<NSBoxEmail title='test' required={true} />
 					<NSBoxPhone title='test' required={true} />
 					<NSBoxString title='test' required={true} />
 					<NSBoxText title='test' required={true} />
 					<NSBoxTextArea title='test' required={true} />
+					<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
+					<NSTabPage tabs={tabs} />
 				</>
 			</NSLayout>
 		</>

package/src/components/NSBox.module.css

@@ -3,37 +3,14 @@
 	flex-direction: column;
 	width: fit-content;
 	color: #141B5C;
-	position: relative;
 	justify-content: center;
 	width: 272px;
 	max-width: 100%;
 }
 
-.ns_input_parent img {
-	position: absolute;
-	z-index: 2;
-	right: 5%;
-	top: 50%;
-}
-
-.ns_input_container {
-	display: flex;
-	align-items: center;
-	position: relative;
-	width: 100%;
-}
-
-.ns_input_icon_container {
-	margin: 0 !important;
-	position: absolute;
-	left: 12px;
-	right: 5%;
-	top: 25%;
-}
-
 .ns_input {
 	border-radius: 8px;
-	padding: 10px 12px 10px 12px;
+	padding: 10px 48px 10px 12px;
 	font-size: 16px;
 	font-weight: 400;
 	border: 1px solid rgba(0, 0, 0, 1) !important;
@@ -58,12 +35,6 @@
 	}
 }
 
-.ns_input_parent img {
-	position: absolute;
-	right: 5%;
-	top: 50%;
-}
-
 /*Start Input phone*/
 .ns_input_phone_parent input {
 	width: 100% !important;
@@ -79,6 +50,8 @@
 /*End Input phone*/
 
 .ns_btn_box {
+	opacity: 0;
+	visibility: hidden;
 	color: #000;
 	border: none;
 	cursor: pointer;

package/src/components/NSBoxBoolean.tsx

@@ -66,7 +66,6 @@ export class NSBoxBoolean extends React.Component<INSBoxBooleanProps, INSBoxBooe
 			<>
 				<div className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
 					<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
-
 					<div className={Styles.ns_checkbox_parent}  >
 						<input
 							id={this.props.id}

package/src/components/NSBoxDouble.tsx

@@ -66,13 +66,6 @@ export class NSBoxDouble extends React.Component<INSBoxDoubleProps, INSBoxDouble
 			<>
 				<div className={`${Styles.ns_input_parent}   ${this.props.classList?.join(" ")}`} style={this.props.style}>
 					<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
-					<img
-						className={Styles.ns_input_icon}
-						src={IconInputFloat}
-						alt="Flaot Icon"
-						width={24}
-						height={24}
-					/>
 					<input
 						id={this.props.id}
 						value={this.state.value}
@@ -83,6 +76,8 @@ export class NSBoxDouble extends React.Component<INSBoxDoubleProps, INSBoxDouble
 						pattern="[0-9]*[.,]?[0-9]*"
 						className={Styles.ns_input}
 						placeholder={this.props.placeholder}
+						style={{ background: `url(${IconInputFloat}) white no-repeat scroll center right 16px` }}
+
 					/>
 				</div>
 				<NSBoxErrorNotifier error={this.state.error} />

package/src/components/NSBoxDuration.tsx

@@ -67,13 +67,6 @@ export class NSBoxDuration extends React.Component<INSBoxDurationProps, INSBoxDu
 			<>
 				<div className={`${Styles.ns_input_parent}   ${this.props.classList?.join(" ")}`} style={this.props.style}>
 					<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
-					<img
-						className={Styles.ns_input_icon}
-						src={IconInputDuration}
-						alt="Duration Icon"
-						width={24}
-						height={24}
-					/>
 					<input
 						id={this.props.id}
 						value={this.state.value}
@@ -82,6 +75,7 @@ export class NSBoxDuration extends React.Component<INSBoxDurationProps, INSBoxDu
 						className={Styles.ns_input}
 						placeholder={this.props.placeholder}
 						step="2"
+						style={{ background: `url(${IconInputDuration}) white no-repeat scroll center right 16px` }}
 					/>
 				</div>
 				<NSBoxErrorNotifier error={this.state.error} />

package/src/components/NSBoxEmail.tsx

@@ -27,7 +27,8 @@ export interface INSBoxEmailState
 	isFullScreen: boolean;
 }
 
-export class NSBoxEmail extends React.Component<INSBoxEmailProps, INSBoxEmailState> {
+export class NSBoxEmail extends React.Component<INSBoxEmailProps, INSBoxEmailState>
+{
 	constructor(props: INSBoxEmailProps)
 	{
 		super(props);
@@ -54,7 +55,7 @@ export class NSBoxEmail extends React.Component<INSBoxEmailProps, INSBoxEmailSta
 		{
 			this.setState({ error });
 			// throw new Error(error);
-			return ''; 
+			return '';
 		}
 		return this.state.value;
 	}
@@ -106,13 +107,6 @@ export class NSBoxEmail extends React.Component<INSBoxEmailProps, INSBoxEmailSta
 							</button>
 						</div>
 					</div>
-					<img
-						className={Styles.ns_input_icon}
-						src={IconInputEmail}
-						alt="Email Icon"
-						width={24}
-						height={24}
-					/>
 					<input
 						id={this.props.id}
 						value={this.state.value}
@@ -120,6 +114,7 @@ export class NSBoxEmail extends React.Component<INSBoxEmailProps, INSBoxEmailSta
 						type="email"
 						className={Styles.ns_input}
 						placeholder={this.props.placeholder}
+						style={{ background: `url(${IconInputEmail}) white no-repeat scroll center right 16px` }}
 					/>
 				</div>
 				<NSBoxErrorNotifier error={this.state.error} />

package/src/components/NSBoxIPV4.tsx

@@ -69,13 +69,6 @@ export class NSBoxIPV4 extends React.Component<INSBoxIPV4Props, INSBoxIPV4State>
 			<>
 				<div className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
 					<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
-					<img
-						className={Styles.ns_input_icon}
-						src={IconInputIP}
-						alt="IP Icon"
-						width={24}
-						height={24}
-					/>
 					<input
 						id={this.props.id}
 						value={this.state.value}
@@ -87,6 +80,7 @@ export class NSBoxIPV4 extends React.Component<INSBoxIPV4Props, INSBoxIPV4State>
 						maxLength={15}
 						size={15}
 						pattern={IPV4_PATTERN}
+						style={{ background: `url(${IconInputIP}) white no-repeat scroll center right 16px` }}
 					/>
 				</div>
 				<NSBoxErrorNotifier error={this.state.error} />

package/src/components/NSBoxIPV6.tsx

@@ -69,13 +69,6 @@ export class NSBoxIPV6 extends React.Component<INSBoxIPV6Props, INSBoxIPV6State>
 			<>
 				<div className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
 					<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
-					<img
-						className={Styles.ns_input_icon}
-						src={IconInputIP}
-						alt="IP Icon"
-						width={24}
-						height={24}
-					/>
 					<input
 						id={this.props.id}
 						value={this.state.value}
@@ -84,6 +77,7 @@ export class NSBoxIPV6 extends React.Component<INSBoxIPV6Props, INSBoxIPV6State>
 						className={Styles.ns_input}
 						placeholder={this.props.placeholder}
 						pattern={IPV6_PATTERN}
+						style={{ background: `url(${IconInputIP}) white no-repeat scroll center right 16px` }}
 					/>
 				</div>
 				<NSBoxErrorNotifier error={this.state.error} />

package/src/components/NSBoxInteger.tsx

@@ -66,13 +66,6 @@ export class NSBoxInteger extends React.Component<INSBoxIntegerProps, INSBoxInte
 			<>
 				<div className={`${Styles.ns_input_parent}   ${this.props.classList?.join(" ")}`} style={this.props.style}>
 					<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
-					<img
-						className={Styles.ns_input_icon}
-						src={IconInputInteger}
-						alt="Integer Icon"
-						width={24}
-						height={24}
-					/>
 					<input
 						id={this.props.id}
 						value={this.state.value}
@@ -80,6 +73,7 @@ export class NSBoxInteger extends React.Component<INSBoxIntegerProps, INSBoxInte
 						type="number"
 						className={Styles.ns_input}
 						placeholder={this.props.placeholder}
+						style={{ background: `url(${IconInputInteger}) white no-repeat scroll center right 16px` }}
 					/>
 				</div>
 				<NSBoxErrorNotifier error={this.state.error} />

package/src/components/NSBoxLabel.module.css

@@ -0,0 +1,13 @@
+.ns_box_label_title {
+    color: hsla(234, 64%, 22%, 1);
+    margin-bottom: 8px;
+}
+
+
+.ns_tab_item {
+    padding: 8px;
+    border-right: none !important;
+}
+.ns_tab_item:not(:last-child) {
+    border-right: 1px solid #ccc;
+}

package/src/components/NSBoxLabel.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import Styles from './NSBoxLabel.module.css'
+import React from "react";
+import { ReactNode } from "react";
+
+export interface INSBoxLabelProps
+{
+    title: string;
+    children: ReactNode;
+}
+
+export interface INSBoxLabelState
+{ }
+
+export class NSBoxLabel extends React.Component<INSBoxLabelProps, INSBoxLabelState>
+{
+    override render()
+    {
+        return (
+            <div className={Styles.ns_tab_item}>
+                <span className={`${Styles.ns_box_label_title} ns_font_16_bold`}>{this.props.title}</span>
+                <div>
+                    {this.props.children}
+                </div>
+            </div>
+        );
+    }
+}

package/src/components/NSBoxPassword.tsx

@@ -66,13 +66,6 @@ export class NSBoxPassword extends React.Component<INSBoxPasswordProps, INSBoxPa
 			<>
 				<div className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
 					<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
-					<img
-						className={Styles.ns_input_icon}
-						src={IconInputString}
-						alt="Password Icon"
-						width={24}
-						height={24}
-					/>
 					<input
 						id={this.props.id}
 						value={this.state.value}
@@ -80,6 +73,7 @@ export class NSBoxPassword extends React.Component<INSBoxPasswordProps, INSBoxPa
 						type="password"
 						className={Styles.ns_input}
 						placeholder={this.props.placeholder}
+						style={{ background: `url(${IconInputString}) white no-repeat scroll center right 16px` }}
 					/>
 				</div>
 				<NSBoxErrorNotifier error={this.state.error} />

package/src/components/NSBoxPhone.tsx

@@ -2,9 +2,9 @@
 
 import React from "react";
 import Styles from "./NSBox.module.css";
-import IconInputPhone from '../assets/images/icon-input-phone.svg';
 import IconFullScreen from '../assets/images/icon-fullscreen.png';
 import IconCopy from '../assets/images/icon-copy.png';
+import PhoneIcon from '../assets/images/icon-input-phone.svg';
 import PhoneInput from 'react-phone-input-2'
 import 'react-phone-input-2/lib/style.css'
 import { IBaseComponentProps } from "../props/IBaseComponentProps";
@@ -53,7 +53,7 @@ export class NSBoxPhone extends React.Component<INSBoxPhoneProps, INSBoxPhoneSta
 		{
 			this.setState({ error });
 			// throw new Error(error);
-			return ''; 
+			return '';
 		}
 		return this.state.value;
 	}
@@ -92,19 +92,16 @@ export class NSBoxPhone extends React.Component<INSBoxPhoneProps, INSBoxPhoneSta
 							</button>
 						</div>
 					</div>
-					<img
-						className={Styles.ns_input_icon}
-						src={IconInputPhone}
-						alt="Phone Icon"
-						width={24}
-						height={24}
-					/>
 					<PhoneInput
 						value={this.state.value}
 						onChange={this.setValue}
 						country={'us'}
-						inputClass={Styles.ns_input}
+						inputClass={Styles.PhoneIconns_input}
 						placeholder={this.props.placeholder}
+						inputStyle={{
+							background: `url(${PhoneIcon}) white no-repeat scroll center right 16px`,
+							backgroundSize: "24px"
+						}}
 					/>
 				</div >
 				<NSBoxErrorNotifier error={this.state.error} />

package/src/components/NSBoxPrice.tsx

@@ -66,13 +66,6 @@ export class NSBoxPrice extends React.Component<INSBoxPriceProps, INSBoxPriceSta
 			<>
 				<div className={`${Styles.ns_input_parent}   ${this.props.classList?.join(" ")}`} style={this.props.style}>
 					<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
-					<img
-						className={Styles.ns_input_icon}
-						src={IconInputFloat}
-						alt="Flaot Icon"
-						width={24}
-						height={24}
-					/>
 					<input
 						id={this.props.id}
 						value={this.state.value}
@@ -82,6 +75,7 @@ export class NSBoxPrice extends React.Component<INSBoxPriceProps, INSBoxPriceSta
 						min="0"
 						className={Styles.ns_input}
 						placeholder={this.props.placeholder}
+						style={{ background: `url(${IconInputFloat}) white no-repeat scroll center right 16px` }}
 					/>
 				</div>
 				<NSBoxErrorNotifier error={this.state.error} />

package/src/components/NSBoxSearch.tsx

@@ -7,6 +7,7 @@ import { IValidationProps } from "../props/IValidationProps";
 import { IValidationStringProps } from "../props/IValidationStringProps";
 import { Validator } from "../Validator";
 import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
+import IconInputSearch from "../assets/images/icon-input-search.svg";
 
 export interface INSBoxSearchProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
 {
@@ -67,14 +68,6 @@ export class NSBoxSearch extends React.Component<INSBoxSearchProps, INSBoxSearch
 				<div className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
 					<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }}>*</span>} {this.props.title} </span>
 					<div className={Styles.ns_input_container}>
-						<figure className={Styles.ns_input_icon_container}>
-							<img
-								src="https://static.namirasoft.com/image/concept/magnifier/blue.svg"
-								alt="input-icon"
-								width={24}
-								height={24}
-							/>
-						</figure>
 						<input
 							id={this.props.id}
 							value={this.state.value}
@@ -82,6 +75,7 @@ export class NSBoxSearch extends React.Component<INSBoxSearchProps, INSBoxSearch
 							type="text"
 							className={Styles.ns_input}
 							placeholder={this.props.placeholder}
+							style={{ background: `url(${IconInputSearch}) white no-repeat scroll center right 16px` }}
 						/>
 					</div>
 				</div>

package/src/components/NSBoxString.tsx

@@ -52,7 +52,7 @@ export class NSBoxString extends React.Component<INSBoxStringProps, INSBoxString
 		{
 			this.setState({ error });
 			// throw new Error(error);
-			return ''; 
+			return '';
 		}
 		return this.state.value;
 	}
@@ -98,13 +98,6 @@ export class NSBoxString extends React.Component<INSBoxStringProps, INSBoxString
 							</button>
 						</div>
 					</div>
-					<img
-						className={Styles.ns_input_icon}
-						src={IconInputString}
-						alt="String Icon"
-						width={24}
-						height={24}
-					/>
 					<input
 						id={this.props.id}
 						value={this.state.value}
@@ -112,6 +105,7 @@ export class NSBoxString extends React.Component<INSBoxStringProps, INSBoxString
 						type="text"
 						className={Styles.ns_input}
 						placeholder={this.props.placeholder}
+						style={{ background: `url(${IconInputString}) white no-repeat scroll center right 16px` }}
 					/>
 				</div>
 				<NSBoxErrorNotifier error={this.state.error} />

package/src/components/NSBoxText.tsx

@@ -27,7 +27,8 @@ export interface INSBoxTextState
 	isFullScreen: boolean;
 }
 
-export class NSBoxText extends React.Component<INSBoxTextProps, INSBoxTextState> {
+export class NSBoxText extends React.Component<INSBoxTextProps, INSBoxTextState>
+{
 	constructor(props: INSBoxTextProps)
 	{
 		super(props);
@@ -108,13 +109,6 @@ export class NSBoxText extends React.Component<INSBoxTextProps, INSBoxTextState>
 							</button>
 						</div>
 					</div>
-					<img
-						className={Styles.ns_input_icon}
-						src={IconInputText}
-						alt="Text Icon"
-						width={24}
-						height={24}
-					/>
 					<input
 						id={this.props.id}
 						value={this.state.value}
@@ -122,6 +116,7 @@ export class NSBoxText extends React.Component<INSBoxTextProps, INSBoxTextState>
 						type="text"
 						className={Styles.ns_input}
 						placeholder={this.props.placeholder}
+						style={{ background: `url(${IconInputText}) white no-repeat scroll center right 16px` }}
 					/>
 				</div>
 				<NSBoxErrorNotifier error={this.state.error} />

package/src/components/NSBoxTextArea.module.css

@@ -14,6 +14,7 @@
 	align-items: center;
 	position: relative;
 	width: 100%;
+	height: 100%;
 }
 
 .ns_text_area_icon_container {
@@ -38,6 +39,8 @@
 }
 
 .ns_btn_box {
+	opacity: 0;
+	visibility: hidden;
 	color: #000;
 	border: none;
 	cursor: pointer;
@@ -45,7 +48,7 @@
 	background-color: transparent;
 }
 
-.ns_input_parent:hover .ns_btn_box {
+.ns_text_area_parent:hover .ns_btn_box {
 	opacity: 1;
 	visibility: visible;
 	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
@@ -67,7 +70,8 @@
 	max-width: 100% !important;
 }
 
-.ns_full_screen input {
+.ns_full_screen textarea {
 	width: 100% !important;
 	max-width: 100%;
+	height: 100% !important;
 }