@cnamts/synapse 0.0.7-alpha → 0.0.9-alpha

package/src/components/SelectBtnField/tests/__snapshots__/SelectBtnField.spec.ts.snap

@@ -0,0 +1,125 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`SelectBtnField > display correctly in dark mode with an error 1`] = `
+"<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
+  <div class="v-application__wrap">
+    <div>
+      <div data-v-b3dd75c6="" class="select-btn-field">
+        <ul data-v-b3dd75c6="" class="v-btn-group v-theme--dark v-btn-group--density-default v-btn-toggle select-btn-field-toggle d-flex flex-wrap text-primary" aria-label="Test">
+          <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--dark v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center text-error justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test1"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+              <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test 1</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--dark v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+              <!---->
+              <!---->
+            </button></li>
+          <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--dark v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center text-error justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test2"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+              <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test 2</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--dark v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+              <!---->
+              <!---->
+            </button></li>
+        </ul>
+        <p data-v-b3dd75c6="" class="theme--dark v-messages text-error px-3 mt-2 mb-0 opacity-100">Test</p>
+      </div>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`SelectBtnField > display correctly with an error 1`] = `
+"<div data-v-b3dd75c6="" class="form-input select-btn-field">
+  <ul data-v-b3dd75c6="" class="v-btn-group v-theme--light v-btn-group--density-default v-btn-toggle d-flex flex-column select-btn-field-toggle d-flex flex-wrap text-primary" aria-label="Test">
+    <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center text-error justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+        <!---->
+        <!---->
+      </button></li>
+    <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center text-error justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test2"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test 2</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+        <!---->
+        <!---->
+      </button></li>
+    <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center text-error justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test3"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test 3</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+        <!---->
+        <!---->
+      </button></li>
+  </ul>
+  <p data-v-b3dd75c6="" class="theme--light v-messages text-error px-3 mt-2 mb-0 opacity-100">Test</p>
+</div>"
+`;
+
+exports[`SelectBtnField > display correctly with in dark mode with an hint 1`] = `
+"<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
+  <div class="v-application__wrap">
+    <div>
+      <div data-v-b3dd75c6="" class="select-btn-field">
+        <ul data-v-b3dd75c6="" class="v-btn-group v-theme--dark v-btn-group--density-default v-btn-toggle select-btn-field-toggle d-flex flex-wrap text-primary" aria-label="Test">
+          <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--dark v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test1"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+              <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test 1</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--dark v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+              <!---->
+              <!---->
+            </button></li>
+          <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--dark v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test2"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+              <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test 2</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--dark v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+              <!---->
+              <!---->
+            </button></li>
+        </ul>
+        <p data-v-b3dd75c6="" class="theme--dark v-messages px-3 mt-2 mb-0 opacity-100">Test</p>
+      </div>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`SelectBtnField > render correctly in multiple mode 1`] = `
+"<div data-v-b3dd75c6="" class="form-input select-btn-field">
+  <ul data-v-b3dd75c6="" class="v-btn-group v-theme--light v-btn-group--density-default v-btn-toggle d-flex flex-column select-btn-field-toggle d-flex flex-wrap text-primary" aria-label="Test">
+    <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+        <!---->
+        <!---->
+      </button></li>
+    <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value=""><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test 2</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+        <!---->
+        <!---->
+      </button></li>
+    <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test3"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test 3</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+        <!---->
+        <!---->
+      </button></li>
+  </ul>
+  <p data-v-b3dd75c6="" class="theme--light v-messages px-3 mt-2 mb-0 opacity-100">Test</p>
+</div>"
+`;
+
+exports[`SelectBtnField > renders correctly 1`] = `
+"<div data-v-b3dd75c6="" class="form-input select-btn-field">
+  <ul data-v-b3dd75c6="" class="v-btn-group v-theme--light v-btn-group--density-default v-btn-toggle d-flex flex-column select-btn-field-toggle d-flex flex-wrap text-primary"></ul>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`SelectBtnField > renders correctly with props 1`] = `
+"<div data-v-b3dd75c6="" class="form-input select-btn-field">
+  <ul data-v-b3dd75c6="" class="v-btn-group v-theme--light v-btn-group--density-default v-btn-toggle d-flex flex-column select-btn-field-toggle d-flex flex-wrap text-primary" aria-label="Test">
+    <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+        <!---->
+        <!---->
+      </button></li>
+    <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value=""><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test 2</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+        <!---->
+        <!---->
+      </button></li>
+    <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test3"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test 3</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+        <!---->
+        <!---->
+      </button></li>
+  </ul>
+  <p data-v-b3dd75c6="" class="theme--light v-messages px-3 mt-2 mb-0 opacity-100">Test</p>
+</div>"
+`;

package/src/components/SelectBtnField/types.d.ts

@@ -0,0 +1,11 @@
+export type SelectBtnValue =
+	| string
+	| number
+	| Array<string | number | null | undefined>
+	| null
+
+export interface SelectBtnItem {
+	text: string
+	value: string | number
+	unique?: boolean
+}

package/src/components/SkipLink/SkipLink.vue

@@ -63,17 +63,17 @@
 </template>
 
 <style lang="scss" scoped>
-@use '/src/assets/tokens.scss';
+@use '/src/assets/tokens';
 
 .vd-skip-link {
-  z-index: 150;
-  position: fixed;
-  top: 0;
-  right: 0;
-  transition: none;
-  width: 100%;
-  background: #fff;
-  outline: none; // Disable outline to use border
-  border: 2px solid tokens.$blue-darken-60;
+	z-index: 150;
+	position: fixed;
+	top: 0;
+	right: 0;
+	transition: none;
+	width: 100%;
+	background: #fff;
+	outline: none; // Disable outline to use border
+	border: 2px solid tokens.$blue-darken-60;
 }
 </style>

package/src/components/SocialMediaLinks/SocialMediaLinks.vue

@@ -44,55 +44,57 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens.scss';
+@use '@/assets/tokens';
 
 .vd-social-media-links {
-  display: flex;
-  flex-direction: column;
+	display: flex;
+	flex-direction: column;
 }
 
 li {
-  list-style: none;
+	list-style: none;
 }
 
 .vd-social-media-links-label.text--primary {
-  color: tokens.$blue-base;
-  font-weight: 600;
+	color: tokens.$blue-base;
+	font-weight: 600;
 }
 
 .v-theme--dark .vd-social-media-links-label.text--primary {
-  color: white;
+	color: white;
 }
 
 .vd-social-media-links-icon {
-  color: tokens.$grey-base;
+	color: tokens.$grey-base;
 }
 
 .v-btn--icon {
-  width: calc(var(--v-btn-height) + 5px);
-  height: calc(var(--v-btn-height) + 5px);
-  border: 0;
+	width: calc(var(--v-btn-height) + 5px);
+	height: calc(var(--v-btn-height) + 5px);
+	border: 0;
 }
 
 .v-theme--dark .v-btn--variant-text:hover :deep() {
-  background: rgba(white, 0.1);
+	background: rgba(white, 0.1);
 }
 
-@media (min-width: 768px) {
-  .vd-social-media-links-label {
-    text-align: right;
-  }
-  .vd-social-media-links-content {
-    justify-content: flex-end;
-  }
+@media (width >= 768px) {
+	.vd-social-media-links-label {
+		text-align: right;
+	}
+
+	.vd-social-media-links-content {
+		justify-content: flex-end;
+	}
 }
 
-@media (max-width: 767px) {
-  .vd-social-media-links-label {
-    text-align: left;
-  }
-  .vd-social-media-links-content {
-    justify-content: flex-start;
-  }
+@media (width <= 767px) {
+	.vd-social-media-links-label {
+		text-align: left;
+	}
+
+	.vd-social-media-links-content {
+		justify-content: flex-start;
+	}
 }
 </style>

package/src/components/SubHeader/SubHeader.vue

@@ -137,49 +137,50 @@
 
 <style lang="scss" scoped>
 .vd-sub-header {
-  overflow-x: auto;
+	overflow-x: auto;
 }
 
 .vd-sub-header-back-btn {
-  margin: 0 -6px;
+	margin: 0 -6px;
 }
 
 .vd-data-list-group,
 .vd-sub-header-informations {
-  // Don't take all available space
-  max-width: none;
+	// Don't take all available space
+	max-width: none;
 }
 
 .vd-data-list-group :deep(.vd-data-list) {
-  max-width: 200px;
-
-  // Apply margin right to avoid empty
-  // space on smaller screens
-  &:not(:last-child) {
-    margin-right: 80px !important;
-  }
-
-  .vd-key {
-    display: inline-block;
-    font-size: 0.75rem !important;
-  }
-
-  .vd-data-list-item-label {
-    color: rgba(255, 255, 255, 0.7) !important;
-  }
-
-  .vd-data-list-item-action-btn {
-    color: #fff !important;
-  }
+	max-width: 200px;
+
+	// Apply margin right to avoid empty
+	// space on smaller screens
+	&:not(:last-child) {
+		margin-right: 80px !important;
+	}
+
+	.vd-key {
+		display: inline-block;
+		font-size: 0.75rem !important;
+	}
+
+	.vd-data-list-item-label {
+		color: rgb(255 255 255 / 70%) !important;
+	}
+
+	.vd-data-list-item-action-btn {
+		color: #fff !important;
+	}
 }
 
 .vd-subheader-loading :deep() {
-  background: transparent;
-  .v-skeleton-loader__button {
-    margin: 0;
-    min-height: 28px;
-    height: auto;
-    background: rgba(white, var(--v-border-opacity));
-  }
+	background: transparent;
+
+	.v-skeleton-loader__button {
+		margin: 0;
+		min-height: 28px;
+		height: auto;
+		background: rgba(white, var(--v-border-opacity));
+	}
 }
 </style>

package/src/components/SyAlert/SyAlert.vue

@@ -95,7 +95,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens.scss';
+@use '@/assets/tokens';
 @use 'sass:map';
 
 .alert {
@@ -115,7 +115,7 @@
 }
 
 :deep(.v-btn--variant-text .v-btn__overlay) {
-  background: transparent !important;
+	background: transparent !important;
 }
 
 .alert-icon :deep(.v-icon__svg) {
@@ -132,13 +132,13 @@
 }
 
 .v-btn {
-  text-transform: none;
-  font-weight: bold;
-  font-size: 0.75rem;
-  letter-spacing: normal;
+	text-transform: none;
+	font-weight: bold;
+	font-size: 0.75rem;
+	letter-spacing: normal;
 }
 
-@media screen and (max-width: 440px) {
+@media screen and (width <= 440px) {
 	.alert {
 		display: flex;
 		flex-direction: column;
@@ -160,8 +160,8 @@
 	}
 }
 
-@media screen and (min-width: 441px) {
-	.alert{
+@media screen and (width >= 441px) {
+	.alert {
 		.alert-icon {
 			width: 3.5rem !important;
 			height: 3.5rem !important;
@@ -175,6 +175,7 @@
 	&.alert--#{$type}.v-alert--variant-tonal {
 		background: map.get($map, 'background') !important;
 		color: tokens.$colors-text-base !important;
+
 		:deep(.v-alert__border) {
 			border-color: map.get($map, 'border') !important;
 			opacity: 1 !important;
@@ -184,6 +185,7 @@
 
 	&.alert--#{$type}.v-alert--variant-outlined {
 		background: transparent !important;
+
 		:deep(.v-alert__border) {
 			border-color: map.get($map, 'border') !important;
 			opacity: 1 !important;
@@ -194,6 +196,7 @@
 	&.text-#{$type} {
 		.v-alert__prepend > .v-icon {
 			background: map.get($map, 'icon-bg');
+
 			:deep(svg) {
 				fill: map.get($map, 'accent');
 			}
@@ -217,7 +220,6 @@
 			'icon-bg': tokens.$colors-background-warning-subdued,
 		)
 	);
-
 	@include redesign(
 		'success',
 		(
@@ -228,7 +230,6 @@
 			'icon-bg': tokens.$colors-background-success-subdued,
 		)
 	);
-
 	@include redesign(
 		'error',
 		(
@@ -239,7 +240,6 @@
 			'icon-bg': tokens.$colors-background-error-subdued,
 		)
 	);
-
 	@include redesign(
 		'info',
 		(

package/src/components/UserMenuBtn/UserMenuBtn.vue

@@ -84,7 +84,7 @@
 </template>
 
 <style scoped lang="scss">
-@use '@/assets/tokens.scss';
+@use '@/assets/tokens';
 
 .vd-user-icon {
 	width: 40px;

package/src/components/UserMenuBtn/config.ts

@@ -11,7 +11,7 @@ export const defaultOptions = {
 		height: 'auto',
 	},
 	icon: {
-		color: 'avatar',
+		color: 'secondary',
 	},
 	logoutListItem: {
 		class: 'text-primary',

package/src/components/index.ts

@@ -1,7 +1,15 @@
-export { default as SyAlert } from './SyAlert/SyAlert.vue'
+export { default as DatePicker } from '@/components/DatePicker/DatePicker.vue'
+export { useFieldValidation } from '../composables/rules/useFieldValidation'
+export type { RuleOptions } from '../composables/rules/useFieldValidation'
+export { useNotificationService } from '../services/NotificationService'
 export { default as BackBtn } from './BackBtn/BackBtn.vue'
 export { default as BackToTopBtn } from './BackToTopBtn/BackToTopBtn.vue'
 export { default as CollapsibleList } from './CollapsibleList/CollapsibleList.vue'
+export { default as ContextualMenu } from './ContextualMenu/ContextualMenu.vue'
+export { default as CookieBanner } from './CookieBanner/CookieBanner.vue'
+export { default as CookiesInformation } from './CookiesSelection/CookiesInformation/CookiesInformation.vue'
+export { default as CookiesSelection } from './CookiesSelection/CookiesSelection.vue'
+export { default as CookiesTable } from './CookiesSelection/CookiesTable/CookiesTable.vue'
 export { default as CopyBtn } from './CopyBtn/CopyBtn.vue'
 export { default as SyBtnSelect } from './Customs/SyBtnSelect/SyBtnSelect.vue'
 export { default as SyInputSelect } from './Customs/SyInputSelect/SyInputSelect.vue'
@@ -13,6 +21,8 @@ export { default as DataListItem } from './DataListItem/DataListItem.vue'
 export { default as DialogBox } from './DialogBox/DialogBox.vue'
 export { default as DownloadBtn } from './DownloadBtn/DownloadBtn.vue'
 export { default as ErrorPage } from './ErrorPage/ErrorPage.vue'
+export { default as ExternalLinks } from './ExternalLinks/ExternalLinks.vue'
+export { default as FileUpload } from './FileUpload/FileUpload.vue'
 export { default as FooterBar } from './FooterBar/FooterBar.vue'
 export { default as FranceConnectBtn } from './FranceConnectBtn/FranceConnectBtn.vue'
 export { default as HeaderBar } from './HeaderBar/HeaderBar.vue'
@@ -29,19 +39,19 @@ export { default as LangBtn } from './LangBtn/LangBtn.vue'
 export { default as Logo } from './Logo/Logo.vue'
 export { default as LogoBrandSection } from './LogoBrandSection/LogoBrandSection.vue'
 export { default as MaintenancePage } from './MaintenancePage/MaintenancePage.vue'
-export { default as NotFoundPage } from './NotFoundPage/NotFoundPage.vue'
 export { default as NirField } from './NirField/NirField.vue'
 export * from './NirField/nirValidation'
+export { default as NotFoundPage } from './NotFoundPage/NotFoundPage.vue'
 export { default as NotificationBar } from './NotificationBar/NotificationBar.vue'
-export { useNotificationService } from '../services/NotificationService'
 export * from './NotificationBar/types'
 export { default as PageContainer } from './PageContainer/PageContainer.vue'
+export { default as PasswordField } from './PasswordField/PasswordField.vue'
 export { default as PhoneField } from './PhoneField/PhoneField.vue'
+export { default as RangeField } from './RangeField/RangeField.vue'
+export { default as RatingPicker } from './RatingPicker/RatingPicker.vue'
+export { default as SelectBtnField } from './SelectBtnField/SelectBtnField.vue'
 export { default as SkipLink } from './SkipLink/SkipLink.vue'
 export { default as SocialMediaLinks } from './SocialMediaLinks/SocialMediaLinks.vue'
 export { default as SubHeader } from './SubHeader/SubHeader.vue'
+export { default as SyAlert } from './SyAlert/SyAlert.vue'
 export { default as UserMenuBtn } from './UserMenuBtn/UserMenuBtn.vue'
-export { default as CookieBanner } from './CookieBanner/CookieBanner.vue'
-export { default as CookiesSelection } from './CookiesSelection/CookiesSelection.vue'
-export { default as CookiesInformation } from './CookiesSelection/CookiesInformation/CookiesInformation.vue'
-export { default as CookiesTable } from './CookiesSelection/CookiesTable/CookiesTable.vue'