From 425fcbedfad843816ae2aa0e0585a886ca63c3e5 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Fri, 19 Jul 2024 15:28:02 +0200
Subject: [PATCH 1/6] :bug: fixing font family in datefield

---
 .../Components/DesignSystem/Form/DateField/classes.module.scss  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/front/Components/DesignSystem/Form/DateField/classes.module.scss b/src/front/Components/DesignSystem/Form/DateField/classes.module.scss
index 8cfc21c9..8fad4077 100644
--- a/src/front/Components/DesignSystem/Form/DateField/classes.module.scss
+++ b/src/front/Components/DesignSystem/Form/DateField/classes.module.scss
@@ -13,7 +13,7 @@
 		width: 100%;
 		height: 70px;
 		border: 1px solid var(--color-neutral-200);
-
+		font-family: var(--font-text-family);
 		&:disabled {
 			cursor: not-allowed;
 		}

From ada4dadc09c89d6ef7e1b44db36e0ec04b251b02 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Fri, 19 Jul 2024 15:28:44 +0200
Subject: [PATCH 2/6] :bug: Fixing header in update folder

---
 .../Components/Layouts/Folder/UpdateFolderMetadata/index.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx b/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx
index 1c8dee00..45e65165 100644
--- a/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx
+++ b/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx
@@ -87,7 +87,7 @@ export default function UpdateFolderMetadata() {
 	const defaultValue = openingDate.toISOString().split("T")[0];
 
 	return (
-		<DefaultDoubleSidePage title={"Ajouter client(s)"} image={backgroundImage}>
+		<DefaultDoubleSidePage title={"Ajouter client(s)"} image={backgroundImage} showHeader>
 			<div className={classes["root"]}>
 				<div className={classes["back-arrow"]}>
 					<BackArrow url={backwardPath} />

From 0fb3069d8f390ba0a4133c57219e82f89c2e3d95 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Fri, 19 Jul 2024 15:51:39 +0200
Subject: [PATCH 3/6] :sparkles: Number picker done

---
 .../Elements/NumberPicker/classes.module.scss          | 10 +++++++---
 src/front/Components/Elements/NumberPicker/index.tsx   |  4 ++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/front/Components/Elements/NumberPicker/classes.module.scss b/src/front/Components/Elements/NumberPicker/classes.module.scss
index 0768ef30..04ead720 100644
--- a/src/front/Components/Elements/NumberPicker/classes.module.scss
+++ b/src/front/Components/Elements/NumberPicker/classes.module.scss
@@ -4,16 +4,20 @@
 	align-items: center;
 	width: fit-content;
 	border: 1px solid #e7e7e7;
-	padding: 24px;
-
+	padding: var(--spacing-1-5, 12px) var(--spacing-md, 16px);
+	gap: var(--spacing-2, 16px);
 	.button {
 		border: none;
 		background: none;
+		padding: 0;
+		height: 24px;
+		width: 24px;
 		cursor: pointer;
 	}
 
 	.input {
-		width: 50px;
+		width: 40px;
+		height: 40px;
 		text-align: center;
 		border: none;
 	}
diff --git a/src/front/Components/Elements/NumberPicker/index.tsx b/src/front/Components/Elements/NumberPicker/index.tsx
index 5bb08189..c69a3e34 100644
--- a/src/front/Components/Elements/NumberPicker/index.tsx
+++ b/src/front/Components/Elements/NumberPicker/index.tsx
@@ -35,11 +35,11 @@ export default function NumberPicker(props: IProps) {
 	return (
 		<div className={classes["root"]}>
 			<button onClick={handleMinus} disabled={min && value <= min ? true : false} className={classes["button"]}>
-				<MinusIcon width="20" height="20" />
+				<MinusIcon width="24" height="24" />
 			</button>
 			<input type="number" value={value} onChange={handleChange} disabled={disabled} className={classes["input"]} />
 			<button onClick={handlePlus} disabled={max && value >= max ? true : false} className={classes["button"]}>
-				<PlusIcon width="20" height="20" />
+				<PlusIcon width="24" height="24" />
 			</button>
 		</div>
 	);

From 38a8931993a2ea2a94cd9dcc8fa0e87f0d2ef967 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Fri, 19 Jul 2024 16:19:29 +0200
Subject: [PATCH 4/6] :sparkles: New base text field

---
 .../DesignSystem/Form/BaseField.tsx           |   1 +
 .../NewTextField/classes.module.scss          | 112 ++++++++++++++++++
 .../Form/NewFields/NewTextField/index.tsx     |  63 ++++++++++
 .../DesignSystem/Typography/index.tsx         |   2 +
 .../Components/Layouts/DesignSystem/index.tsx |  10 ++
 5 files changed, 188 insertions(+)
 create mode 100644 src/front/Components/DesignSystem/Form/NewFields/NewTextField/classes.module.scss
 create mode 100644 src/front/Components/DesignSystem/Form/NewFields/NewTextField/index.tsx

diff --git a/src/front/Components/DesignSystem/Form/BaseField.tsx b/src/front/Components/DesignSystem/Form/BaseField.tsx
index 08be103f..2982bc93 100644
--- a/src/front/Components/DesignSystem/Form/BaseField.tsx
+++ b/src/front/Components/DesignSystem/Form/BaseField.tsx
@@ -15,6 +15,7 @@ export type IProps = {
 	disableValidation?: boolean;
 	validationError?: ValidationError;
 	disabled?: boolean;
+	label?: string;
 };
 
 type IState = {
diff --git a/src/front/Components/DesignSystem/Form/NewFields/NewTextField/classes.module.scss b/src/front/Components/DesignSystem/Form/NewFields/NewTextField/classes.module.scss
new file mode 100644
index 00000000..5a5d2ef1
--- /dev/null
+++ b/src/front/Components/DesignSystem/Form/NewFields/NewTextField/classes.module.scss
@@ -0,0 +1,112 @@
+@import "@Themes/constants.scss";
+
+.root {
+	position: relative;
+
+	&[data-is-disabled="true"] {
+		opacity: var(--opacity-disabled, 0.3);
+		.input-container {
+			cursor: not-allowed;
+			border: 1px solid var(--input-main-border-default, #d7dce0);
+			&::placeholder {
+				background: var(--input-background, #fff);
+			}
+
+			&:hover {
+				border: 1px solid var(--input-main-border-default, #d7dce0);
+			}
+
+			.input {
+				cursor: not-allowed;
+			}
+		}
+	}
+
+	.label {
+		padding: 0px var(--spacing-2, 16px);
+	}
+
+	.input-container {
+		display: flex;
+		padding: var(--spacing-2, 16px) var(--spacing-sm, 8px);
+		align-items: center;
+		gap: var(--spacing-2, 16px);
+
+		border-radius: var(--input-radius, 0px);
+		border: 1px solid var(--input-main-border-default, #d7dce0);
+		background: var(--input-background, #fff);
+
+		&:hover {
+			border: 1px solid var(--input-main-border-hovered, #b4bec5);
+		}
+
+		&:not([data-value=""]) {
+			border: 1px solid var(--input-main-border-filled, #6d7e8a);
+			.input {
+				font-weight: var(--font-text-weight-semibold, 600);
+			}
+		}
+
+		&[data-is-errored="true"] {
+			border: 1px solid var(--input-error, #dc2625);
+		}
+
+		&:focus,
+		&:focus-within,
+		&:focus-visible {
+			border: 1px solid var(--input-main-border-focused, #005bcb);
+			.input {
+				font-weight: var(--font-text-weight-semibold, 600);
+			}
+		}
+
+		.input {
+			display: flex;
+			padding: 0px var(--spacing-2, 16px);
+
+			align-items: center;
+			gap: 8px;
+
+			flex: 1 0 0;
+			border: none;
+
+			&::placeholder {
+				color: var(--input-placeholder-empty, #6d7e8a);
+				/* text/md/regular */
+				font-family: var(--font-text-family, Poppins);
+				font-size: 16px;
+				font-style: normal;
+				font-weight: var(--font-text-weight-regular, 400);
+				line-height: normal;
+				letter-spacing: 0.08px;
+			}
+
+			&[type="number"] {
+				&::-webkit-inner-spin-button,
+				&::-webkit-outer-spin-button {
+					-webkit-appearance: none;
+					margin: 0;
+				}
+
+				/* For Chrome, Safari, and Opera */
+				&::-webkit-inner-spin-button,
+				&::-webkit-outer-spin-button {
+					-webkit-appearance: none;
+					margin: 0;
+				}
+
+				/* For IE 10+ */
+				&::-ms-inner-spin-button,
+				&::-ms-outer-spin-button {
+					display: none;
+				}
+			}
+		}
+	}
+
+	.copy-icon {
+		cursor: pointer;
+		height: 24px;
+		width: 24px;
+	}
+}
diff --git a/src/front/Components/DesignSystem/Form/NewFields/NewTextField/index.tsx b/src/front/Components/DesignSystem/Form/NewFields/NewTextField/index.tsx
new file mode 100644
index 00000000..ab14094f
--- /dev/null
+++ b/src/front/Components/DesignSystem/Form/NewFields/NewTextField/index.tsx
@@ -0,0 +1,63 @@
+import React from "react";
+import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
+import { ReactNode } from "react";
+import CopyIcon from "@Assets/Icons/copy.svg";
+import BaseField, { IProps as IBaseFieldProps } from "../../BaseField";
+import classes from "./classes.module.scss";
+import classnames from "classnames";
+import Image from "next/image";
+
+export type IProps = IBaseFieldProps & {
+	canCopy?: boolean;
+	password?: boolean;
+};
+
+export default class NewTextField extends BaseField<IProps> {
+	constructor(props: IProps) {
+		super(props);
+		this.state = this.getDefaultState();
+	}
+
+	public override render(): ReactNode {
+		const value = this.state.value ?? "";
+		console.log(this.hasError());
+		return (
+			<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
+				<div className={classes["root"]} data-is-disabled={this.props.disabled}>
+					<label>
+						{this.props.label && (
+							<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.INPUT_LABEL} className={classes["label"]}>
+								{this.props.label}
+							</Typography>
+						)}
+						<div className={classes["input-container"]} data-value={value} data-is-errored={this.hasError().toString()}>
+							<input
+								onChange={this.onChange}
+								className={classnames(classes["input"], this.props.className)}
+								placeholder={this.props.placeholder}
+								value={value}
+								onFocus={this.onFocus}
+								onBlur={this.onBlur}
+								name={this.props.name}
+								disabled={this.props.disabled}
+								type={this.props.password ? "password" : "text"}
+							/>
+							{this.props.canCopy && (
+								<div className={classes["copy-icon"]} onClick={this.onCopyClick}>
+									<Image src={CopyIcon} alt="Copy icon" />
+								</div>
+							)}
+						</div>
+					</label>
+				</div>
+				{this.hasError() && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
+			</Typography>
+		);
+	}
+
+	private onCopyClick = (): void => {
+		if (this.props.canCopy) {
+			navigator.clipboard.writeText(this.state.value ?? "");
+		}
+	};
+}
diff --git a/src/front/Components/DesignSystem/Typography/index.tsx b/src/front/Components/DesignSystem/Typography/index.tsx
index 86dd26dc..44fa4c03 100644
--- a/src/front/Components/DesignSystem/Typography/index.tsx
+++ b/src/front/Components/DesignSystem/Typography/index.tsx
@@ -144,6 +144,8 @@ export enum ETypoColor {
 
 	TABS_CONTRAST_DEFAULT = "--tabs-contrast-default",
 	TABS_CONTRAST_ACTIVATED = "--tabs-contrast-actived",
+
+	INPUT_LABEL = "--input-label",
 }
 
 export default function Typography(props: IProps) {
diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx b/src/front/Components/Layouts/DesignSystem/index.tsx
index 599555c1..a9d86a3a 100644
--- a/src/front/Components/Layouts/DesignSystem/index.tsx
+++ b/src/front/Components/Layouts/DesignSystem/index.tsx
@@ -13,6 +13,8 @@ import classes from "./classes.module.scss";
 import useOpenable from "@Front/Hooks/useOpenable";
 import Modal from "@Front/Components/DesignSystem/Modal";
 import IconButton, { EIconButtonVariant } from "@Front/Components/DesignSystem/IconButton";
+import NewTextField from "@Front/Components/DesignSystem/Form/NewFields/NewTextField";
+import Form from "@Front/Components/DesignSystem/Form";
 
 export default function DesignSystem() {
 	const { isOpen, open, close } = useOpenable();
@@ -64,6 +66,14 @@ export default function DesignSystem() {
 			<Newsletter isOpen />
 			<div className={classes["root"]}>
 				<div className={classes["components"]}>
+					<Typography typo={ETypo.TEXT_LG_BOLD}>Inputs</Typography>
+					<Form>
+						<NewTextField label="Label" placeholder="Placeholder" canCopy />
+						<NewTextField label="Without copy" placeholder="Placeholder" />
+						<NewTextField label="Disabled" placeholder="Placeholder" disabled canCopy />
+						<NewTextField label="Disabled without copy" placeholder="Placeholder" disabled />
+					</Form>
+
 					<Typography typo={ETypo.TEXT_LG_BOLD}>Modal</Typography>
 					<Button onClick={open}>Open Modal</Button>
 					<Modal

From 3129e1cbeb0dadd868d6c021dce85588a3cf0cf1 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Fri, 19 Jul 2024 16:24:58 +0200
Subject: [PATCH 5/6] :sparkles: Textarea working

---
 .../NewTextAreaField/classes.module.scss      | 94 +++++++++++++++++++
 .../Form/NewFields/NewTextAreaField/index.tsx | 46 +++++++++
 .../Layouts/DesignSystem/classes.module.scss  |  5 +
 .../Components/Layouts/DesignSystem/index.tsx |  4 +-
 4 files changed, 148 insertions(+), 1 deletion(-)
 create mode 100644 src/front/Components/DesignSystem/Form/NewFields/NewTextAreaField/classes.module.scss
 create mode 100644 src/front/Components/DesignSystem/Form/NewFields/NewTextAreaField/index.tsx

diff --git a/src/front/Components/DesignSystem/Form/NewFields/NewTextAreaField/classes.module.scss b/src/front/Components/DesignSystem/Form/NewFields/NewTextAreaField/classes.module.scss
new file mode 100644
index 00000000..0a699277
--- /dev/null
+++ b/src/front/Components/DesignSystem/Form/NewFields/NewTextAreaField/classes.module.scss
@@ -0,0 +1,94 @@
+@import "@Themes/constants.scss";
+
+.root {
+	position: relative;
+
+	&[data-is-disabled="true"] {
+		opacity: var(--opacity-disabled, 0.3);
+		.input-container {
+			cursor: not-allowed;
+			border: 1px solid var(--input-main-border-default, #d7dce0);
+			&::placeholder {
+				background: var(--input-background, #fff);
+			}
+
+			&:hover {
+				border: 1px solid var(--input-main-border-default, #d7dce0);
+			}
+
+			.input {
+				cursor: not-allowed;
+			}
+		}
+	}
+
+	.label {
+		padding: 0px var(--spacing-2, 16px);
+	}
+
+	.input-container {
+		display: flex;
+		padding: var(--spacing-2, 16px) var(--spacing-sm, 8px);
+		align-items: center;
+		gap: var(--spacing-2, 16px);
+
+		border-radius: var(--input-radius, 0px);
+		border: 1px solid var(--input-main-border-default, #d7dce0);
+		background: var(--input-background, #fff);
+
+		&:hover {
+			border: 1px solid var(--input-main-border-hovered, #b4bec5);
+		}
+
+		&:not([data-value=""]) {
+			border: 1px solid var(--input-main-border-filled, #6d7e8a);
+			.input {
+				font-weight: var(--font-text-weight-semibold, 600);
+			}
+		}
+
+		&[data-is-errored="true"] {
+			border: 1px solid var(--input-error, #dc2625);
+		}
+
+		&:focus,
+		&:focus-within,
+		&:focus-visible {
+			border: 1px solid var(--input-main-border-focused, #005bcb);
+			.input {
+				font-weight: var(--font-text-weight-semibold, 600);
+			}
+		}
+
+		.input {
+			display: flex;
+			padding: 0px var(--spacing-2, 16px);
+
+			align-items: center;
+			gap: 8px;
+
+			flex: 1 0 0;
+			border: none;
+			height: 94px;
+			&::placeholder {
+				color: var(--input-placeholder-empty, #6d7e8a);
+				/* text/md/regular */
+				font-family: var(--font-text-family, Poppins);
+				font-size: 16px;
+				font-style: normal;
+				font-weight: var(--font-text-weight-regular, 400);
+				line-height: normal;
+				letter-spacing: 0.08px;
+			}
+
+			color: var(--input-placeholder-filled, #24282e);
+			/* text/md/semibold */
+			font-family: var(--font-text-family, Poppins);
+			font-size: 16px;
+			font-style: normal;
+			font-weight: var(--font-text-weight-semibold, 600);
+			line-height: normal;
+			letter-spacing: 0.08px;
+		}
+	}
+}
diff --git a/src/front/Components/DesignSystem/Form/NewFields/NewTextAreaField/index.tsx b/src/front/Components/DesignSystem/Form/NewFields/NewTextAreaField/index.tsx
new file mode 100644
index 00000000..0c030865
--- /dev/null
+++ b/src/front/Components/DesignSystem/Form/NewFields/NewTextAreaField/index.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
+import { ReactNode } from "react";
+import BaseField, { IProps as IBaseFieldProps } from "../../BaseField";
+import classes from "./classes.module.scss";
+import classnames from "classnames";
+
+export type IProps = IBaseFieldProps & {};
+
+export default class NewTextAreaField extends BaseField<IProps> {
+	constructor(props: IProps) {
+		super(props);
+		this.state = this.getDefaultState();
+	}
+
+	public override render(): ReactNode {
+		const value = this.state.value ?? "";
+		console.log(this.hasError());
+		return (
+			<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
+				<div className={classes["root"]} data-is-disabled={this.props.disabled}>
+					<label>
+						{this.props.label && (
+							<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.INPUT_LABEL} className={classes["label"]}>
+								{this.props.label}
+							</Typography>
+						)}
+						<div className={classes["input-container"]} data-value={value} data-is-errored={this.hasError().toString()}>
+							<textarea
+								onChange={this.onChange}
+								className={classnames(classes["input"], this.props.className)}
+								placeholder={this.props.placeholder}
+								value={value}
+								onFocus={this.onFocus}
+								onBlur={this.onBlur}
+								name={this.props.name}
+								disabled={this.props.disabled}
+							/>
+						</div>
+					</label>
+				</div>
+				{this.hasError() && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
+			</Typography>
+		);
+	}
+}
diff --git a/src/front/Components/Layouts/DesignSystem/classes.module.scss b/src/front/Components/Layouts/DesignSystem/classes.module.scss
index 2228c147..57f1d643 100644
--- a/src/front/Components/Layouts/DesignSystem/classes.module.scss
+++ b/src/front/Components/Layouts/DesignSystem/classes.module.scss
@@ -3,6 +3,11 @@
 	flex-direction: column;
 	gap: 32px;
 	.components {
+		.inputs {
+			display: flex;
+			flex-direction: column;
+			gap: 24px;
+		}
 		display: flex;
 		flex-direction: column;
 		gap: 24px;
diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx b/src/front/Components/Layouts/DesignSystem/index.tsx
index a9d86a3a..825e60d2 100644
--- a/src/front/Components/Layouts/DesignSystem/index.tsx
+++ b/src/front/Components/Layouts/DesignSystem/index.tsx
@@ -15,6 +15,7 @@ import Modal from "@Front/Components/DesignSystem/Modal";
 import IconButton, { EIconButtonVariant } from "@Front/Components/DesignSystem/IconButton";
 import NewTextField from "@Front/Components/DesignSystem/Form/NewFields/NewTextField";
 import Form from "@Front/Components/DesignSystem/Form";
+import NewTextAreaField from "@Front/Components/DesignSystem/Form/NewFields/NewTextAreaField";
 
 export default function DesignSystem() {
 	const { isOpen, open, close } = useOpenable();
@@ -67,11 +68,12 @@ export default function DesignSystem() {
 			<div className={classes["root"]}>
 				<div className={classes["components"]}>
 					<Typography typo={ETypo.TEXT_LG_BOLD}>Inputs</Typography>
-					<Form>
+					<Form className={classes["inputs"]}>
 						<NewTextField label="Label" placeholder="Placeholder" canCopy />
 						<NewTextField label="Without copy" placeholder="Placeholder" />
 						<NewTextField label="Disabled" placeholder="Placeholder" disabled canCopy />
 						<NewTextField label="Disabled without copy" placeholder="Placeholder" disabled />
+						<NewTextAreaField label="Textarea" placeholder="Placeholder" />
 					</Form>
 
 					<Typography typo={ETypo.TEXT_LG_BOLD}>Modal</Typography>

From b1a17d537e1adb1f9014d49f18520c1041357b61 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Fri, 19 Jul 2024 16:32:40 +0200
Subject: [PATCH 6/6] :sparkles: New inputs

---
 .../DesignSystem/Form/BaseField.tsx           |   2 +-
 .../NewTextAreaField/classes.module.scss      |  94 ----------
 .../Form/NewFields/NewTextAreaField/index.tsx |  46 -----
 .../NewTextField/classes.module.scss          | 112 ------------
 .../Form/NewFields/NewTextField/index.tsx     |  63 -------
 .../Form/TextField/classes.module.scss        | 168 ++++++++++--------
 .../DesignSystem/Form/TextField/index.tsx     |  49 ++---
 .../Form/TextareaField/classes.module.scss    | 123 ++++++++-----
 .../DesignSystem/Form/TextareaField/index.tsx |  48 +++--
 .../DesignSystem/Typography/index.tsx         |   1 +
 .../Components/Layouts/DesignSystem/index.tsx |  14 +-
 .../Layouts/Folder/CreateFolder/index.tsx     |   2 +-
 12 files changed, 227 insertions(+), 495 deletions(-)
 delete mode 100644 src/front/Components/DesignSystem/Form/NewFields/NewTextAreaField/classes.module.scss
 delete mode 100644 src/front/Components/DesignSystem/Form/NewFields/NewTextAreaField/index.tsx
 delete mode 100644 src/front/Components/DesignSystem/Form/NewFields/NewTextField/classes.module.scss
 delete mode 100644 src/front/Components/DesignSystem/Form/NewFields/NewTextField/index.tsx

diff --git a/src/front/Components/DesignSystem/Form/BaseField.tsx b/src/front/Components/DesignSystem/Form/BaseField.tsx
index 2982bc93..3fe14388 100644
--- a/src/front/Components/DesignSystem/Form/BaseField.tsx
+++ b/src/front/Components/DesignSystem/Form/BaseField.tsx
@@ -108,7 +108,7 @@ export default abstract class BaseField<P extends IProps, S extends IState = ISt
 		let errors: JSX.Element[] = [];
 		Object.entries(this.state.validationError.constraints).forEach(([key, value]) => {
 			errors.push(
-				<Typography key={key} typo={ETypo.TEXT_SM_REGULAR} color={ETypoColor.COLOR_ERROR_600}>
+				<Typography key={key} typo={ETypo.TEXT_SM_REGULAR} color={ETypoColor.INPUT_ERROR}>
 					{value}
 				</Typography>,
 			);
diff --git a/src/front/Components/DesignSystem/Form/NewFields/NewTextAreaField/classes.module.scss b/src/front/Components/DesignSystem/Form/NewFields/NewTextAreaField/classes.module.scss
deleted file mode 100644
index 0a699277..00000000
--- a/src/front/Components/DesignSystem/Form/NewFields/NewTextAreaField/classes.module.scss
+++ /dev/null
@@ -1,94 +0,0 @@
-@import "@Themes/constants.scss";
-
-.root {
-	position: relative;
-
-	&[data-is-disabled="true"] {
-		opacity: var(--opacity-disabled, 0.3);
-		.input-container {
-			cursor: not-allowed;
-			border: 1px solid var(--input-main-border-default, #d7dce0);
-			&::placeholder {
-				background: var(--input-background, #fff);
-			}
-
-			&:hover {
-				border: 1px solid var(--input-main-border-default, #d7dce0);
-			}
-
-			.input {
-				cursor: not-allowed;
-			}
-		}
-	}
-
-	.label {
-		padding: 0px var(--spacing-2, 16px);
-	}
-
-	.input-container {
-		display: flex;
-		padding: var(--spacing-2, 16px) var(--spacing-sm, 8px);
-		align-items: center;
-		gap: var(--spacing-2, 16px);
-
-		border-radius: var(--input-radius, 0px);
-		border: 1px solid var(--input-main-border-default, #d7dce0);
-		background: var(--input-background, #fff);
-
-		&:hover {
-			border: 1px solid var(--input-main-border-hovered, #b4bec5);
-		}
-
-		&:not([data-value=""]) {
-			border: 1px solid var(--input-main-border-filled, #6d7e8a);
-			.input {
-				font-weight: var(--font-text-weight-semibold, 600);
-			}
-		}
-
-		&[data-is-errored="true"] {
-			border: 1px solid var(--input-error, #dc2625);
-		}
-
-		&:focus,
-		&:focus-within,
-		&:focus-visible {
-			border: 1px solid var(--input-main-border-focused, #005bcb);
-			.input {
-				font-weight: var(--font-text-weight-semibold, 600);
-			}
-		}
-
-		.input {
-			display: flex;
-			padding: 0px var(--spacing-2, 16px);
-
-			align-items: center;
-			gap: 8px;
-
-			flex: 1 0 0;
-			border: none;
-			height: 94px;
-			&::placeholder {
-				color: var(--input-placeholder-empty, #6d7e8a);
-				/* text/md/regular */
-				font-family: var(--font-text-family, Poppins);
-				font-size: 16px;
-				font-style: normal;
-				font-weight: var(--font-text-weight-regular, 400);
-				line-height: normal;
-				letter-spacing: 0.08px;
-			}
-
-			color: var(--input-placeholder-filled, #24282e);
-			/* text/md/semibold */
-			font-family: var(--font-text-family, Poppins);
-			font-size: 16px;
-			font-style: normal;
-			font-weight: var(--font-text-weight-semibold, 600);
-			line-height: normal;
-			letter-spacing: 0.08px;
-		}
-	}
-}
diff --git a/src/front/Components/DesignSystem/Form/NewFields/NewTextAreaField/index.tsx b/src/front/Components/DesignSystem/Form/NewFields/NewTextAreaField/index.tsx
deleted file mode 100644
index 0c030865..00000000
--- a/src/front/Components/DesignSystem/Form/NewFields/NewTextAreaField/index.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from "react";
-import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
-import { ReactNode } from "react";
-import BaseField, { IProps as IBaseFieldProps } from "../../BaseField";
-import classes from "./classes.module.scss";
-import classnames from "classnames";
-
-export type IProps = IBaseFieldProps & {};
-
-export default class NewTextAreaField extends BaseField<IProps> {
-	constructor(props: IProps) {
-		super(props);
-		this.state = this.getDefaultState();
-	}
-
-	public override render(): ReactNode {
-		const value = this.state.value ?? "";
-		console.log(this.hasError());
-		return (
-			<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
-				<div className={classes["root"]} data-is-disabled={this.props.disabled}>
-					<label>
-						{this.props.label && (
-							<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.INPUT_LABEL} className={classes["label"]}>
-								{this.props.label}
-							</Typography>
-						)}
-						<div className={classes["input-container"]} data-value={value} data-is-errored={this.hasError().toString()}>
-							<textarea
-								onChange={this.onChange}
-								className={classnames(classes["input"], this.props.className)}
-								placeholder={this.props.placeholder}
-								value={value}
-								onFocus={this.onFocus}
-								onBlur={this.onBlur}
-								name={this.props.name}
-								disabled={this.props.disabled}
-							/>
-						</div>
-					</label>
-				</div>
-				{this.hasError() && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
-			</Typography>
-		);
-	}
-}
diff --git a/src/front/Components/DesignSystem/Form/NewFields/NewTextField/classes.module.scss b/src/front/Components/DesignSystem/Form/NewFields/NewTextField/classes.module.scss
deleted file mode 100644
index 5a5d2ef1..00000000
--- a/src/front/Components/DesignSystem/Form/NewFields/NewTextField/classes.module.scss
+++ /dev/null
@@ -1,112 +0,0 @@
-@import "@Themes/constants.scss";
-
-.root {
-	position: relative;
-
-	&[data-is-disabled="true"] {
-		opacity: var(--opacity-disabled, 0.3);
-		.input-container {
-			cursor: not-allowed;
-			border: 1px solid var(--input-main-border-default, #d7dce0);
-			&::placeholder {
-				background: var(--input-background, #fff);
-			}
-
-			&:hover {
-				border: 1px solid var(--input-main-border-default, #d7dce0);
-			}
-
-			.input {
-				cursor: not-allowed;
-			}
-		}
-	}
-
-	.label {
-		padding: 0px var(--spacing-2, 16px);
-	}
-
-	.input-container {
-		display: flex;
-		padding: var(--spacing-2, 16px) var(--spacing-sm, 8px);
-		align-items: center;
-		gap: var(--spacing-2, 16px);
-
-		border-radius: var(--input-radius, 0px);
-		border: 1px solid var(--input-main-border-default, #d7dce0);
-		background: var(--input-background, #fff);
-
-		&:hover {
-			border: 1px solid var(--input-main-border-hovered, #b4bec5);
-		}
-
-		&:not([data-value=""]) {
-			border: 1px solid var(--input-main-border-filled, #6d7e8a);
-			.input {
-				font-weight: var(--font-text-weight-semibold, 600);
-			}
-		}
-
-		&[data-is-errored="true"] {
-			border: 1px solid var(--input-error, #dc2625);
-		}
-
-		&:focus,
-		&:focus-within,
-		&:focus-visible {
-			border: 1px solid var(--input-main-border-focused, #005bcb);
-			.input {
-				font-weight: var(--font-text-weight-semibold, 600);
-			}
-		}
-
-		.input {
-			display: flex;
-			padding: 0px var(--spacing-2, 16px);
-
-			align-items: center;
-			gap: 8px;
-
-			flex: 1 0 0;
-			border: none;
-
-			&::placeholder {
-				color: var(--input-placeholder-empty, #6d7e8a);
-				/* text/md/regular */
-				font-family: var(--font-text-family, Poppins);
-				font-size: 16px;
-				font-style: normal;
-				font-weight: var(--font-text-weight-regular, 400);
-				line-height: normal;
-				letter-spacing: 0.08px;
-			}
-
-			&[type="number"] {
-				&::-webkit-inner-spin-button,
-				&::-webkit-outer-spin-button {
-					-webkit-appearance: none;
-					margin: 0;
-				}
-
-				/* For Chrome, Safari, and Opera */
-				&::-webkit-inner-spin-button,
-				&::-webkit-outer-spin-button {
-					-webkit-appearance: none;
-					margin: 0;
-				}
-
-				/* For IE 10+ */
-				&::-ms-inner-spin-button,
-				&::-ms-outer-spin-button {
-					display: none;
-				}
-			}
-		}
-	}
-
-	.copy-icon {
-		cursor: pointer;
-		height: 24px;
-		width: 24px;
-	}
-}
diff --git a/src/front/Components/DesignSystem/Form/NewFields/NewTextField/index.tsx b/src/front/Components/DesignSystem/Form/NewFields/NewTextField/index.tsx
deleted file mode 100644
index ab14094f..00000000
--- a/src/front/Components/DesignSystem/Form/NewFields/NewTextField/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from "react";
-import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
-import { ReactNode } from "react";
-import CopyIcon from "@Assets/Icons/copy.svg";
-import BaseField, { IProps as IBaseFieldProps } from "../../BaseField";
-import classes from "./classes.module.scss";
-import classnames from "classnames";
-import Image from "next/image";
-
-export type IProps = IBaseFieldProps & {
-	canCopy?: boolean;
-	password?: boolean;
-};
-
-export default class NewTextField extends BaseField<IProps> {
-	constructor(props: IProps) {
-		super(props);
-		this.state = this.getDefaultState();
-	}
-
-	public override render(): ReactNode {
-		const value = this.state.value ?? "";
-		console.log(this.hasError());
-		return (
-			<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
-				<div className={classes["root"]} data-is-disabled={this.props.disabled}>
-					<label>
-						{this.props.label && (
-							<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.INPUT_LABEL} className={classes["label"]}>
-								{this.props.label}
-							</Typography>
-						)}
-						<div className={classes["input-container"]} data-value={value} data-is-errored={this.hasError().toString()}>
-							<input
-								onChange={this.onChange}
-								className={classnames(classes["input"], this.props.className)}
-								placeholder={this.props.placeholder}
-								value={value}
-								onFocus={this.onFocus}
-								onBlur={this.onBlur}
-								name={this.props.name}
-								disabled={this.props.disabled}
-								type={this.props.password ? "password" : "text"}
-							/>
-							{this.props.canCopy && (
-								<div className={classes["copy-icon"]} onClick={this.onCopyClick}>
-									<Image src={CopyIcon} alt="Copy icon" />
-								</div>
-							)}
-						</div>
-					</label>
-				</div>
-				{this.hasError() && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
-			</Typography>
-		);
-	}
-
-	private onCopyClick = (): void => {
-		if (this.props.canCopy) {
-			navigator.clipboard.writeText(this.state.value ?? "");
-		}
-	};
-}
diff --git a/src/front/Components/DesignSystem/Form/TextField/classes.module.scss b/src/front/Components/DesignSystem/Form/TextField/classes.module.scss
index 8cfc21c9..8b25310c 100644
--- a/src/front/Components/DesignSystem/Form/TextField/classes.module.scss
+++ b/src/front/Components/DesignSystem/Form/TextField/classes.module.scss
@@ -3,89 +3,103 @@
 .root {
 	position: relative;
 
-	.input {
-		z-index: 1;
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		padding: 24px;
-		gap: 10px;
-		width: 100%;
-		height: 70px;
-		border: 1px solid var(--color-neutral-200);
-
-		&:disabled {
+	&[data-is-disabled="true"] {
+		opacity: var(--opacity-disabled, 0.3);
+		.input-container {
 			cursor: not-allowed;
-		}
-
-		&:focus {
-			~ .fake-placeholder {
-				transform: translateY(-35px);
-			}
-		}
-
-		&:not([data-value=""]) {
-			~ .fake-placeholder {
-				transform: translateY(-35px);
-			}
-		}
-
-		&[type="number"] {
-			&:focus {
-				~ .fake-placeholder {
-					transform: translateY(-35px);
-				}
+			border: 1px solid var(--input-main-border-default, #d7dce0);
+			&::placeholder {
+				background: var(--input-background, #fff);
 			}
 
-			&:not([data-value=""]) {
-				~ .fake-placeholder {
-					transform: translateY(-35px);
-				}
+			&:hover {
+				border: 1px solid var(--input-main-border-default, #d7dce0);
 			}
 
-			&::-webkit-inner-spin-button,
-			&::-webkit-outer-spin-button {
-				-webkit-appearance: none;
-				margin: 0;
+			.input {
+				cursor: not-allowed;
 			}
-
-			/* For Chrome, Safari, and Opera */
-			&::-webkit-inner-spin-button,
-			&::-webkit-outer-spin-button {
-				-webkit-appearance: none;
-				margin: 0;
-			}
-
-			/* For IE 10+ */
-			&::-ms-inner-spin-button,
-			&::-ms-outer-spin-button {
-				display: none;
-			}
-		}
-
-		&:not([data-value=""]) {
-			~ .fake-placeholder {
-				transform: translateY(-35px);
-			}
-		}
-
-		~ .fake-placeholder {
-			z-index: 2;
-			top: 35%;
-			margin-left: 8px;
-			padding: 0 16px;
-			pointer-events: none;
-			position: absolute;
-			background: var(--color-generic-white);
-			transition: transform 0.3s ease-in-out;
 		}
 	}
 
-	&[data-is-errored="true"] {
+	.label {
+		padding: 0px var(--spacing-2, 16px);
+	}
+
+	.input-container {
+		display: flex;
+		padding: var(--spacing-2, 16px) var(--spacing-sm, 8px);
+		align-items: center;
+		gap: var(--spacing-2, 16px);
+
+		border-radius: var(--input-radius, 0px);
+		border: 1px solid var(--input-main-border-default, #d7dce0);
+		background: var(--input-background, #fff);
+
+		&:hover {
+			border: 1px solid var(--input-main-border-hovered, #b4bec5);
+		}
+
+		&:not([data-value=""]) {
+			border: 1px solid var(--input-main-border-filled, #6d7e8a);
+			.input {
+				font-weight: var(--font-text-weight-semibold, 600);
+			}
+		}
+
+		&[data-is-errored="true"] {
+			border: 1px solid var(--input-error, #dc2625);
+		}
+
+		&:focus,
+		&:focus-within,
+		&:focus-visible {
+			border: 1px solid var(--input-main-border-focused, #005bcb);
+			.input {
+				font-weight: var(--font-text-weight-semibold, 600);
+			}
+		}
+
 		.input {
-			border: 1px solid var(--color-error-600);
-			~ .fake-placeholder {
-				color: var(--color-error-600);
+			display: flex;
+			padding: 0px var(--spacing-2, 16px);
+
+			align-items: center;
+			gap: 8px;
+
+			flex: 1 0 0;
+			border: none;
+
+			&::placeholder {
+				color: var(--input-placeholder-empty, #6d7e8a);
+				/* text/md/regular */
+				font-family: var(--font-text-family, Poppins);
+				font-size: 16px;
+				font-style: normal;
+				font-weight: var(--font-text-weight-regular, 400);
+				line-height: normal;
+				letter-spacing: 0.08px;
+			}
+
+			&[type="number"] {
+				&::-webkit-inner-spin-button,
+				&::-webkit-outer-spin-button {
+					-webkit-appearance: none;
+					margin: 0;
+				}
+
+				/* For Chrome, Safari, and Opera */
+				&::-webkit-inner-spin-button,
+				&::-webkit-outer-spin-button {
+					-webkit-appearance: none;
+					margin: 0;
+				}
+
+				/* For IE 10+ */
+				&::-ms-inner-spin-button,
+				&::-ms-outer-spin-button {
+					display: none;
+				}
 			}
 		}
 	}
@@ -94,9 +108,9 @@
 		cursor: pointer;
 		height: 24px;
 		width: 24px;
-		position: absolute;
-		top: 50%;
-		right: 24px;
-		transform: translate(0, -50%);
+	}
+
+	.errors-container {
+		margin-top: 8px;
 	}
 }
diff --git a/src/front/Components/DesignSystem/Form/TextField/index.tsx b/src/front/Components/DesignSystem/Form/TextField/index.tsx
index 0021f518..92f5d601 100644
--- a/src/front/Components/DesignSystem/Form/TextField/index.tsx
+++ b/src/front/Components/DesignSystem/Form/TextField/index.tsx
@@ -21,31 +21,34 @@ export default class TextField extends BaseField<IProps> {
 	public override render(): ReactNode {
 		const value = this.state.value ?? "";
 		return (
-			<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
-				<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
-					<input
-						onChange={this.onChange}
-						data-value={value}
-						data-has-validation-errors={(this.state.validationError === null).toString()}
-						className={classnames(classes["input"], this.props.className)}
-						value={value}
-						onFocus={this.onFocus}
-						onBlur={this.onBlur}
-						name={this.props.name}
-						disabled={this.props.disabled}
-						type={this.props.password ? "password" : "text"}
-					/>
-					<div className={classes["fake-placeholder"]}>
-						{this.props.placeholder} {!this.props.required && " (Facultatif)"}
-					</div>
-					{this.props.canCopy && (
-						<div className={classes["copy-icon"]} onClick={this.onCopyClick}>
-							<Image src={CopyIcon} alt="Copy icon" />
-						</div>
+			<div className={classes["root"]} data-is-disabled={this.props.disabled}>
+				<label>
+					{this.props.label && (
+						<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.INPUT_LABEL} className={classes["label"]}>
+							{this.props.label}
+						</Typography>
 					)}
-				</div>
+					<div className={classes["input-container"]} data-value={value} data-is-errored={this.hasError().toString()}>
+						<input
+							onChange={this.onChange}
+							className={classnames(classes["input"], this.props.className)}
+							placeholder={this.props.placeholder}
+							value={value}
+							onFocus={this.onFocus}
+							onBlur={this.onBlur}
+							name={this.props.name}
+							disabled={this.props.disabled}
+							type={this.props.password ? "password" : "text"}
+						/>
+						{this.props.canCopy && (
+							<div className={classes["copy-icon"]} onClick={this.onCopyClick}>
+								<Image src={CopyIcon} alt="Copy icon" />
+							</div>
+						)}
+					</div>
+				</label>
 				{this.hasError() && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
-			</Typography>
+			</div>
 		);
 	}
 
diff --git a/src/front/Components/DesignSystem/Form/TextareaField/classes.module.scss b/src/front/Components/DesignSystem/Form/TextareaField/classes.module.scss
index 42a5c80a..0a699277 100644
--- a/src/front/Components/DesignSystem/Form/TextareaField/classes.module.scss
+++ b/src/front/Components/DesignSystem/Form/TextareaField/classes.module.scss
@@ -3,61 +3,92 @@
 .root {
 	position: relative;
 
-	.textarea {
-		resize: none;
-		height: auto;
-		box-sizing: border-box;
-		font-family: "Inter", sans-serif;
-		font-style: normal;
-		font-weight: 400;
-		font-size: 18px;
-		line-height: 22px;
-
-		&:read-only {
+	&[data-is-disabled="true"] {
+		opacity: var(--opacity-disabled, 0.3);
+		.input-container {
 			cursor: not-allowed;
-		}
-		z-index: 1;
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		padding: 24px;
-		gap: 10px;
-
-		width: 100%;
-		height: 100px;
-		border: 1px solid var(--color-neutral-200);
-
-		~ .fake-placeholder {
-			z-index: 2;
-			top: -12px;
-			margin-left: 8px;
-			padding: 0 16px;
-			pointer-events: none;
-			position: absolute;
-			background: var(--color-generic-white);
-			transform: translateY(35px);
-			transition: transform 0.3s ease-in-out;
-		}
-
-		&:focus {
-			~ .fake-placeholder {
-				transform: translateY(0px);
+			border: 1px solid var(--input-main-border-default, #d7dce0);
+			&::placeholder {
+				background: var(--input-background, #fff);
 			}
+
+			&:hover {
+				border: 1px solid var(--input-main-border-default, #d7dce0);
+			}
+
+			.input {
+				cursor: not-allowed;
+			}
+		}
+	}
+
+	.label {
+		padding: 0px var(--spacing-2, 16px);
+	}
+
+	.input-container {
+		display: flex;
+		padding: var(--spacing-2, 16px) var(--spacing-sm, 8px);
+		align-items: center;
+		gap: var(--spacing-2, 16px);
+
+		border-radius: var(--input-radius, 0px);
+		border: 1px solid var(--input-main-border-default, #d7dce0);
+		background: var(--input-background, #fff);
+
+		&:hover {
+			border: 1px solid var(--input-main-border-hovered, #b4bec5);
 		}
 
 		&:not([data-value=""]) {
-			~ .fake-placeholder {
-				transform: translateY(0px);
+			border: 1px solid var(--input-main-border-filled, #6d7e8a);
+			.input {
+				font-weight: var(--font-text-weight-semibold, 600);
 			}
 		}
-	}
 
-	&[data-is-errored="true"] {
-		.textarea {
-			border: 1px solid var(--color-error-600);
-			~ .fake-placeholder {
-				color: var(--color-error-600);
+		&[data-is-errored="true"] {
+			border: 1px solid var(--input-error, #dc2625);
+		}
+
+		&:focus,
+		&:focus-within,
+		&:focus-visible {
+			border: 1px solid var(--input-main-border-focused, #005bcb);
+			.input {
+				font-weight: var(--font-text-weight-semibold, 600);
 			}
 		}
+
+		.input {
+			display: flex;
+			padding: 0px var(--spacing-2, 16px);
+
+			align-items: center;
+			gap: 8px;
+
+			flex: 1 0 0;
+			border: none;
+			height: 94px;
+			&::placeholder {
+				color: var(--input-placeholder-empty, #6d7e8a);
+				/* text/md/regular */
+				font-family: var(--font-text-family, Poppins);
+				font-size: 16px;
+				font-style: normal;
+				font-weight: var(--font-text-weight-regular, 400);
+				line-height: normal;
+				letter-spacing: 0.08px;
+			}
+
+			color: var(--input-placeholder-filled, #24282e);
+			/* text/md/semibold */
+			font-family: var(--font-text-family, Poppins);
+			font-size: 16px;
+			font-style: normal;
+			font-weight: var(--font-text-weight-semibold, 600);
+			line-height: normal;
+			letter-spacing: 0.08px;
+		}
 	}
 }
diff --git a/src/front/Components/DesignSystem/Form/TextareaField/index.tsx b/src/front/Components/DesignSystem/Form/TextareaField/index.tsx
index 485bb0f9..ce4da58a 100644
--- a/src/front/Components/DesignSystem/Form/TextareaField/index.tsx
+++ b/src/front/Components/DesignSystem/Form/TextareaField/index.tsx
@@ -1,8 +1,7 @@
-import BaseField, { IProps as IBaseFieldProps } from "../BaseField";
-import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import React from "react";
+import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import { ReactNode } from "react";
-
+import BaseField, { IProps as IBaseFieldProps } from "../BaseField";
 import classes from "./classes.module.scss";
 import classnames from "classnames";
 
@@ -18,30 +17,29 @@ export default class TextAreaField extends BaseField<IProps> {
 		const value = this.state.value ?? "";
 		return (
 			<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
-				<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
-					<textarea
-						name={this.props.name}
-						rows={4}
-						data-value={value}
-						onChange={this.onChange}
-						className={classnames(classes["textarea"], this.props.className)}
-						value={value}
-						readOnly={this.props.readonly}
-						onFocus={this.onFocus}
-						onBlur={this.onBlur}
-					/>
-					<div className={classes["fake-placeholder"]}>
-						{this.props.placeholder} {!this.props.required && " (Facultatif)"}
-					</div>
-					{this.hasError() && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
+				<div className={classes["root"]} data-is-disabled={this.props.disabled}>
+					<label>
+						{this.props.label && (
+							<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.INPUT_LABEL} className={classes["label"]}>
+								{this.props.label}
+							</Typography>
+						)}
+						<div className={classes["input-container"]} data-value={value} data-is-errored={this.hasError().toString()}>
+							<textarea
+								onChange={this.onChange}
+								className={classnames(classes["input"], this.props.className)}
+								placeholder={this.props.placeholder}
+								value={value}
+								onFocus={this.onFocus}
+								onBlur={this.onBlur}
+								name={this.props.name}
+								disabled={this.props.disabled}
+							/>
+						</div>
+					</label>
 				</div>
+				{this.hasError() && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
 			</Typography>
 		);
 	}
-
-	public override componentDidMount() {
-		this.setState({
-			value: this.props.defaultValue ?? "",
-		});
-	}
 }
diff --git a/src/front/Components/DesignSystem/Typography/index.tsx b/src/front/Components/DesignSystem/Typography/index.tsx
index 44fa4c03..0f81e46e 100644
--- a/src/front/Components/DesignSystem/Typography/index.tsx
+++ b/src/front/Components/DesignSystem/Typography/index.tsx
@@ -146,6 +146,7 @@ export enum ETypoColor {
 	TABS_CONTRAST_ACTIVATED = "--tabs-contrast-actived",
 
 	INPUT_LABEL = "--input-label",
+	INPUT_ERROR = "--input-error",
 }
 
 export default function Typography(props: IProps) {
diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx b/src/front/Components/Layouts/DesignSystem/index.tsx
index 825e60d2..880e89ba 100644
--- a/src/front/Components/Layouts/DesignSystem/index.tsx
+++ b/src/front/Components/Layouts/DesignSystem/index.tsx
@@ -13,9 +13,9 @@ import classes from "./classes.module.scss";
 import useOpenable from "@Front/Hooks/useOpenable";
 import Modal from "@Front/Components/DesignSystem/Modal";
 import IconButton, { EIconButtonVariant } from "@Front/Components/DesignSystem/IconButton";
-import NewTextField from "@Front/Components/DesignSystem/Form/NewFields/NewTextField";
 import Form from "@Front/Components/DesignSystem/Form";
-import NewTextAreaField from "@Front/Components/DesignSystem/Form/NewFields/NewTextAreaField";
+import TextField from "@Front/Components/DesignSystem/Form/TextField";
+import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 
 export default function DesignSystem() {
 	const { isOpen, open, close } = useOpenable();
@@ -69,11 +69,11 @@ export default function DesignSystem() {
 				<div className={classes["components"]}>
 					<Typography typo={ETypo.TEXT_LG_BOLD}>Inputs</Typography>
 					<Form className={classes["inputs"]}>
-						<NewTextField label="Label" placeholder="Placeholder" canCopy />
-						<NewTextField label="Without copy" placeholder="Placeholder" />
-						<NewTextField label="Disabled" placeholder="Placeholder" disabled canCopy />
-						<NewTextField label="Disabled without copy" placeholder="Placeholder" disabled />
-						<NewTextAreaField label="Textarea" placeholder="Placeholder" />
+						<TextField label="Label" placeholder="Placeholder" canCopy />
+						<TextField label="Without copy" placeholder="Placeholder" />
+						<TextField label="Disabled" placeholder="Placeholder" disabled canCopy />
+						<TextField label="Disabled without copy" placeholder="Placeholder" disabled />
+						<TextAreaField label="Textarea" placeholder="Placeholder" />
 					</Form>
 
 					<Typography typo={ETypo.TEXT_LG_BOLD}>Modal</Typography>
diff --git a/src/front/Components/Layouts/Folder/CreateFolder/index.tsx b/src/front/Components/Layouts/Folder/CreateFolder/index.tsx
index b4935e0d..ab731697 100644
--- a/src/front/Components/Layouts/Folder/CreateFolder/index.tsx
+++ b/src/front/Components/Layouts/Folder/CreateFolder/index.tsx
@@ -5,8 +5,8 @@ import Users from "@Front/Api/LeCoffreApi/Notary/Users/Users";
 import Button from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import SelectField, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
-import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
+import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
 import RadioBox from "@Front/Components/DesignSystem/RadioBox";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";