diff --git a/packages/synapse-bridge/src/patterns/DatePicker/DatePicker.vue b/packages/synapse-bridge/src/patterns/DatePicker/DatePicker.vue
index ac7a717000..88b5cfa415 100644
--- a/packages/synapse-bridge/src/patterns/DatePicker/DatePicker.vue
+++ b/packages/synapse-bridge/src/patterns/DatePicker/DatePicker.vue
@@ -1,124 +1,39 @@
 <script lang="ts">
-import '@vuepic/vue-datepicker/dist/main.css'
-import { defineComponent } from 'vue'
-import type { PropType } from 'vue'
-import { mdiCalendar, mdiCloseCircle } from '@mdi/js'
+import { customizable } from '@/mixins/customizable'
+import type { ValidationRule } from '@/rules/types'
+import { mdiCalendar } from '@mdi/js'
 import VueDatePicker from '@vuepic/vue-datepicker'
 import dayjs from 'dayjs'
-import { WarningRules } from '@/mixins/warningRules/index.ts'
-import { ErrorProp } from './mixins/errorProp'
-import { customizable } from '@/mixins/customizable/index.ts'
-import { config } from '@/patterns/DatePicker/config.ts'
-import { ruleMessage } from '../../helpers/ruleMessage'
-
-type DatePickerFlow = (
-	| 'calendar'
-	| 'month'
-	| 'year'
-	| 'time'
-	| 'minutes'
-	| 'hours'
-	| 'seconds'
-)[]
-
-interface DatePickerData {
-	date: Date | null | any[] | string
-	dateRangeTemp: any[]
-	format: string
-	inputValue: string
-	calendarIcon: string
-	closeIcon: string
-	errorMessages: string[] | any
-	warningErrorMessages: string[] | any
-	birthdateFlow: DatePickerFlow
-	isCalOpen: boolean
-	lastTypeAddedDate: string
-	dayNames: string[]
-	isNotValid: boolean
-}
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+import { vMaska } from 'maska'
+import {
+	type ComponentPublicInstance,
+	defineComponent,
+	nextTick,
+	type PropType,
+} from 'vue'
+import { VTextField } from 'vuetify/lib/components/index.mjs'
+import { config } from './config'
+import WarningMixin from './WarningMixin'
+import { isDateValid } from '@/rules/isDateValid'
+
+dayjs.extend(customParseFormat)
 
 export default defineComponent({
-	emits: [
-		'change',
-		'update:model-value',
-		'update:endDate',
-		'update:startDate',
-		'input',
-	],
-	components: { VueDatePicker },
-	mixins: [ErrorProp, WarningRules, customizable(config)],
+	mixins: [WarningMixin, customizable(config)],
+	directives: { maska: vMaska },
+	emits: ['update:modelValue'],
+	components: {
+		VueDatePicker,
+	},
+	data: () => ({
+		textFieldValue: '',
+		calendarValue: undefined as Date | undefined | [Date, Date] | [Date],
+		calendarIcon: mdiCalendar,
+		errorMessages: null as string[] | null,
+	}),
 	props: {
-		birthdate: {
-			type: Boolean as PropType<boolean>,
-			default: false,
-		},
-		appendIcon: {
-			type: Boolean as PropType<boolean>,
-			default: false,
-		},
-		noCalendar: {
-			type: Boolean as PropType<boolean>,
-			default: false,
-		},
-		noPrependIcon: {
-			type: Boolean as PropType<boolean>,
-			default: false,
-		},
-		noIcon: {
-			type: Boolean as PropType<boolean>,
-			default: false,
-		},
-		disabled: {
-			type: Boolean as PropType<boolean>,
-			default: false,
-		},
-		showWeekends: {
-			type: Boolean as PropType<boolean>,
-			default: false,
-		},
-		outlined: {
-			type: Boolean as PropType<boolean>,
-			default: false,
-		},
-		textFieldActivator: {
-			type: Boolean as PropType<boolean>,
-			default: false,
-		},
-		clearable: {
-			type: Boolean as PropType<boolean>,
-			default: false,
-		},
-		modelValue: {
-			type: [String, Number, Boolean, Array, Object] as PropType<
-				| string
-				| number
-				| boolean
-				| Array<any>
-				| Record<string, any>
-				| null
-			>,
-			default: () => [],
-		},
-		label: {
-			type: String as PropType<string>,
-			default: '',
-		},
-		range: {
-			type: Boolean as PropType<boolean>,
-			default: false,
-		},
-		rules: {
-			type: Array as PropType<Array<any>>,
-			default: () => [],
-		},
-		textFieldClass: {
-			type: [String, Array] as PropType<string | Array<string>>,
-			default: '',
-		},
-		hint: {
-			type: String as PropType<string>,
-			default: 'Format JJ/MM/AAAA',
-		},
+		modelValue: String,
 		dateFormat: {
 			type: String as PropType<string>,
 			default: 'DD/MM/YYYY',
@@ -127,649 +42,326 @@ export default defineComponent({
 			type: String as PropType<string>,
 			default: 'DD/MM/YYYY',
 		},
-		customErrorMessages: {
-			type: Array as PropType<Array<string>>,
+		rules: {
+			type: Array as PropType<Array<ValidationRule>>,
 			default: () => [],
 		},
-	},
-	data(): DatePickerData {
-		return {
-			date: null as Date | null | any[],
-			dateRangeTemp: [] as any[],
-			format: 'dd/MM/yyyy',
-			inputValue: '',
-			calendarIcon: mdiCalendar,
-			closeIcon: mdiCloseCircle,
-			errorMessages: [] as string[],
-			warningErrorMessages: [] as string[],
-			birthdateFlow: ['year', 'month', 'calendar'],
-			isCalOpen: false,
-			lastTypeAddedDate: '',
-			dayNames: ['L', 'M', 'M', 'J', 'V', 'S', 'D'],
-			isNotValid: false,
-		}
+		label: { type: String, default: '' },
+		hint: { type: String, default: 'Format JJ/MM/AAAA' },
+		clearable: { type: Boolean, default: false },
+		noIcon: { type: Boolean, default: false },
+		appendIcon: { type: Boolean, default: false },
+		/** YYYY-MM-DD */
+		startDate: {
+			type: [String, Boolean] as PropType<string | false>,
+			default: false,
+		},
+		birthdate: { type: Boolean, default: false },
+		textFieldClass: { type: String, default: '' },
+		showWeekends: { type: Boolean, default: false },
+		disabled: { type: Boolean, default: false },
+		textFieldActivator: { type: Boolean, default: false },
+		noCalendar: { type: Boolean, default: false },
+		outlined: { type: Boolean, default: false },
 	},
 	computed: {
-		indexedThis(): { [key: string]: any } {
-			return this as any
+		calendarDateFormat() {
+			// cf : https://vue3datepicker.com/props/formatting/#format
+			return this.dateFormat
+				.split('')
+				.map((char: string) =>
+					char === 'M' ? 'M' : char.toLowerCase()
+				)
+				.join('')
+		},
+		textFieldFormat() {
+			const mask = this.dateFormat.replace(/[a-zA-Z]/g, '#')
+			return { mask: mask }
 		},
 		textFieldOptions() {
-			let errorMessages = this.$attrs.errorMessages
 			return {
-				value:
-					this.lastTypeAddedDate === 'date'
-						? this.formatDate(this.date)
-						: this.inputValue,
+				...this.options.textField,
 				type: 'text',
-				hideDetails: 'auto',
 				label: this.label,
-				'aria-describedby': this.label,
-				variant: this.getVariant,
-				disabled: this.disabled,
 				hint: this.hint,
-				persistentHint: true,
-				rules: [this.validateDateFormat, ...this.rules],
-				errorMessages: errorMessages || [],
-			}
+				variant: this.outlined ? 'outlined' : 'underlined',
+				class: [
+					{
+						'warning-style': this.warningMessages.length,
+						'error-style': this.errorMessages?.length,
+					},
+					this.textFieldClass,
+				],
+			}
+		},
+		internalValue() {
+			// value to be used for validation
+			if (!this.textFieldValue) return ''
+			const date = dayjs(this.textFieldValue, this.dateFormat, true)
+			return date.format('DD/MM/YYYY')
+		},
+		startDateFormatted() {
+			return this.startDate
+				? dayjs(this.startDate, 'YYYY-MM-DD').format(
+						this.dateFormatReturn
+					)
+				: null
 		},
-
-		hasError() {
-			return (
-				this.errorMessages.includes(
-					"La date saisie n'est pas valide"
-				) ||
-				this.errorMessages.includes('Une erreur est survenue') ||
-				this.customErrorMessages.some((msg) =>
-					this.errorMessages.includes(msg)
-				)
-			)
+		inputRules() {
+			return [isDateValid, ...this.rules]
 		},
-		textFieldClasses() {
-			const textFieldClasses = this.buildTextFieldClasses()
-
-			if (this.hasError) {
-				textFieldClasses.push('error-style')
-			}
-
-			return textFieldClasses
+		showAppendIcon() {
+			return this.outlined || (!this.noIcon && this.appendIcon)
 		},
-		getVariant() {
-			return this.determineVariant()
+		showPrependIcon() {
+			return !this.noIcon && !this.showAppendIcon
 		},
-		prependIconValue() {
-			if (!this.appendIcon && !this.noPrependIcon && !this.noIcon) {
-				return this.calendarIcon
+		iconSlotName() {
+			if (this.showAppendIcon) {
+				return 'append-inner'
+			} else if (this.showPrependIcon) {
+				return 'prepend'
 			}
-			return undefined
+			return null
 		},
 	},
-	mounted() {
-		// Check if the error prop is true
-		if (this.error) {
-			// If it is, add an error message
-			this.errorMessages.push('Une erreur est survenue')
-		}
-		if (this.date) {
-			this.$emit('update:model-value', this.formatDate(this.date))
-		} else {
-			this.$emit('update:model-value', null)
-		}
-	},
 	watch: {
-		date(newVal, oldVal) {
-			if (newVal === oldVal) {
-				return
-			}
-			if (newVal) {
-				this.lastTypeAddedDate = 'date'
-				this.$emit('change', newVal)
-				if (typeof newVal === 'string' && newVal.length === 10) {
-					this.$emit('update:model-value', this.formatDate(newVal))
-					this.validate(newVal) // Add validate call
-				}
-			}
-		},
-		modelValue(newVal, oldVal) {
-			if (newVal === oldVal) {
-				return
-			}
-
-			const parseDate = (dateStr: string) => {
-				const [day, month, year] = dateStr.split(/[-/]/)
-				return new Date(Number(year), Number(month) - 1, Number(day))
-			}
-
-			const formatAndValidateDate = (dateStr: string) => {
-				const dateToFormat = dayjs(dateStr, 'DD/MM/YYYY')
-				const formattedDate = dateToFormat.toDate()
-				if (formattedDate.toString() !== 'Invalid Date') {
-					this.date = formattedDate
-					this.validate(dateStr)
-				}
-			}
-
-			if (typeof newVal === 'string') {
-				if (this.dateFormatReturn === 'DD/MM/YYYY') {
-					this.date = parseDate(newVal)
-					if (newVal.length === 10) {
-						this.validate(newVal)
-						this.inputValue = newVal
-					}
-				} else {
-					formatAndValidateDate(newVal)
-				}
-			} else if (Array.isArray(newVal)) {
-				if (this.dateFormatReturn === 'DD/MM/YYYY') {
-					this.date = newVal.map((date) => parseDate(date))
+		modelValue: {
+			handler(newValue) {
+				const date = dayjs(newValue, this.dateFormatReturn)
+
+				const newCalendarDate = date.isValid()
+					? date.toDate()
+					: undefined
+
+				if (this.startDateFormatted) {
+					const startDate = dayjs(
+						this.startDate as string,
+						'YYYY-MM-DD'
+					).toDate()
+
+					this.calendarValue = newCalendarDate
+						? [startDate, newCalendarDate]
+						: [startDate]
 				} else {
-					this.date = newVal
-						.map((date) => {
-							const formattedDate = dayjs(
-								date,
-								'DD/MM/YYYY'
-							).format(this.dateFormatReturn)
-							return formattedDate.toString() !== 'Invalid Date'
-								? formattedDate
-								: null
-						})
-						.filter((date) => date !== null)
+					this.calendarValue = newCalendarDate
 				}
-				this.validate(newVal)
-			}
-		},
-		inputValue(newVal, oldVal) {
-			if (newVal === oldVal) {
-				return
-			}
-
-			const isValidInput = (value: string) => /^[\d/-]+$/.test(value)
-			const truncateInput = (value: string, maxLength: number) =>
-				value.slice(0, maxLength)
-
-			if (!isValidInput(newVal)) {
-				this.inputValue = truncateInput(newVal, newVal.length - 1)
-			}
-
-			if (newVal.length > 10) {
-				this.inputValue = truncateInput(newVal, 10)
-			}
-
-			if (newVal.length === 0) {
-				this.clearErrors()
-				this.date = null
-				this.$emit('update:model-value', null)
+				this.textFieldValue = newCalendarDate
+					? dayjs(newCalendarDate).format(this.dateFormat)
+					: ''
+			},
+			immediate: true,
+		},
+		startDate(newValue: string) {
+			const start = dayjs(newValue, 'YYYY-MM-DD')
+			const end = dayjs(this.textFieldValue, this.dateFormat, true)
+
+			if (!start.isValid()) {
+				this.calendarValue = end.toDate()
+			} else if (!end.isValid()) {
+				this.textFieldValue = ''
+				this.calendarValue = [start.toDate()]
+			} else if (start.isAfter(end)) {
+				this.calendarValue = [start.toDate(), start.toDate()]
+				this.textFieldValue = start.format(this.dateFormat)
+				this.$emit(
+					'update:modelValue',
+					start.format(this.dateFormatReturn)
+				)
+			} else {
+				this.calendarValue = [start.toDate(), end.toDate()]
 			}
-
-			this.lastTypeAddedDate = 'inputValue'
 		},
 	},
-	created() {
-		if (typeof this.modelValue === 'string') {
-			const [day, month, year] = this.modelValue.split(/[-/]/)
-			this.date = new Date(Number(year), Number(month) - 1, Number(day))
-			this.inputValue = this.modelValue
-		}
-	},
 	methods: {
-		clearErrors() {
-			this.errorMessages = []
-			this.warningErrorMessages = []
-		},
-		resetErrorMessages() {
-			this.clearErrors()
-			this.isNotValid = false
-		},
-		emitUpdateEvent() {
-			if (this.date) {
-				this.resetErrorMessages()
-				const formattedDate = this.formatDate(this.date)
-				this.$emit('update:model-value', formattedDate)
-
-				// Mise à jour explicite de indexedThis[historyKey] si le format de retour est différent de DD/MM/YYYY
-				if (this.dateFormatReturn !== 'DD/MM/YYYY') {
-					this.indexedThis['inputValue'] = formattedDate
-				}
-			}
-		},
-		isWeekend(date: any) {
-			const dayOfWeek = date.getDay()
-			return dayOfWeek === 0 || dayOfWeek === 6
-		},
-		handleIconClickGeneric(event: any, datePickerRef: any) {
-			const datePicker = this.$refs[datePickerRef]
-			event.stopPropagation()
-			this.isCalOpen = !this.isCalOpen
-			if (!this.noCalendar && datePicker && !this.textFieldActivator) {
-				// from https://vue3datepicker.com/methods-and-events/methods/#openmenu
-				// @ts-ignore
-				this.isCalOpen ? datePicker.openMenu() : datePicker.closeMenu()
-			}
-		},
-		handleIconClick(event: any) {
-			this.handleIconClickGeneric(event, 'datePicker')
-		},
-		rangeHandleIconClick(event: any) {
-			this.handleIconClickGeneric(event, 'rangeDatePicker')
-		},
-		blockOpenOnclickGeneric(datePickerRef: any) {
-			const datePicker = this.$refs[datePickerRef] as InstanceType<
+		toggleCalendar() {
+			if (!this.$refs.calendar) return
+			const calendar = this.$refs.calendar as ComponentPublicInstance<
 				typeof VueDatePicker
 			>
-			if (
-				(!this.isCalOpen &&
-					!this.noPrependIcon &&
-					!this.textFieldActivator &&
-					!this.noIcon) ||
-				this.noCalendar
-			) {
-				datePicker.closeMenu()
-			} else {
-				this.isCalOpen = !this.isCalOpen
-			}
-		},
-		blockOpenOnclick() {
-			this.blockOpenOnclickGeneric('datePicker')
-		},
-		blockOpenOnclickRangePicker() {
-			this.blockOpenOnclickGeneric('rangeDatePicker')
-		},
-		handleClose() {
-			this.isCalOpen = false
-		},
-		formatDate(date: any): any {
-			if (!date) {
-				return
-			}
-			if (Array.isArray(date)) {
-				return date.map((d) => this.formatDate(d))
-			}
-			if (!dayjs(date).isValid()) {
-				return this.inputValue || null
-			}
-			if (this.range) {
-				return dayjs(date).format(this.dateFormat)
-			}
-			if (this.dateFormatReturn) {
-				this.$emit(
-					'update:model-value',
-					dayjs(date).format(this.dateFormatReturn)
-				)
-			}
-			return dayjs(date).format(this.dateFormat)
-		},
-		createDateRegEx(format: string) {
-			const day = '(0[1-9]|[12][0-9]|3[01])'
-			const month = '(0[1-9]|1[012])'
-			const year = '(19|20)\\d\\d'
-
-			const formatMapping: { [key: string]: string } = {
-				DD: day,
-				MM: month,
-				YYYY: year,
-			}
-
-			// Determine the position of the separator based on the date format
-			const separatorPosition =
-				format.indexOf('/') !== -1
-					? format.indexOf('/')
-					: format.indexOf('-')
-			const separator = format[separatorPosition]
-
-			const parts = format.split(separator)
-
-			const regexParts = parts.map((part) => formatMapping[part])
-
-			// Check if all parts are supported
-			for (const part of parts) {
-				if (!formatMapping.hasOwnProperty(part)) {
-					throw new Error(`Unsupported date format part: ${part}`)
-				}
-			}
-
-			const regexString = `^${regexParts.join('[- /.]')}$`
-
-			return new RegExp(regexString)
-		},
-		updateInputValue(
-			value: { data: string | null },
-			historyKey: string
-		): void {
-			// Gérer la suppression de caractères
-			if (value.data === null) {
-				this.removeLastCharacter(historyKey)
-				return
-			}
-
-			// Limiter la longueur de l'input à 10 caractères
-			if (this.isMaxLength(historyKey, 10)) {
-				return
-			}
-
-			// Ajouter un séparateur après le deuxième et cinquième caractère
-			if (this.shouldAddSeparator(historyKey)) {
-				this.addSeparator(historyKey)
-			}
-
-			// Ajouter le caractère saisi si ce n'est pas un séparateur
-			if (this.isNotSeparator(value.data)) {
-				this.appendCharacter(historyKey, value.data)
+			if (!this.noCalendar && !this.textFieldActivator) {
+				calendar.toggleMenu()
 			}
-
-			// Valider et formater la date lorsque la longueur atteint 10 caractères
-			if (this.isMaxLength(historyKey, 10)) {
-				this.validateAndFormatDate(historyKey)
-			}
-		},
-
-		removeLastCharacter(historyKey: string) {
-			this.indexedThis[historyKey] = this.indexedThis[historyKey].slice(
-				0,
-				-1
-			)
-		},
-
-		isMaxLength(historyKey: string, maxLength: number) {
-			return this.indexedThis[historyKey].length >= maxLength
-		},
-
-		shouldAddSeparator(historyKey: string) {
-			const length = this.indexedThis[historyKey].length
-			return length === 2 || length === 5
-		},
-
-		addSeparator(historyKey: string) {
-			const separator = this.dateFormat.includes('/') ? '/' : '-'
-			this.indexedThis[historyKey] += separator
 		},
+		handleCalendarUpdate(date: Date | [Date, Date]) {
+			if (!date) return
 
-		isNotSeparator(char: string | null) {
-			return char !== '/' && char !== '-'
-		},
+			const selectedValue = Array.isArray(date) ? date[1] : date
 
-		appendCharacter(historyKey: string, char: string) {
-			this.indexedThis[historyKey] += char
+			this.textFieldValue = dayjs(selectedValue).format(this.dateFormat)
+			const emitDate = dayjs(selectedValue).format(this.dateFormatReturn)
+			this.$emit('update:modelValue', emitDate)
+			this.updateMessages()
 		},
-
-		validateAndFormatDate(historyKey: string) {
-			const date = dayjs(this.indexedThis[historyKey], this.dateFormat)
-			const formattedDateReturn = dayjs(date).format(
-				this.dateFormatReturn
-			)
-
-			if (!this.isShortDateFormat()) {
-				this.validateFullDate(historyKey)
+		handleFocusChange(focus: boolean) {
+			if (!focus) {
+				this.updateMessages()
 			} else {
-				this.validateShortDate(historyKey, formattedDateReturn)
-			}
-		},
-
-		isShortDateFormat() {
-			return (
-				this.dateFormatReturn === 'DD/MM/YY' ||
-				this.dateFormatReturn === 'DD-MM-YY'
-			)
-		},
-
-		validateFullDate(historyKey: string) {
-			const dateRegEx = this.createDateRegEx(this.dateFormat)
-			const isValidFormat = dateRegEx.test(this.inputValue)
-
-			if (
-				isValidFormat &&
-				dayjs(this.inputValue, this.dateFormat, true).isValid()
-			) {
-				this.date = this.inputValue
-				this.isNotValid = false
-				this.$emit('update:model-value', this.indexedThis[historyKey])
-			} else {
-				this.isNotValid = true
-				this.errorMessages.push(
-					this.customErrorMessages.length > 0
-						? this.customErrorMessages[0]
-						: "La date saisie n'est pas valide"
-				)
-			}
-		},
-
-		validateShortDate(historyKey: string, formattedDateReturn: string) {
-			this.validate(this.indexedThis[historyKey])
-			this.$emit('update:model-value', formattedDateReturn)
-		},
-		validateDateFormat(): boolean | string {
-			if (this.isNotValid) {
-				return (
-					ruleMessage(this.errorMessages, 'default') ||
-					"La date saisie n'est pas valide"
-				)
-			}
-			return true
-		},
-		getInput(value: any) {
-			this.updateInputValue(value, 'inputValue')
-		},
-
-		stopInput() {
-			this.indexedThis.inputValue = this.indexedThis.inputValue.slice(
-				0,
-				10
-			)
-		},
-
-		validate(value: any) {
-			const applyRules = (rules: any[]) =>
-				rules
-					.map((rule) => rule(value))
-					.filter((result) => result !== true)
-
-			this.errorMessages = this.rules ? applyRules(this.rules) : []
-			this.warningErrorMessages = this.warningRules
-				? applyRules(this.warningRules)
-				: []
-
-			if (this.error) {
-				this.errorMessages.push('Une erreur est survenue')
-			}
-
-			if (this.dateFormatReturn !== 'DD/MM/YYYY') {
-				const dateToFormat = dayjs(value, 'DD/MM/YYYY')
-				const formattedDate = dateToFormat.toDate()
-				if (formattedDate.toString() !== 'Invalid Date') {
-					this.date = formattedDate
-					this.$emit(
-						'update:model-value',
-						dayjs(formattedDate).format(this.dateFormatReturn)
-					)
+				if (this.textFieldActivator || this.noIcon) {
+					if (!this.$refs.calendar) return
+					const calendar = this.$refs
+						.calendar as ComponentPublicInstance<
+						typeof VueDatePicker
+					>
+					calendar.toggleMenu()
 				}
 			}
 		},
-		buildTextFieldClasses() {
-			const textFieldClasses = []
+		/**
+		 * Store the errors and warnings message to display then ourselves
+		 */
+		async updateMessages() {
+			const textField = this.$refs[
+				'text-field'
+			] as ComponentPublicInstance<typeof VTextField>
+			if (!textField) return
 
-			if (this.warningRules && this.warningRules.length) {
-				textFieldClasses.push('vd-warning-rules')
-			}
-
-			if (this.noPrependIcon) {
-				textFieldClasses.push('vd-no-prepend-icon')
-			}
-
-			if (this.noIcon) {
-				textFieldClasses.push('vd-no-prepend-icon')
-			}
-
-			if (this.appendIcon) {
-				textFieldClasses.push('vd-append-icon')
+			this.validateWarning(this.internalValue)
+			await nextTick()
+			this.errorMessages = await textField.validate()
+		},
+		handleTextInput(date: string, updateCalendar: (s: string) => void) {
+			if (date === '') {
+				updateCalendar('Invalid Date')
+				this.$emit('update:modelValue', '')
+				return
 			}
 
-			if (this.textFieldClass) {
-				if (Array.isArray(this.textFieldClass)) {
-					textFieldClasses.push(...this.textFieldClass)
+			const newDate = dayjs(date, this.dateFormat, true)
+			if (newDate.isValid()) {
+				if (this.startDateFormatted) {
+					// range mode
+					const startDate = dayjs(
+						this.startDate as string,
+						'YYYY-MM-DD'
+					).format(this.dateFormat)
+					const endDate = newDate.format(this.dateFormat)
+					updateCalendar(`${startDate} - ${endDate}`)
 				} else {
-					textFieldClasses.push(this.textFieldClass)
+					updateCalendar(date)
 				}
 			}
 
-			return textFieldClasses
-		},
-		determineVariant() {
-			return this.disabled || this.noPrependIcon || !this.outlined
-				? 'underlined'
-				: 'outlined'
-		},
-		onClearInput() {
-			this.date = null
-			this.inputValue = ''
-			this.$emit('update:model-value', null)
-		},
-		async handleCut(event?: ClipboardEvent) {
-			if (event && event.clipboardData) {
-				this.inputValue = ''
-				this.date = null
-				this.$emit('update:model-value', this.date)
+			if (date.length === this.dateFormat.length) {
+				this.updateMessages()
 			}
 		},
-		async handlePaste(event?: ClipboardEvent) {
-			if (event && event.clipboardData) {
-				this.inputValue = event.clipboardData.getData('text')
-				const isValidFormat = this.createDateRegEx(
-					this.dateFormat
-				).test(this.inputValue)
-
-				if (
-					isValidFormat &&
-					dayjs(this.inputValue, this.dateFormat, true).isValid()
-				) {
-					this.resetErrorMessages()
-					this.$emit('update:model-value', this.inputValue)
-					this.date = this.inputValue
-					this.isNotValid = false
-				} else {
-					this.isNotValid = true
-					this.errorMessages.push(
-						this.customErrorMessages.length > 0
-							? this.customErrorMessages[0]
-							: "La date saisie n'est pas valide"
-					)
-				}
-			}
+		isWeekend(date: Date) {
+			const dayOfWeek = date.getDay()
+			return dayOfWeek === 0 || dayOfWeek === 6
 		},
 	},
 })
 </script>
+
 <template>
 	<div class="vd-date-picker">
-		<!--	doc:	https://vue3datepicker.com-->
 		<VueDatePicker
-			v-model="date"
-			ref="datePicker"
+			v-model="calendarValue"
+			ref="calendar"
+			v-bind="options.datePicker"
+			@update:model-value="handleCalendarUpdate"
+			:enable-time-picker="false"
 			auto-apply
-			calendar-cell-class-name="dp-custom-cell"
-			hide-offset-dates
-			input-class-name="dp-custom-input"
-			locale="fr"
+			:text-input="{ openMenu: false }"
+			:format="calendarDateFormat"
+			:range="startDate === false ? false : { fixedStart: true }"
+			:flow="birthdate ? ['year', 'month', 'calendar'] : undefined"
 			:clearable="false"
-			:day-names="dayNames"
-			:enable-time-picker="false"
-			:flow="birthdate ? birthdateFlow : undefined"
-			:format="format"
-			:range="range"
-			@close="handleClose"
-			@input="getInput"
-			@blur="stopInput"
-			@open="blockOpenOnclick"
-			@update:model-value="emitUpdateEvent"
 		>
-			<template #day="{ date }">
-				<div
-					:class="showWeekends && isWeekend(date) ? 'week-ends' : ''"
-				>
-					{{ date.getDate() }}
-				</div>
-			</template>
-			<template #dp-input="{}">
+			<template #dp-input="{ onInput, onFocus, onBlur, onClear }">
 				<VTextField
-					:model-value="date"
-					v-bind="textFieldOptions"
-					hide-details="auto"
-					color="#0C419A"
-					:aria-describedby="label"
-					:class="[
-						textFieldClasses,
-						{
-							'warning-style': warningErrorMessages.length > 0,
-							'error-style': hasError,
-							range: range,
-						},
-					]"
-					:clearable="clearable"
+					v-model="textFieldValue"
+					ref="text-field"
+					:clearable
+					:rules="inputRules"
 					:disabled="disabled"
-					:error-messages="[
-						...errorMessages,
-						...warningErrorMessages,
-					]"
-					:max-errors="4"
-					:hint="hint"
-					:label="label"
-					:persistent-hint="true"
-					:rules="[validateDateFormat, ...rules]"
-					:readonly="range"
-					:value="
-						lastTypeAddedDate === 'date'
-							? formatDate(date)
-							: inputValue
+					:validation-value="internalValue"
+					v-bind="textFieldOptions"
+					v-maska:[textFieldFormat]
+					@update:modelValue="handleTextInput($event, onInput)"
+					@update:focused="
+						(e: boolean) => {
+							handleFocusChange(e)
+							e ? onFocus() : onBlur()
+						}
 					"
-					:variant="getVariant"
-					@blur="emitUpdateEvent"
-					@paste="handlePaste"
-					@cut="handleCut"
+					@click:clear="onClear"
 				>
-					<template
-						#append-inner
-						v-if="outlined || (appendIcon && calendarIcon)"
-					>
+					<template v-if="iconSlotName" #[iconSlotName]>
 						<VIcon
-							v-if="!noIcon"
-							@click="handleIconClick"
+							@click="toggleCalendar"
+							v-bind="options.icon"
 							tabindex="-1"
-							aria-hidden="true"
 						>
 							{{ calendarIcon }}
 						</VIcon>
 					</template>
-
-					<template
-						#prepend
-						v-if="!outlined && prependIconValue && !noIcon"
-					>
-						<VIcon
-							@click="handleIconClick"
-							tabindex="-1"
-							aria-hidden="true"
+					<template #message></template>
+					<template #details>
+						<div
+							v-if="errorMessages?.length"
+							role="alert"
+							aria-live="polite"
+							class="error-message"
 						>
-							{{ calendarIcon }}
-						</VIcon>
-					</template>
-
-					<template v-slot:clear v-if="clearable">
-						<VIcon
-							@click="onClearInput"
-							tabindex="-1"
-							aria-hidden="true"
+							<ul>
+								<li v-for="error in errorMessages" :key="error">
+									{{ error }}
+								</li>
+							</ul>
+						</div>
+						<div
+							v-else-if="warningMessages.length"
+							role="alert"
+							aria-live="polite"
+							class="warning-message"
 						>
-							{{ closeIcon }}
-						</VIcon>
+							<ul>
+								<li
+									v-for="warning in warningMessages"
+									:key="warning"
+								>
+									{{ warning }}
+								</li>
+							</ul>
+						</div>
+						<div v-if="hint" class="hint-message">
+							{{ hint }}
+						</div>
 					</template>
 				</VTextField>
 			</template>
+			<template #day="{ date }">
+				<div
+					:class="showWeekends && isWeekend(date) ? 'week-ends' : ''"
+				>
+					{{ date.getDate() }}
+				</div>
+			</template>
 		</VueDatePicker>
 	</div>
 </template>
 
+<style lang="scss">
+@import '@vuepic/vue-datepicker/dist/main.css';
+:root {
+	--dp-cell-border-radius: 99px; /*Specific border radius for the calendar cell*/
+	--dp-cell-size: 31px; /*Width and height of calendar cell*/
+	--dp-cell-padding: 5px; /*Padding in the cell*/
+}
+</style>
+
 <style lang="scss" scoped>
 @import '@cnamts/design-tokens/dist/tokens';
 
+:deep(.dp__theme_light) {
+	--dp-primary-color: #2eb5e4;
+	--dp-range-between-dates-background-color: #98daf2;
+	--dp-range-between-dates-text-color: rgba(0, 0, 0, 0.87);
+}
+
 .vd-date-picker {
-	//surcharge du style du composant VueDatePicker
 	:deep(.dp__button) {
 		display: none !important;
 	}
@@ -787,20 +379,22 @@ export default defineComponent({
 		padding-bottom: 1px;
 	}
 
+	:deep(.dp__cell_inner) {
+		border-radius: 99px !important;
+	}
+
 	:deep(.dp__today) {
 		border: 1px solid #2eb5e4 !important;
-		color: #2eb5e4;
-		border-radius: 50%;
 	}
 
 	:deep(.dp__active_date) {
 		background: #2eb5e4;
 		color: var(--dp-primary-text-color);
-		border-radius: 50%;
 	}
 
-	:deep(.dp__date_hover:hover) {
-		border-radius: 50%;
+	:deep(.dp__range_start) {
+		background: var(--dp-range-between-dates-background-color);
+		color: var(--dp-range-between-dates-text-color);
 	}
 
 	:deep(.v-field__input) {
@@ -810,74 +404,69 @@ export default defineComponent({
 	:deep(.v-input__details) {
 		padding-top: 0;
 	}
+}
 
-	:deep(.dp__clear_icon) {
-		top: 35%;
-		right: 4%;
-		border-radius: 50%;
-		height: 20px;
-		min-width: 16px;
-	}
+:deep(.v-field--variant-outlined .v-field__outline__notch::after) {
+	box-sizing: border-box;
+}
 
-	:deep(.vd-append-icon ~ .dp__clear_icon) {
-		right: 35px;
+:deep(.v-input__details) {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	color: rgba(0, 0, 0, 0.6);
+
+	li {
+		list-style-type: none;
+		line-height: 1.3;
 	}
+}
+
+:deep(.v-messages) {
+	display: none;
+}
 
+.warning-style {
 	:deep(.v-icon) {
-		color: rgba(0, 0, 0, 0.54) !important;
+		color: #f0b323 !important;
 	}
 
-	.v-text-field .v-field__clearable .v-icon {
-		color: rgba(0, 0, 0, 0.54) !important;
-		opacity: 1 !important;
+	:deep(.v-label) {
+		color: #f0b323 !important;
 	}
 
-	.v-text-field .v-field--focused .v-field__clearable .v-icon {
-		color: $vd-primary !important;
+	:deep(.warning-message) {
+		color: #f0b323 !important;
 	}
 
-	.warning-style {
-		:deep(.v-icon) {
-			color: #f0b323 !important;
-		}
-
-		:deep(.v-label) {
-			color: #f0b323 !important;
-		}
-
-		:deep(.v-messages) {
-			color: #f0b323 !important;
-		}
-
-		:deep(.v-text-field) {
-			border-color: #f0b323 !important;
-		}
+	:deep(.v-text-field) {
+		border-color: #f0b323 !important;
+	}
 
-		:deep(.v-field--error:not(.v-field--disabled) .v-field__outline) {
-			color: #f0b323;
-		}
+	:deep(.v-field--error:not(.v-field--disabled) .v-field__outline) {
+		color: #f0b323;
 	}
+}
 
-	.error-style {
-		:deep(.v-icon) {
-			color: #b33f2e !important;
-		}
+.error-style {
+	:deep(.v-icon) {
+		color: #b33f2e !important;
+	}
 
-		:deep(.v-label) {
-			color: #b33f2e !important;
-		}
+	:deep(.v-label) {
+		color: #b33f2e !important;
+	}
 
-		:deep(.v-messages) {
-			color: #b33f2e !important;
-		}
+	:deep(.error-message) {
+		color: #b33f2e !important;
+	}
 
-		:deep(.v-text-field) {
-			border-color: #b33f2e !important;
-		}
+	:deep(.v-text-field) {
+		border-color: #b33f2e !important;
+	}
 
-		:deep(.v-field--error:not(.v-field--disabled) .v-field__outline) {
-			color: #b33f2e !important;
-		}
+	:deep(.v-field--error:not(.v-field--disabled) .v-field__outline) {
+		color: #b33f2e !important;
 	}
 }
 </style>
diff --git a/packages/synapse-bridge/src/patterns/DatePickerField/WarningMixin.ts b/packages/synapse-bridge/src/patterns/DatePicker/WarningMixin.ts
similarity index 100%
rename from packages/synapse-bridge/src/patterns/DatePickerField/WarningMixin.ts
rename to packages/synapse-bridge/src/patterns/DatePicker/WarningMixin.ts
diff --git a/packages/synapse-bridge/src/patterns/DatePicker/config.ts b/packages/synapse-bridge/src/patterns/DatePicker/config.ts
index ea4a7759d9..4698dee8fb 100644
--- a/packages/synapse-bridge/src/patterns/DatePicker/config.ts
+++ b/packages/synapse-bridge/src/patterns/DatePicker/config.ts
@@ -1,22 +1,15 @@
 export const config = {
 	textField: {
-		hint: 'Format JJ/MM/AAAA',
-		label: 'Date',
+		hideDetails: 'auto',
 		persistentHint: true,
-		validateOnBlur: true,
-	},
-	menu: {
-		minWidth: '290px',
-		closeOnContentClick: false,
-		contentClass: 'vd-date-picker-menu',
-	},
-	btn: {
-		icon: true,
-		variant: 'text',
+		validateOn: 'blur',
+		color: '#0C419A',
+		maxErrors: 5,
 	},
 	datePicker: {
-		hideHeader: true,
-		location: 'bottom end',
+		hideOffsetDates: true,
+		dayNames: ['L', 'M', 'M', 'J', 'V', 'S', 'D'],
+		locale: 'fr',
 	},
 	icon: {
 		color: '#808080',
diff --git a/packages/synapse-bridge/src/patterns/DatePicker/locales.ts b/packages/synapse-bridge/src/patterns/DatePicker/locales.ts
deleted file mode 100644
index c874660205..0000000000
--- a/packages/synapse-bridge/src/patterns/DatePicker/locales.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const locales = {
-	openCalendar: 'Ouvrir le calendrier',
-}
diff --git a/packages/synapse-bridge/src/patterns/DatePicker/mixins/birthdate.ts b/packages/synapse-bridge/src/patterns/DatePicker/mixins/birthdate.ts
deleted file mode 100644
index 9b2b6e6147..0000000000
--- a/packages/synapse-bridge/src/patterns/DatePicker/mixins/birthdate.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import dayjs from 'dayjs'
-import { defineComponent } from 'vue'
-
-import { INTERNAL_FORMAT } from './dateLogic'
-
-export const Birthdate = defineComponent({
-	props: {
-		birthdate: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	data() {
-		return {
-			activePicker: null as string | null,
-			max: this.birthdate ? dayjs().format(INTERNAL_FORMAT) : null,
-			min: this.birthdate ? '1900-01-01' : null,
-		}
-	},
-	watch: {
-		menuOpen(value: boolean): void {
-			if (this.birthdate && value) {
-				this.setActivePicker()
-			}
-		},
-	},
-	methods: {
-		setActivePicker(): void {
-			this.activePicker = 'year'
-		},
-		changePicker(): void {
-			if (this.birthdate) this.activePicker = 'months'
-		},
-	},
-})
diff --git a/packages/synapse-bridge/src/patterns/DatePicker/mixins/dateLogic.ts b/packages/synapse-bridge/src/patterns/DatePicker/mixins/dateLogic.ts
deleted file mode 100644
index 63b265d942..0000000000
--- a/packages/synapse-bridge/src/patterns/DatePicker/mixins/dateLogic.ts
+++ /dev/null
@@ -1,239 +0,0 @@
-import { defineComponent } from 'vue'
-
-import { parseDate } from '@/helpers/parseDate'
-
-import type { Refs } from '@/types'
-import { VMenu, VTextField } from 'vuetify/components'
-import { WarningRules } from '@/mixins/warningRules'
-import dayjs from 'dayjs'
-
-export const INTERNAL_FORMAT = 'YYYY-MM-DD'
-export const INTERNAL_FORMAT_REGEX =
-	/\d{4}[- /.](0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])/
-
-const locales = {
-	invalidDate: 'La date saisie n’est pas valide.',
-}
-
-export const DateLogic = defineComponent({
-	mixins: [WarningRules],
-	props: {
-		dateFormat: {
-			type: String,
-			default: 'DD/MM/YYYY',
-		},
-		dateFormatReturn: {
-			type: String,
-			default: 'YYYY-MM-DD',
-		},
-		modelValue: {
-			type: String,
-			default: '',
-		},
-	},
-	data() {
-		return {
-			$refs: {} as Refs<{
-				menu: VMenu
-				input: VTextField
-			}>,
-
-			/* Js date object */
-			dateObject: new Date(this.modelValue),
-
-			/** YYYY-MM-DD format */
-			date: '',
-
-			/** DD/MM/YYYY format */
-			textFieldDate: '',
-
-			errorMessages: null as string[] | null,
-		}
-	},
-	watch: {
-		modelValue: {
-			// YYYY-MM-DD format
-			handler(newDate: string): void {
-				if (!newDate) {
-					this.clearInternalModel()
-
-					return
-				}
-
-				const parsed = this.parseDatetoInternalFormat(newDate)
-
-				if (!parsed) {
-					return
-				}
-
-				this.date = parsed
-				this.dateObject = new Date(parsed)
-				this.setTextFieldModel()
-
-				this.validate(this.textFieldDate)
-				this.validateVuetify()
-			},
-			immediate: true,
-		},
-		/**
-		 * This method is fired every time textFieldDate changes,
-		 * that means on every key strokes, so don't validate
-		 * on input if validateOnBlur is true
-		 */
-		textFieldDate(value: string): void {
-			this.errorMessages = null
-			if (!this.validateOnBlurEnabled) {
-				this.validate(value)
-			}
-		},
-		date(): void {
-			this.errorMessages = null
-		},
-	},
-	mounted() {
-		// Watch VTextField 'hasError' computed value since 'update:error' event isn't reliable
-		// (it's not fired at initial state and 'validateOnBlur' can cause issues as well)
-
-		this.$watch(
-			() => this.$refs.input.hasError,
-			(error: boolean) => {
-				this.$emit('error', error)
-			},
-			{
-				deep: true, // Required since watching $refs object
-			}
-		)
-	},
-	computed: {
-		validateOnBlurEnabled(): boolean {
-			return true //Boolean(this.options?.textField?.validateOnBlur);
-		},
-	},
-	methods: {
-		/** Parse a date with dateFormatReturn format to internal format */
-		parseDatetoInternalFormat(date: string): string | null {
-			const parsed = parseDate(date, this.dateFormatReturn)
-
-			if (!parsed.isValid()) {
-				return null
-			}
-
-			return parsed.format(INTERNAL_FORMAT)
-		},
-
-		// Take a date in DD/MM/YYYY format and return it in YYYY-MM-DD format
-		parseTextFieldDate(date: string): string | null {
-			const parsed = parseDate(date, this.dateFormat)
-			const formatted = parsed.format(INTERNAL_FORMAT)
-
-			if (!parsed.isValid() || !formatted.match(INTERNAL_FORMAT_REGEX)) {
-				this.errorMessages = [locales.invalidDate]
-
-				return null
-			}
-
-			return formatted
-		},
-
-		setTextFieldModel(): void {
-			this.textFieldDate = parseDate(this.date, INTERNAL_FORMAT).format(
-				this.dateFormat
-			)
-		},
-
-		saveFromCalendar(): void {
-			this.date = dayjs(this.dateObject).format(INTERNAL_FORMAT)
-			this.setTextFieldModel()
-
-			// Trigger validation when the calendar is clicked since
-			// the input loose focus and fires textFieldBlur
-			this.validate(this.textFieldDate)
-
-			if (this.validateOnBlurEnabled) {
-				// Validate the VTextField since no blur event is emitted
-				this.validateVuetify()
-			}
-
-			this.emitChangeEvent()
-		},
-
-		saveFromTextField(): void {
-			if (!this.textFieldDate) {
-				this.$emit('update:modelValue', '')
-				this.clearInternalModel()
-
-				return
-			}
-
-			const formatted = this.parseTextFieldDate(this.textFieldDate)
-
-			if (!formatted) {
-				return
-			}
-
-			this.date = formatted
-			this.emitChangeEvent()
-		},
-
-		saveFromPasted(event: ClipboardEvent): void {
-			const value = event.clipboardData?.getData('text/plain')
-
-			if (!value) {
-				return
-			}
-
-			const parsedWithDisplayFormat = parseDate(value, this.dateFormat)
-
-			if (parsedWithDisplayFormat.isValid()) {
-				this.date = parsedWithDisplayFormat.format(INTERNAL_FORMAT)
-			}
-
-			const parsedWithReturnFormat = parseDate(
-				value,
-				this.dateFormatReturn
-			)
-
-			if (parsedWithReturnFormat.isValid()) {
-				this.date = parsedWithReturnFormat.format(INTERNAL_FORMAT)
-			}
-
-			this.emitChangeEvent()
-		},
-
-		clearInternalModel(): void {
-			this.date = ''
-			this.textFieldDate = ''
-			this.dateObject = new Date()
-		},
-
-		emitChangeEvent(): void {
-			this.$emit(
-				'update:modelValue',
-				parseDate(this.date, INTERNAL_FORMAT).format(
-					this.dateFormatReturn
-				)
-			)
-		},
-
-		validateVuetify(): void {
-			this.$nextTick(() => {
-				// Set hasFocused to true on VTextField
-				// to fix https://github.com/vuetifyjs/vuetify/issues/7876
-				// (error messages aren't shown if the input hasn't been focused)
-				if (this.$refs.input.hasFocused !== undefined) {
-					this.$refs.input.hasFocused = true
-				}
-
-				this.$refs.input.validate()
-			})
-		},
-
-		textFieldBlur(): void {
-			this.saveFromTextField()
-
-			if (this.validateOnBlurEnabled) {
-				this.validate(this.textFieldDate)
-			}
-		},
-	},
-})
diff --git a/packages/synapse-bridge/src/patterns/DatePicker/mixins/errorProp.ts b/packages/synapse-bridge/src/patterns/DatePicker/mixins/errorProp.ts
deleted file mode 100644
index f1f8bf0f09..0000000000
--- a/packages/synapse-bridge/src/patterns/DatePicker/mixins/errorProp.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { defineComponent } from 'vue'
-
-export const ErrorProp = defineComponent({
-	props: {
-		error: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	computed: {
-		internalErrorProp: {
-			get() {
-				return this.error
-			},
-			set(value: unknown) {
-				this.$emit('update:error', value)
-			},
-		},
-	},
-	template: `<div></div>`,
-})
diff --git a/packages/synapse-bridge/src/patterns/DatePicker/mixins/maskValue.ts b/packages/synapse-bridge/src/patterns/DatePicker/mixins/maskValue.ts
deleted file mode 100644
index 5c74b2d9f5..0000000000
--- a/packages/synapse-bridge/src/patterns/DatePicker/mixins/maskValue.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { defineComponent } from 'vue'
-import { DateLogic } from './dateLogic'
-
-export const MaskValue = defineComponent({
-	mixins: [DateLogic],
-	props: {
-		mask: {
-			type: [String, Boolean],
-			default: undefined,
-		},
-	},
-	computed: {
-		maskValue(): { mask: string } | undefined {
-			if (this.mask === false) {
-				return
-			}
-
-			if (typeof this.mask === 'string') {
-				return { mask: this.mask }
-			}
-
-			return {
-				mask: this.dateFormat.replace(/[a-z]/gim, '#'),
-			}
-		},
-	},
-})
diff --git a/packages/synapse-bridge/src/patterns/DatePicker/mixins/tests/errorProp.spec.ts b/packages/synapse-bridge/src/patterns/DatePicker/mixins/tests/errorProp.spec.ts
deleted file mode 100644
index c8d6c07fd5..0000000000
--- a/packages/synapse-bridge/src/patterns/DatePicker/mixins/tests/errorProp.spec.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import { ErrorProp } from '../errorProp.ts'
-import { describe, it, expect } from 'vitest'
-
-describe('ErrorProp', () => {
-	it('defaults error prop to false', () => {
-		const wrapper = shallowMount(ErrorProp)
-		expect(wrapper.vm.error).toBe(false)
-	})
-
-	it('accepts error prop', () => {
-		const wrapper = shallowMount(ErrorProp, {
-			propsData: {
-				error: true,
-			},
-		})
-		expect(wrapper.vm.error).toBe(true)
-	})
-
-	it('emits update:error event when internalErrorProp is set', async () => {
-		const wrapper = shallowMount(ErrorProp, {
-			propsData: {
-				error: false,
-			},
-		})
-		wrapper.vm.internalErrorProp = true
-		await wrapper.vm.$nextTick()
-		expect(wrapper.emitted('update:error')).toBeTruthy()
-		const emittedErrorEvent = wrapper.emitted('update:error')
-		if (emittedErrorEvent) {
-			expect(emittedErrorEvent[0]).toEqual([true])
-		}
-	})
-
-	it('returns the value of error prop when internalErrorProp is accessed', () => {
-		const wrapper = shallowMount(ErrorProp, {
-			propsData: {
-				error: true,
-			},
-		})
-		expect((wrapper.vm as any).internalErrorProp).toBe(true)
-	})
-})
diff --git a/packages/synapse-bridge/src/patterns/DatePicker/tests/DatePicker.spec.ts b/packages/synapse-bridge/src/patterns/DatePicker/tests/DatePicker.spec.ts
deleted file mode 100644
index 64afba6ceb..0000000000
--- a/packages/synapse-bridge/src/patterns/DatePicker/tests/DatePicker.spec.ts
+++ /dev/null
@@ -1,794 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import DatePicker from '../'
-import { describe, expect, it, vi } from 'vitest'
-import { notAfterToday } from '@/rules/notAfterToday/index.ts'
-import dayjs from 'dayjs'
-
-describe('DatePicker', () => {
-	it('returns correct textFieldClasses', () => {
-		const wrapper = shallowMount(DatePicker)
-		const expectedTextFieldClasses = wrapper.vm.buildTextFieldClasses()
-		expect(wrapper.vm.textFieldClasses).toEqual(expectedTextFieldClasses)
-	})
-
-	it('returns correct textFieldClasses with error with error-style class', () => {
-		const wrapper = shallowMount(DatePicker, {
-			data() {
-				return {
-					errorMessages: ["La date saisie n'est pas valide"],
-				}
-			},
-		})
-
-		wrapper.vm.buildTextFieldClasses()
-		expect(wrapper.vm.textFieldClasses).toContain('error-style')
-	})
-
-	it('returns correct buildTextFieldClasses if warningRules is not empty', () => {
-		const wrapper = shallowMount(DatePicker, {
-			propsData: {
-				warningRules: [notAfterToday],
-			},
-		})
-
-		const expectedTextFieldClasses = wrapper.vm.buildTextFieldClasses()
-		expect(wrapper.vm.textFieldClasses).toEqual(expectedTextFieldClasses)
-	})
-
-	it('returns correct variant', () => {
-		const wrapper = shallowMount(DatePicker)
-		const expectedVariant = wrapper.vm.determineVariant()
-		expect(wrapper.vm.getVariant).toEqual(expectedVariant)
-	})
-
-	it('returns correct prependIconValue when appendIcon and noPrependIcon are false', () => {
-		const wrapper = shallowMount(DatePicker, {
-			propsData: {
-				appendIcon: false,
-				noPrependIcon: false,
-			},
-		})
-
-		const expectedPrependIconValue = wrapper.vm.calendarIcon
-		expect(wrapper.vm.prependIconValue).toEqual(expectedPrependIconValue)
-	})
-
-	it('returns undefined when appendIcon or noPrependIcon is true', () => {
-		const wrapper = shallowMount(DatePicker, {
-			propsData: {
-				appendIcon: true,
-				noPrependIcon: false,
-			},
-		})
-
-		expect(wrapper.vm.prependIconValue).toBeUndefined()
-		wrapper.setProps({ appendIcon: false, noPrependIcon: true })
-		expect(wrapper.vm.prependIconValue).toBeUndefined()
-	})
-
-	it('returns undefined when appendIcon or noIcon is false', () => {
-		const wrapper = shallowMount(DatePicker, {
-			propsData: {
-				noPrependIcon: true,
-				noIcon: false,
-			},
-		})
-
-		expect(wrapper.vm.prependIconValue).toBeUndefined()
-		wrapper.setProps({ noPrependIcon: false, noIcon: true })
-		expect(wrapper.vm.prependIconValue).toBeUndefined()
-	})
-
-	it('returns undefined when appendIcon or noIcon is true', () => {
-		const wrapper = shallowMount(DatePicker, {
-			propsData: {
-				noPrependIcon: false,
-				noIcon: true,
-			},
-		})
-
-		expect(wrapper.vm.prependIconValue).toBeUndefined()
-		wrapper.setProps({ noPrependIcon: true, noIcon: true })
-		expect(wrapper.vm.prependIconValue).toBeUndefined()
-	})
-
-	it('returns correct date when day slot is called', () => {
-		const wrapper = shallowMount(DatePicker, {
-			propsData: {
-				showWeekends: true,
-			},
-		})
-		wrapper.vm.isWeekend = vi.fn(() => true)
-		const date = new Date(2023, 3, 15) // April 15, 2023
-		const expectedDate = date.getDate()
-		expect(expectedDate).toBe(15)
-	})
-
-	it('returns correct dateFormat', () => {
-		const wrapper = shallowMount(DatePicker, {
-			propsData: {
-				dateFormat: 'DD/MM/YY',
-			},
-		})
-		const expectedDateFormat = wrapper.vm.dateFormat
-		expect(expectedDateFormat).toBe('DD/MM/YY')
-	})
-
-	it('returns correct dateFormatReturn', () => {
-		const wrapper = shallowMount(DatePicker, {
-			propsData: {
-				dateFormatReturn: 'DD/MM/YY',
-			},
-		})
-		const expectedDateFormatReturn = wrapper.vm.dateFormatReturn
-		expect(expectedDateFormatReturn).toBe('DD/MM/YY')
-	})
-})
-
-describe('Computed', () => {
-	it('adds "error-style" to textFieldClasses when hasError is true', () => {
-		const wrapper = shallowMount(DatePicker, {
-			data() {
-				return {
-					errorMessages: ["La date saisie n'est pas valide"],
-				}
-			},
-		})
-		expect(wrapper.vm.textFieldClasses).toContain('error-style')
-	})
-
-	it('does not add "error-style" to textFieldClasses when hasError is false', () => {
-		const wrapper = shallowMount(DatePicker, {
-			data() {
-				return {
-					errorMessages: [],
-				}
-			},
-		})
-
-		expect(wrapper.vm.textFieldClasses).not.toContain('error-style')
-	})
-
-	it('returns correct indexedThis', () => {
-		const wrapper = shallowMount(DatePicker)
-		const expectedIndexedThis = wrapper.vm.indexedThis
-		expect(wrapper.vm.indexedThis).toEqual(expectedIndexedThis)
-	})
-	it('returns correct textFieldOptions', () => {
-		const wrapper = shallowMount(DatePicker, {
-			propsData: {
-				label: 'Test Label',
-				disabled: false,
-				outlined: false,
-				appendIcon: false,
-				rules: [],
-			},
-			data() {
-				return {
-					lastTypeAddedDate: 'date',
-					date: new Date(2023, 3, 15), // April 15, 2023
-					inputValue: '',
-					calendarIcon: 'calendarIcon',
-					errorMessages: [],
-				}
-			},
-		})
-
-		const expectedTextFieldOptions = {
-			value: wrapper.vm.formatDate(wrapper.vm.date),
-			type: 'text',
-			hideDetails: 'auto',
-			label: 'Test Label',
-			'aria-describedby': 'Test Label',
-			variant: wrapper.vm.getVariant,
-			disabled: false,
-			hint: wrapper.vm.hint,
-			persistentHint: true,
-			rules: [wrapper.vm.validateDateFormat, ...wrapper.vm.rules],
-			errorMessages: [],
-		}
-
-		expect(wrapper.vm.textFieldOptions).toEqual(expectedTextFieldOptions)
-	})
-
-	it('returns false when errorMessages is empty', () => {
-		const wrapper = shallowMount(DatePicker, {
-			data() {
-				return {
-					errorMessages: [],
-				}
-			},
-		})
-		expect(wrapper.vm.hasError).toBe(false)
-	})
-
-	it('returns false when errorMessages is empty', () => {
-		const wrapper = shallowMount(DatePicker, {
-			data() {
-				return {
-					errorMessages: ["La date saisie n'est pas valide"],
-				}
-			},
-		})
-		expect(wrapper.vm.hasError).toBe(true)
-	})
-
-	it('returns correct textFieldClasses', () => {
-		const wrapper = shallowMount(DatePicker, {
-			propsData: {
-				disabled: false,
-				outlined: false,
-			},
-		})
-		const expectedTextFieldClasses = wrapper.vm.buildTextFieldClasses()
-		expect(wrapper.vm.textFieldClasses).toEqual(expectedTextFieldClasses)
-	})
-
-	it('returns outlined when outlined is true', () => {
-		const wrapper = shallowMount(DatePicker, {
-			propsData: {
-				outlined: true,
-			},
-		})
-		expect(wrapper.vm.getVariant).toBe('outlined')
-	})
-
-	it('returns true when errorMessages contains "La date saisie n\'est pas valide"', () => {
-		const wrapper = shallowMount(DatePicker, {
-			data() {
-				return {
-					errorMessages: ["La date saisie n'est pas valide"],
-				}
-			},
-		})
-		expect(wrapper.vm.hasError).toBe(true)
-	})
-})
-
-describe('Methods', () => {
-	it('emits update:model-value event when date is not an array', () => {
-		const wrapper = shallowMount(DatePicker, {
-			data() {
-				return {
-					date: dayjs().toDate(),
-				}
-			},
-		})
-		wrapper.vm.emitUpdateEvent()
-		const emittedEvent = wrapper.emitted('update:model-value')
-		expect(emittedEvent).toBeTruthy()
-		if (emittedEvent) {
-			expect(emittedEvent[0]).toEqual([
-				wrapper.vm.formatDate(wrapper.vm.date),
-			])
-		}
-	})
-
-	it('adds correct classes to textFieldClasses', () => {
-		const wrapper = shallowMount(DatePicker, {
-			propsData: {
-				warningRules: [notAfterToday],
-				noPrependIcon: true,
-				appendIcon: true,
-				textFieldClass: 'custom-class',
-			},
-		})
-
-		const textFieldClasses = wrapper.vm.buildTextFieldClasses()
-
-		expect(textFieldClasses).toContain('vd-warning-rules')
-		expect(textFieldClasses).toContain('vd-no-prepend-icon')
-		expect(textFieldClasses).toContain('vd-append-icon')
-		expect(textFieldClasses).toContain('custom-class')
-	})
-
-	it('adds multiple custom classes to textFieldClasses when textFieldClass is an array', () => {
-		const wrapper = shallowMount(DatePicker, {
-			propsData: {
-				textFieldClass: ['custom-class-1', 'custom-class-2'],
-			},
-		})
-
-		const textFieldClasses = wrapper.vm.buildTextFieldClasses()
-
-		expect(textFieldClasses).toContain('custom-class-1')
-		expect(textFieldClasses).toContain('custom-class-2')
-	})
-
-	it('identifies weekends correctly', () => {
-		const wrapper = shallowMount(DatePicker)
-
-		const sunday = new Date(2023, 3, 9) // April 9, 2023 is a Sunday
-		const monday = new Date(2023, 3, 10) // April 10, 2023 is a Monday
-		const saturday = new Date(2023, 3, 8) // April 8, 2023 is a Saturday
-
-		expect(wrapper.vm.isWeekend(sunday)).toBe(true)
-		expect(wrapper.vm.isWeekend(monday)).toBe(false)
-		expect(wrapper.vm.isWeekend(saturday)).toBe(true)
-	})
-
-	it('calls blockOpenOnclickGeneric with correct argument when blockOpenOnclickRangePicker is called', () => {
-		const wrapper = shallowMount(DatePicker)
-		const blockOpenOnclickGenericMock = vi.fn()
-		wrapper.vm.blockOpenOnclickGeneric = blockOpenOnclickGenericMock
-
-		wrapper.vm.blockOpenOnclickRangePicker()
-
-		expect(blockOpenOnclickGenericMock).toHaveBeenCalledWith(
-			'rangeDatePicker'
-		)
-	})
-
-	it('calls blockOpenOnclickGeneric with correct argument when blockOpenOnclick is called', () => {
-		const wrapper = shallowMount(DatePicker)
-		const blockOpenOnclickGenericMock = vi.fn()
-		wrapper.vm.blockOpenOnclickGeneric = blockOpenOnclickGenericMock
-		wrapper.vm.blockOpenOnclick()
-		expect(blockOpenOnclickGenericMock).toHaveBeenCalledWith('datePicker')
-	})
-
-	it('sets isCalOpen to false when handleClose is called', () => {
-		const wrapper = shallowMount(DatePicker, {
-			data() {
-				return {
-					isCalOpen: true,
-				}
-			},
-		})
-
-		wrapper.vm.handleClose()
-
-		expect(wrapper.vm.isCalOpen).toBe(false)
-	})
-
-	it('calls handleIconClickGeneric with correct arguments when rangeHandleIconClick is called', () => {
-		const wrapper = shallowMount(DatePicker)
-		const handleIconClickGenericMock = vi.fn()
-		wrapper.vm.handleIconClickGeneric = handleIconClickGenericMock
-		const mockEvent = { preventDefault: vi.fn() }
-		wrapper.vm.rangeHandleIconClick(mockEvent)
-		expect(handleIconClickGenericMock).toHaveBeenCalledWith(
-			mockEvent,
-			'rangeDatePicker'
-		)
-	})
-
-	it('calls handleIconClick with correct arguments', () => {
-		const wrapper = shallowMount(DatePicker)
-		const handleIconClickGenericMock = vi.fn()
-		wrapper.vm.handleIconClickGeneric = handleIconClickGenericMock
-		const mockEvent = { preventDefault: vi.fn() }
-		wrapper.vm.handleIconClick(mockEvent)
-		expect(handleIconClickGenericMock).toHaveBeenCalledWith(
-			mockEvent,
-			'datePicker'
-		)
-	})
-
-	it('returns correct variant', () => {
-		let wrapper = shallowMount(DatePicker, {
-			propsData: {
-				disabled: false,
-				noPrependIcon: false,
-				outlined: true,
-			},
-		})
-
-		expect(wrapper.vm.determineVariant()).toEqual('outlined')
-
-		wrapper = shallowMount(DatePicker, {
-			propsData: {
-				disabled: true,
-				noPrependIcon: false,
-				outlined: true,
-			},
-		})
-
-		expect(wrapper.vm.determineVariant()).toEqual('underlined')
-
-		wrapper = shallowMount(DatePicker, {
-			propsData: {
-				disabled: false,
-				noPrependIcon: true,
-				outlined: true,
-			},
-		})
-
-		expect(wrapper.vm.determineVariant()).toEqual('underlined')
-
-		wrapper = shallowMount(DatePicker, {
-			propsData: {
-				disabled: false,
-				noPrependIcon: false,
-				outlined: false,
-			},
-		})
-
-		expect(wrapper.vm.determineVariant()).toEqual('underlined')
-	})
-
-	it('returns correct formatted date when formatDate is called', () => {
-		const wrapper = shallowMount(DatePicker)
-		const date = new Date(2023, 3, 15) // April 15, 2023
-		const formattedDate = wrapper.vm.formatDate(date)
-		expect(formattedDate).toBe('15/04/2023')
-	})
-
-	it('returns correct formatted date when formatDate is called with an array', () => {
-		const wrapper = shallowMount(DatePicker)
-		const date = [new Date(2023, 3, 15), new Date(2023, 3, 20)] // April 15, 2023 - April 20, 2023
-		const formattedDate = wrapper.vm.formatDate(date)
-		expect(formattedDate).toStrictEqual(['15/04/2023', '20/04/2023'])
-	})
-
-	it('returns correct formatted date when formatDate is null', () => {
-		const wrapper = shallowMount(DatePicker)
-		const date = null
-		const formattedDate = wrapper.vm.formatDate(date)
-		expect(formattedDate).toBeUndefined()
-	})
-
-	it('returns correct formatted date when formatDate is called with an invalid date', () => {
-		const wrapper = shallowMount(DatePicker)
-		const date = new Date('invalid date')
-		const formattedDate = wrapper.vm.formatDate(date)
-		expect(formattedDate).toBeNull()
-	})
-
-	it('returns correct formatted date when formatDate is called with an array', () => {
-		const wrapper = shallowMount(DatePicker, {
-			propsData: {
-				range: true,
-			},
-		})
-		const date = [new Date(2023, 3, 15), new Date(2023, 3, 20)] // April 15, 2023 - April 20, 2023
-		const formattedDate = wrapper.vm.formatDate(date)
-		expect(formattedDate).toStrictEqual(['15/04/2023', '20/04/2023'])
-	})
-
-	it('trims the last character of indexedThis[historyKey] if value.data is null', async () => {
-		const wrapper = shallowMount(DatePicker)
-		wrapper.vm.updateInputValue({ data: null }, 'inputValue')
-		expect(wrapper.vm.indexedThis.inputValue).toBe('')
-	})
-	it('trims indexedThis[historyKey] to 10 characters if its length is more than 10', async () => {
-		const wrapper = shallowMount(DatePicker)
-		wrapper.vm.indexedThis.inputValue = '12345678901'
-		await wrapper.vm.updateInputValue({ data: '1' }, 'inputValue')
-		expect(wrapper.vm.indexedThis.inputValue).toBe('1234567890')
-	})
-	it('trims indexedThis[historyKey] to 10 characters if its length is more than 10', async () => {
-		const wrapper = shallowMount(DatePicker)
-		wrapper.vm.indexedThis.inputValue = '12345678901'
-		await wrapper.vm.updateInputValue({ data: '1' }, 'inputValue')
-		expect(wrapper.vm.indexedThis.inputValue).toBe('1234567890')
-	})
-	it('trims indexedThis[historyKey] to 10 characters if its length is more than 10', async () => {
-		const wrapper = shallowMount(DatePicker)
-		wrapper.vm.indexedThis.inputValue = '12345678901'
-		await wrapper.vm.updateInputValue({ data: '1' }, 'inputValue')
-		expect(wrapper.vm.indexedThis.inputValue).toBe('1234567890')
-	})
-	it('trims indexedThis[historyKey] to 10 characters if its length is more than 10', async () => {
-		const wrapper = shallowMount(DatePicker)
-		wrapper.vm.indexedThis.inputValue = '12345678901'
-		await wrapper.vm.updateInputValue({ data: '1' }, 'inputValue')
-		expect(wrapper.vm.indexedThis.inputValue).toBe('1234567890')
-	})
-	it('trims indexedThis[historyKey] to 10 characters if its length is more than 10', async () => {
-		const wrapper = shallowMount(DatePicker)
-		wrapper.vm.indexedThis.inputValue = '12345678901'
-		await wrapper.vm.updateInputValue({ data: '1' }, 'inputValue')
-		expect(wrapper.vm.indexedThis.inputValue).toBe('1234567890')
-	})
-	it('trims indexedThis[historyKey] to 10 characters if its length is more than 10', async () => {
-		const wrapper = shallowMount(DatePicker)
-		wrapper.vm.indexedThis.inputValue = '12345678901'
-		await wrapper.vm.updateInputValue({ data: '1' }, 'inputValue')
-		expect(wrapper.vm.indexedThis.inputValue).toBe('1234567890')
-	})
-	it('calls updateInputValue with correct arguments when getInput is called', async () => {
-		const wrapper = shallowMount(DatePicker)
-		const updateInputValueMock = vi.fn()
-		wrapper.vm.updateInputValue = updateInputValueMock
-		const mockValue = { data: '1' }
-		wrapper.vm.getInput(mockValue)
-		expect(updateInputValueMock).toHaveBeenCalledWith(
-			mockValue,
-			'inputValue'
-		)
-	})
-
-	it('trims indexedThis.inputValue to 10 characters when stopInput is called', async () => {
-		const wrapper = shallowMount(DatePicker)
-		wrapper.vm.indexedThis.inputValue = '12345678901'
-		wrapper.vm.stopInput()
-		expect(wrapper.vm.indexedThis.inputValue).toBe('1234567890')
-	})
-
-	it('createDateRegEx should create a correct regex for DD/MM/YYYY format', () => {
-		const wrapper = shallowMount(DatePicker)
-		const regex = wrapper.vm.createDateRegEx('DD/MM/YYYY')
-		expect(regex).toEqual(
-			/^(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d$/
-		)
-	})
-
-	it('should create a correct regex for MM-DD-YYYY format', () => {
-		const wrapper = shallowMount(DatePicker)
-		const regex = wrapper.vm.createDateRegEx('MM-DD-YYYY')
-		expect(regex).toEqual(
-			/^(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)\d\d$/
-		)
-	})
-
-	it('should throw an error for unsupported date format', () => {
-		const wrapper = shallowMount(DatePicker)
-		expect(() => wrapper.vm.createDateRegEx('DD-YY-MM')).toThrow(
-			'Unsupported date format part: YY'
-		)
-	})
-})
-describe('Watchers', () => {
-	it('emits value event when date changes', () => {
-		const wrapper = shallowMount(DatePicker)
-
-		wrapper.vm.$watch('date', () => {
-			wrapper.vm.emitUpdateEvent()
-		})
-
-		wrapper.vm.date = new Date(2023, 3, 15) // April 15, 2023
-		wrapper.vm.emitUpdateEvent()
-		const emittedEvent = wrapper.emitted('update:model-value')
-		expect(emittedEvent).toBeTruthy()
-	})
-
-	it('emits value event when date changes and date is an array', () => {
-		const wrapper = shallowMount(DatePicker)
-
-		wrapper.vm.$watch('date', () => {
-			wrapper.vm.emitUpdateEvent()
-		})
-
-		wrapper.vm.date = [new Date(2023, 3, 15), new Date(2023, 3, 20)] // April 15, 2023 - April 20, 2023
-		wrapper.vm.emitUpdateEvent()
-		const emittedEvent = wrapper.emitted('update:model-value')
-		expect(emittedEvent).toBeTruthy()
-	})
-
-	it('emits value event when date changes and date is a string', () => {
-		const wrapper = shallowMount(DatePicker)
-
-		wrapper.vm.$watch('date', () => {
-			wrapper.vm.emitUpdateEvent()
-		})
-
-		wrapper.vm.date = '15/04/2023'
-		wrapper.vm.emitUpdateEvent()
-		const emittedEvent = wrapper.emitted('update:model-value')
-		expect(emittedEvent).toBeTruthy()
-	})
-
-	it('updates date correctly when newVal is an array with more than one element', async () => {
-		const wrapper = shallowMount(DatePicker)
-		const newVal = [
-			dayjs().format('DD/MM/YYYY'),
-			dayjs().add(1, 'day').format('DD/MM/YYYY'),
-		]
-		await wrapper.setProps({ modelValue: newVal })
-		expect(wrapper.vm.modelValue).toEqual(newVal)
-	})
-	it('updates date correctly when newVal is not an array', async () => {
-		const wrapper = shallowMount(DatePicker)
-		const newVal = dayjs().format('DD/MM/YYYY')
-		await wrapper.setProps({ modelValue: newVal })
-		expect(wrapper.vm.modelValue).toEqual(newVal)
-	})
-
-	it('trims the last character of inputValue if it is not a digit or a slash', async () => {
-		const wrapper = shallowMount(DatePicker)
-		await wrapper.setData({ inputValue: '12/34/567a' })
-		expect(wrapper.vm.inputValue).toBe('12/34/567')
-	})
-
-	it('trims inputValue to 10 characters if its length is more than 10', async () => {
-		const wrapper = shallowMount(DatePicker)
-		await wrapper.setData({ inputValue: '12/34/56789/123' })
-		expect(wrapper.vm.inputValue).toBe('12/34/5678')
-	})
-	it('sets lastTypeAddedDate to inputValue', async () => {
-		const wrapper = shallowMount(DatePicker)
-		await wrapper.setData({ inputValue: '12/34/5678' })
-		expect(wrapper.vm.lastTypeAddedDate).toBe('inputValue')
-	})
-	it('updates date correctly when modelValue changes and is a string with dateFormatReturn not equal to DD/MM/YYYY', async () => {
-		const wrapper = shallowMount(DatePicker, {
-			propsData: {
-				dateFormatReturn: 'YYYY/MM/DD',
-			},
-		})
-
-		const newVal = '15/04/2023' // April 15, 2023
-		await wrapper.setProps({ modelValue: newVal })
-
-		const expectedDate = dayjs(newVal, 'DD/MM/YYYY').toDate()
-		expect(wrapper.vm.date).toEqual(expectedDate)
-	})
-
-	it('does not update date when modelValue changes to an invalid date string and dateFormatReturn not equal to DD/MM/YYYY', async () => {
-		const wrapper = shallowMount(DatePicker, {
-			propsData: {
-				dateFormatReturn: 'YYYY/MM/DD',
-			},
-		})
-
-		const newVal = 'invalid date'
-		await wrapper.setProps({ modelValue: newVal })
-
-		expect(wrapper.vm.date).toBeNull()
-	})
-	it('updates date correctly when modelValue changes and is an array of strings with dateFormatReturn not equal to DD/MM/YYYY', async () => {
-		const wrapper = shallowMount(DatePicker, {
-			propsData: {
-				dateFormatReturn: 'YYYY/MM/DD',
-			},
-		})
-
-		const newVal = ['15/04/2023', '16/04/2023'] // April 15, 2023 and April 16, 2023
-		await wrapper.setProps({ modelValue: newVal })
-
-		const expectedDate = newVal.map((date) =>
-			dayjs(date, 'DD/MM/YYYY').format('YYYY/MM/DD')
-		)
-		expect(wrapper.vm.date).toEqual(expectedDate)
-	})
-})
-describe('Mounted', () => {
-	it('update modelValue', () => {
-		const wrapper = shallowMount(DatePicker, {
-			propsData: {
-				modelValue: '15/04/2023',
-			},
-		})
-
-		expect(wrapper.vm.date).toEqual(new Date(2023, 3, 15))
-	})
-	it('adds error message when error prop is true', () => {
-		const wrapper = shallowMount(DatePicker, {
-			propsData: {
-				error: true,
-			},
-		})
-
-		expect(wrapper.vm.errorMessages).toContain('Une erreur est survenue')
-	})
-
-	it('handleCut method updates state and clipboard correctly', async () => {
-		const wrapper = shallowMount(DatePicker)
-		const mockEvent = {
-			clipboardData: { getData: vi.fn(() => '07/07/1990') },
-		}
-		await wrapper.vm.handleCut(mockEvent as any)
-		expect(wrapper.vm.inputValue).toBe('')
-		expect(wrapper.vm.date).toBeNull()
-	})
-
-	it('handlePaste method updates state and clipboard correctly', async () => {
-		const wrapper = shallowMount(DatePicker)
-		const mockEvent = {
-			clipboardData: { getData: vi.fn(() => '07/07/1990') },
-		}
-		await wrapper.vm.handlePaste(mockEvent as any)
-		expect(wrapper.vm.inputValue).toBe('07/07/1990')
-		expect(wrapper.vm.date).toBe('07/07/1990')
-	})
-
-	it('resets error messages correctly', () => {
-		const wrapper = shallowMount(DatePicker, {
-			data() {
-				return {
-					errorMessages: ["La date saisie n'est pas valide"],
-					warningErrorMessages: ['Warning message'],
-					isNotValid: true,
-				}
-			},
-		})
-
-		wrapper.vm.resetErrorMessages()
-
-		expect(wrapper.vm.errorMessages).toEqual([])
-		expect(wrapper.vm.warningErrorMessages).toEqual([])
-		expect(wrapper.vm.isNotValid).toBe(false)
-	})
-
-	it('emits update:model-value event and resets error messages when date is valid', () => {
-		const wrapper = shallowMount(DatePicker, {
-			data() {
-				return {
-					date: new Date(2023, 3, 15), // April 15, 2023
-				}
-			},
-		})
-
-		const resetErrorMessagesMock = vi.spyOn(
-			wrapper.vm,
-			'resetErrorMessages'
-		)
-		wrapper.vm.emitUpdateEvent()
-
-		expect(resetErrorMessagesMock).toHaveBeenCalled()
-		const emittedEvent = wrapper.emitted('update:model-value')
-		expect(emittedEvent).toBeTruthy()
-		expect(emittedEvent?.[0]).toEqual(['15/04/2023'])
-	})
-
-	it('handles paste event correctly and resets error messages when date is valid', async () => {
-		const wrapper = shallowMount(DatePicker)
-		const mockEvent = {
-			clipboardData: { getData: vi.fn(() => '07/07/1990') },
-		}
-
-		const resetErrorMessagesMock = vi.spyOn(
-			wrapper.vm,
-			'resetErrorMessages'
-		)
-		await wrapper.vm.handlePaste(mockEvent as any)
-
-		expect(resetErrorMessagesMock).toHaveBeenCalled()
-		expect(wrapper.vm.inputValue).toBe('07/07/1990')
-		expect(wrapper.vm.date).toBe('07/07/1990')
-		expect(wrapper.vm.isNotValid).toBe(false)
-	})
-
-	it('clears error messages when inputValue is set to an empty string', async () => {
-		const wrapper = shallowMount(DatePicker, {
-			data() {
-				return {
-					warningErrorMessages: ['Warning message'],
-					errorMessages: ['Error message'],
-					inputValue: '07/07/1990',
-				}
-			},
-		})
-
-		await wrapper.setData({ inputValue: '' })
-
-		expect(wrapper.vm.warningErrorMessages).toEqual([])
-		expect(wrapper.vm.errorMessages).toEqual([])
-	})
-
-	it('calls removeLastCharacter when value.data is null', () => {
-		const wrapper = shallowMount(DatePicker)
-		const removeLastCharacterMock = vi.fn()
-		wrapper.vm.removeLastCharacter = removeLastCharacterMock
-		wrapper.vm.updateInputValue({ data: null }, 'inputValue')
-		expect(removeLastCharacterMock).toHaveBeenCalledWith('inputValue')
-	})
-
-	it('does nothing if input length is 10 characters', () => {
-		const wrapper = shallowMount(DatePicker)
-		wrapper.vm.isMaxLength = vi.fn(() => true)
-		const appendCharacterMock = vi.fn()
-		wrapper.vm.appendCharacter = appendCharacterMock
-		wrapper.vm.updateInputValue({ data: '1' }, 'inputValue')
-		expect(appendCharacterMock).not.toHaveBeenCalled()
-	})
-
-	it('adds a separator if necessary', () => {
-		const wrapper = shallowMount(DatePicker)
-		wrapper.vm.shouldAddSeparator = vi.fn(() => true)
-		const addSeparatorMock = vi.fn()
-		wrapper.vm.addSeparator = addSeparatorMock
-		wrapper.vm.updateInputValue({ data: '1' }, 'inputValue')
-		expect(addSeparatorMock).toHaveBeenCalledWith('inputValue')
-	})
-
-	it('appends the character if it is not a separator', () => {
-		const wrapper = shallowMount(DatePicker)
-		wrapper.vm.isNotSeparator = vi.fn(() => true)
-		const appendCharacterMock = vi.fn()
-		wrapper.vm.appendCharacter = appendCharacterMock
-		wrapper.vm.updateInputValue({ data: '1' }, 'inputValue')
-		expect(appendCharacterMock).toHaveBeenCalledWith('inputValue', '1')
-	})
-})
diff --git a/packages/synapse-bridge/src/patterns/DatePickerField/tests/DatePickerField.spec.ts b/packages/synapse-bridge/src/patterns/DatePicker/tests/DatePickerField.spec.ts
similarity index 98%
rename from packages/synapse-bridge/src/patterns/DatePickerField/tests/DatePickerField.spec.ts
rename to packages/synapse-bridge/src/patterns/DatePicker/tests/DatePickerField.spec.ts
index dbd08902e8..44e6b5921d 100644
--- a/packages/synapse-bridge/src/patterns/DatePickerField/tests/DatePickerField.spec.ts
+++ b/packages/synapse-bridge/src/patterns/DatePicker/tests/DatePickerField.spec.ts
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils'
 import { describe, it, expect } from 'vitest'
-import DatePickerField from '../DatePickerField.vue'
+import DatePickerField from '../DatePicker.vue'
 import { vuetify } from '@tests/unit/setup'
 
 describe('DatePickerField', () => {
diff --git a/packages/synapse-bridge/src/patterns/DatePickerField/tests/__snapshots__/DatePickerField.spec.ts.snap b/packages/synapse-bridge/src/patterns/DatePicker/tests/__snapshots__/DatePickerField.spec.ts.snap
similarity index 100%
rename from packages/synapse-bridge/src/patterns/DatePickerField/tests/__snapshots__/DatePickerField.spec.ts.snap
rename to packages/synapse-bridge/src/patterns/DatePicker/tests/__snapshots__/DatePickerField.spec.ts.snap
diff --git a/packages/synapse-bridge/src/patterns/DatePickerField/DatePickerField.vue b/packages/synapse-bridge/src/patterns/DatePickerField/DatePickerField.vue
deleted file mode 100644
index 88b5cfa415..0000000000
--- a/packages/synapse-bridge/src/patterns/DatePickerField/DatePickerField.vue
+++ /dev/null
@@ -1,472 +0,0 @@
-<script lang="ts">
-import { customizable } from '@/mixins/customizable'
-import type { ValidationRule } from '@/rules/types'
-import { mdiCalendar } from '@mdi/js'
-import VueDatePicker from '@vuepic/vue-datepicker'
-import dayjs from 'dayjs'
-import customParseFormat from 'dayjs/plugin/customParseFormat'
-import { vMaska } from 'maska'
-import {
-	type ComponentPublicInstance,
-	defineComponent,
-	nextTick,
-	type PropType,
-} from 'vue'
-import { VTextField } from 'vuetify/lib/components/index.mjs'
-import { config } from './config'
-import WarningMixin from './WarningMixin'
-import { isDateValid } from '@/rules/isDateValid'
-
-dayjs.extend(customParseFormat)
-
-export default defineComponent({
-	mixins: [WarningMixin, customizable(config)],
-	directives: { maska: vMaska },
-	emits: ['update:modelValue'],
-	components: {
-		VueDatePicker,
-	},
-	data: () => ({
-		textFieldValue: '',
-		calendarValue: undefined as Date | undefined | [Date, Date] | [Date],
-		calendarIcon: mdiCalendar,
-		errorMessages: null as string[] | null,
-	}),
-	props: {
-		modelValue: String,
-		dateFormat: {
-			type: String as PropType<string>,
-			default: 'DD/MM/YYYY',
-		},
-		dateFormatReturn: {
-			type: String as PropType<string>,
-			default: 'DD/MM/YYYY',
-		},
-		rules: {
-			type: Array as PropType<Array<ValidationRule>>,
-			default: () => [],
-		},
-		label: { type: String, default: '' },
-		hint: { type: String, default: 'Format JJ/MM/AAAA' },
-		clearable: { type: Boolean, default: false },
-		noIcon: { type: Boolean, default: false },
-		appendIcon: { type: Boolean, default: false },
-		/** YYYY-MM-DD */
-		startDate: {
-			type: [String, Boolean] as PropType<string | false>,
-			default: false,
-		},
-		birthdate: { type: Boolean, default: false },
-		textFieldClass: { type: String, default: '' },
-		showWeekends: { type: Boolean, default: false },
-		disabled: { type: Boolean, default: false },
-		textFieldActivator: { type: Boolean, default: false },
-		noCalendar: { type: Boolean, default: false },
-		outlined: { type: Boolean, default: false },
-	},
-	computed: {
-		calendarDateFormat() {
-			// cf : https://vue3datepicker.com/props/formatting/#format
-			return this.dateFormat
-				.split('')
-				.map((char: string) =>
-					char === 'M' ? 'M' : char.toLowerCase()
-				)
-				.join('')
-		},
-		textFieldFormat() {
-			const mask = this.dateFormat.replace(/[a-zA-Z]/g, '#')
-			return { mask: mask }
-		},
-		textFieldOptions() {
-			return {
-				...this.options.textField,
-				type: 'text',
-				label: this.label,
-				hint: this.hint,
-				variant: this.outlined ? 'outlined' : 'underlined',
-				class: [
-					{
-						'warning-style': this.warningMessages.length,
-						'error-style': this.errorMessages?.length,
-					},
-					this.textFieldClass,
-				],
-			}
-		},
-		internalValue() {
-			// value to be used for validation
-			if (!this.textFieldValue) return ''
-			const date = dayjs(this.textFieldValue, this.dateFormat, true)
-			return date.format('DD/MM/YYYY')
-		},
-		startDateFormatted() {
-			return this.startDate
-				? dayjs(this.startDate, 'YYYY-MM-DD').format(
-						this.dateFormatReturn
-					)
-				: null
-		},
-		inputRules() {
-			return [isDateValid, ...this.rules]
-		},
-		showAppendIcon() {
-			return this.outlined || (!this.noIcon && this.appendIcon)
-		},
-		showPrependIcon() {
-			return !this.noIcon && !this.showAppendIcon
-		},
-		iconSlotName() {
-			if (this.showAppendIcon) {
-				return 'append-inner'
-			} else if (this.showPrependIcon) {
-				return 'prepend'
-			}
-			return null
-		},
-	},
-	watch: {
-		modelValue: {
-			handler(newValue) {
-				const date = dayjs(newValue, this.dateFormatReturn)
-
-				const newCalendarDate = date.isValid()
-					? date.toDate()
-					: undefined
-
-				if (this.startDateFormatted) {
-					const startDate = dayjs(
-						this.startDate as string,
-						'YYYY-MM-DD'
-					).toDate()
-
-					this.calendarValue = newCalendarDate
-						? [startDate, newCalendarDate]
-						: [startDate]
-				} else {
-					this.calendarValue = newCalendarDate
-				}
-				this.textFieldValue = newCalendarDate
-					? dayjs(newCalendarDate).format(this.dateFormat)
-					: ''
-			},
-			immediate: true,
-		},
-		startDate(newValue: string) {
-			const start = dayjs(newValue, 'YYYY-MM-DD')
-			const end = dayjs(this.textFieldValue, this.dateFormat, true)
-
-			if (!start.isValid()) {
-				this.calendarValue = end.toDate()
-			} else if (!end.isValid()) {
-				this.textFieldValue = ''
-				this.calendarValue = [start.toDate()]
-			} else if (start.isAfter(end)) {
-				this.calendarValue = [start.toDate(), start.toDate()]
-				this.textFieldValue = start.format(this.dateFormat)
-				this.$emit(
-					'update:modelValue',
-					start.format(this.dateFormatReturn)
-				)
-			} else {
-				this.calendarValue = [start.toDate(), end.toDate()]
-			}
-		},
-	},
-	methods: {
-		toggleCalendar() {
-			if (!this.$refs.calendar) return
-			const calendar = this.$refs.calendar as ComponentPublicInstance<
-				typeof VueDatePicker
-			>
-			if (!this.noCalendar && !this.textFieldActivator) {
-				calendar.toggleMenu()
-			}
-		},
-		handleCalendarUpdate(date: Date | [Date, Date]) {
-			if (!date) return
-
-			const selectedValue = Array.isArray(date) ? date[1] : date
-
-			this.textFieldValue = dayjs(selectedValue).format(this.dateFormat)
-			const emitDate = dayjs(selectedValue).format(this.dateFormatReturn)
-			this.$emit('update:modelValue', emitDate)
-			this.updateMessages()
-		},
-		handleFocusChange(focus: boolean) {
-			if (!focus) {
-				this.updateMessages()
-			} else {
-				if (this.textFieldActivator || this.noIcon) {
-					if (!this.$refs.calendar) return
-					const calendar = this.$refs
-						.calendar as ComponentPublicInstance<
-						typeof VueDatePicker
-					>
-					calendar.toggleMenu()
-				}
-			}
-		},
-		/**
-		 * Store the errors and warnings message to display then ourselves
-		 */
-		async updateMessages() {
-			const textField = this.$refs[
-				'text-field'
-			] as ComponentPublicInstance<typeof VTextField>
-			if (!textField) return
-
-			this.validateWarning(this.internalValue)
-			await nextTick()
-			this.errorMessages = await textField.validate()
-		},
-		handleTextInput(date: string, updateCalendar: (s: string) => void) {
-			if (date === '') {
-				updateCalendar('Invalid Date')
-				this.$emit('update:modelValue', '')
-				return
-			}
-
-			const newDate = dayjs(date, this.dateFormat, true)
-			if (newDate.isValid()) {
-				if (this.startDateFormatted) {
-					// range mode
-					const startDate = dayjs(
-						this.startDate as string,
-						'YYYY-MM-DD'
-					).format(this.dateFormat)
-					const endDate = newDate.format(this.dateFormat)
-					updateCalendar(`${startDate} - ${endDate}`)
-				} else {
-					updateCalendar(date)
-				}
-			}
-
-			if (date.length === this.dateFormat.length) {
-				this.updateMessages()
-			}
-		},
-		isWeekend(date: Date) {
-			const dayOfWeek = date.getDay()
-			return dayOfWeek === 0 || dayOfWeek === 6
-		},
-	},
-})
-</script>
-
-<template>
-	<div class="vd-date-picker">
-		<VueDatePicker
-			v-model="calendarValue"
-			ref="calendar"
-			v-bind="options.datePicker"
-			@update:model-value="handleCalendarUpdate"
-			:enable-time-picker="false"
-			auto-apply
-			:text-input="{ openMenu: false }"
-			:format="calendarDateFormat"
-			:range="startDate === false ? false : { fixedStart: true }"
-			:flow="birthdate ? ['year', 'month', 'calendar'] : undefined"
-			:clearable="false"
-		>
-			<template #dp-input="{ onInput, onFocus, onBlur, onClear }">
-				<VTextField
-					v-model="textFieldValue"
-					ref="text-field"
-					:clearable
-					:rules="inputRules"
-					:disabled="disabled"
-					:validation-value="internalValue"
-					v-bind="textFieldOptions"
-					v-maska:[textFieldFormat]
-					@update:modelValue="handleTextInput($event, onInput)"
-					@update:focused="
-						(e: boolean) => {
-							handleFocusChange(e)
-							e ? onFocus() : onBlur()
-						}
-					"
-					@click:clear="onClear"
-				>
-					<template v-if="iconSlotName" #[iconSlotName]>
-						<VIcon
-							@click="toggleCalendar"
-							v-bind="options.icon"
-							tabindex="-1"
-						>
-							{{ calendarIcon }}
-						</VIcon>
-					</template>
-					<template #message></template>
-					<template #details>
-						<div
-							v-if="errorMessages?.length"
-							role="alert"
-							aria-live="polite"
-							class="error-message"
-						>
-							<ul>
-								<li v-for="error in errorMessages" :key="error">
-									{{ error }}
-								</li>
-							</ul>
-						</div>
-						<div
-							v-else-if="warningMessages.length"
-							role="alert"
-							aria-live="polite"
-							class="warning-message"
-						>
-							<ul>
-								<li
-									v-for="warning in warningMessages"
-									:key="warning"
-								>
-									{{ warning }}
-								</li>
-							</ul>
-						</div>
-						<div v-if="hint" class="hint-message">
-							{{ hint }}
-						</div>
-					</template>
-				</VTextField>
-			</template>
-			<template #day="{ date }">
-				<div
-					:class="showWeekends && isWeekend(date) ? 'week-ends' : ''"
-				>
-					{{ date.getDate() }}
-				</div>
-			</template>
-		</VueDatePicker>
-	</div>
-</template>
-
-<style lang="scss">
-@import '@vuepic/vue-datepicker/dist/main.css';
-:root {
-	--dp-cell-border-radius: 99px; /*Specific border radius for the calendar cell*/
-	--dp-cell-size: 31px; /*Width and height of calendar cell*/
-	--dp-cell-padding: 5px; /*Padding in the cell*/
-}
-</style>
-
-<style lang="scss" scoped>
-@import '@cnamts/design-tokens/dist/tokens';
-
-:deep(.dp__theme_light) {
-	--dp-primary-color: #2eb5e4;
-	--dp-range-between-dates-background-color: #98daf2;
-	--dp-range-between-dates-text-color: rgba(0, 0, 0, 0.87);
-}
-
-.vd-date-picker {
-	:deep(.dp__button) {
-		display: none !important;
-	}
-
-	:deep(.v-input__prepend > .v-icon) {
-		opacity: 1;
-	}
-
-	.week-ends {
-		background-color: #b3b4b5;
-		border-radius: 57%;
-		width: 39px;
-		height: 25px;
-		display: inline-block;
-		padding-bottom: 1px;
-	}
-
-	:deep(.dp__cell_inner) {
-		border-radius: 99px !important;
-	}
-
-	:deep(.dp__today) {
-		border: 1px solid #2eb5e4 !important;
-	}
-
-	:deep(.dp__active_date) {
-		background: #2eb5e4;
-		color: var(--dp-primary-text-color);
-	}
-
-	:deep(.dp__range_start) {
-		background: var(--dp-range-between-dates-background-color);
-		color: var(--dp-range-between-dates-text-color);
-	}
-
-	:deep(.v-field__input) {
-		min-height: 0;
-	}
-
-	:deep(.v-input__details) {
-		padding-top: 0;
-	}
-}
-
-:deep(.v-field--variant-outlined .v-field__outline__notch::after) {
-	box-sizing: border-box;
-}
-
-:deep(.v-input__details) {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	color: rgba(0, 0, 0, 0.6);
-
-	li {
-		list-style-type: none;
-		line-height: 1.3;
-	}
-}
-
-:deep(.v-messages) {
-	display: none;
-}
-
-.warning-style {
-	:deep(.v-icon) {
-		color: #f0b323 !important;
-	}
-
-	:deep(.v-label) {
-		color: #f0b323 !important;
-	}
-
-	:deep(.warning-message) {
-		color: #f0b323 !important;
-	}
-
-	:deep(.v-text-field) {
-		border-color: #f0b323 !important;
-	}
-
-	:deep(.v-field--error:not(.v-field--disabled) .v-field__outline) {
-		color: #f0b323;
-	}
-}
-
-.error-style {
-	:deep(.v-icon) {
-		color: #b33f2e !important;
-	}
-
-	:deep(.v-label) {
-		color: #b33f2e !important;
-	}
-
-	:deep(.error-message) {
-		color: #b33f2e !important;
-	}
-
-	:deep(.v-text-field) {
-		border-color: #b33f2e !important;
-	}
-
-	:deep(.v-field--error:not(.v-field--disabled) .v-field__outline) {
-		color: #b33f2e !important;
-	}
-}
-</style>
diff --git a/packages/synapse-bridge/src/patterns/DatePickerField/config.ts b/packages/synapse-bridge/src/patterns/DatePickerField/config.ts
deleted file mode 100644
index 4698dee8fb..0000000000
--- a/packages/synapse-bridge/src/patterns/DatePickerField/config.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export const config = {
-	textField: {
-		hideDetails: 'auto',
-		persistentHint: true,
-		validateOn: 'blur',
-		color: '#0C419A',
-		maxErrors: 5,
-	},
-	datePicker: {
-		hideOffsetDates: true,
-		dayNames: ['L', 'M', 'M', 'J', 'V', 'S', 'D'],
-		locale: 'fr',
-	},
-	icon: {
-		color: '#808080',
-	},
-}
diff --git a/packages/synapse-bridge/src/patterns/DatePickerField/index.ts b/packages/synapse-bridge/src/patterns/DatePickerField/index.ts
deleted file mode 100644
index 63157f762c..0000000000
--- a/packages/synapse-bridge/src/patterns/DatePickerField/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './DatePickerField.vue'