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] :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";