diff --git a/packages/react/src/components/Alert/AlertAdditionalExpandable.tsx b/packages/react/src/components/Alert/AlertAdditionalExpandable.tsx
index f9803a0..ec15f64 100644
--- a/packages/react/src/components/Alert/AlertAdditionalExpandable.tsx
+++ b/packages/react/src/components/Alert/AlertAdditionalExpandable.tsx
@@ -11,7 +11,7 @@ export const AlertAdditionalExpandable = (props: AlertProps) => {
   const [expanded, onExpand] = useControllableState(
     false,
     props.expanded,
-    props.onExpand
+    props.onExpand,
   );
 
   const iconButton = (
diff --git a/packages/react/src/components/Alert/Utils.tsx b/packages/react/src/components/Alert/Utils.tsx
index 46f457b..accbfb0 100644
--- a/packages/react/src/components/Alert/Utils.tsx
+++ b/packages/react/src/components/Alert/Utils.tsx
@@ -14,7 +14,7 @@ export const AlertWrapper = (props: AlertProps) => {
         props.className,
         {
           "c__alert--hide": props.hide,
-        }
+        },
       )}
     >
       {props.children}
diff --git a/packages/react/src/components/Alert/index.spec.tsx b/packages/react/src/components/Alert/index.spec.tsx
index f615a0a..d40ed17 100644
--- a/packages/react/src/components/Alert/index.spec.tsx
+++ b/packages/react/src/components/Alert/index.spec.tsx
@@ -17,7 +17,7 @@ describe("<Alert/>", () => {
     render(
       <CunninghamProvider>
         <Alert type={type}>Alert component</Alert>
-      </CunninghamProvider>
+      </CunninghamProvider>,
     );
     const $icon = document.querySelector(".c__alert__icon");
     if (icon) {
@@ -32,7 +32,7 @@ describe("<Alert/>", () => {
         <Alert type={VariantType.INFO} additional="Additional information">
           Alert component
         </Alert>
-      </CunninghamProvider>
+      </CunninghamProvider>,
     );
     expect(screen.getByText("Additional information")).toBeInTheDocument();
   });
@@ -42,7 +42,7 @@ describe("<Alert/>", () => {
         <Alert type={VariantType.INFO} primaryLabel="Primary">
           Alert component
         </Alert>
-      </CunninghamProvider>
+      </CunninghamProvider>,
     );
     screen.getByRole("button", { name: "Primary" });
   });
@@ -52,7 +52,7 @@ describe("<Alert/>", () => {
         <Alert type={VariantType.INFO} tertiaryLabel="Tertiary">
           Alert component
         </Alert>
-      </CunninghamProvider>
+      </CunninghamProvider>,
     );
     screen.getByRole("button", { name: "Tertiary" });
   });
@@ -66,7 +66,7 @@ describe("<Alert/>", () => {
         >
           Alert component
         </Alert>
-      </CunninghamProvider>
+      </CunninghamProvider>,
     );
     screen.getByRole("button", { name: "Primary" });
     screen.getByRole("button", { name: "Tertiary" });
@@ -85,7 +85,7 @@ describe("<Alert/>", () => {
         >
           Alert component
         </Alert>
-      </CunninghamProvider>
+      </CunninghamProvider>,
     );
     screen.getByRole("button", { name: "Primary Custom" });
     screen.getByRole("button", { name: "Secondary Custom" });
@@ -96,7 +96,7 @@ describe("<Alert/>", () => {
         <Alert type={VariantType.INFO} canClose={true}>
           Alert component
         </Alert>
-      </CunninghamProvider>
+      </CunninghamProvider>,
     );
 
     screen.getByText("Alert component");
@@ -165,14 +165,14 @@ describe("<Alert/>", () => {
         >
           Alert component
         </Alert>
-      </CunninghamProvider>
+      </CunninghamProvider>,
     );
 
     const user = userEvent.setup();
 
     screen.getByText("Alert component");
     expect(
-      screen.queryByText("Additional information")
+      screen.queryByText("Additional information"),
     ).not.toBeInTheDocument();
 
     const $expandButton = screen.getByRole("button", { name: "Expand alert" });
@@ -184,7 +184,7 @@ describe("<Alert/>", () => {
     await user.click($shrinkButton);
 
     expect(
-      screen.queryByText("Additional information")
+      screen.queryByText("Additional information"),
     ).not.toBeInTheDocument();
   });
   it("can expand the alert controlled", async () => {
@@ -226,7 +226,7 @@ describe("<Alert/>", () => {
 
     screen.getByText("Expanded: false");
     expect(
-      screen.queryByText("Additional information")
+      screen.queryByText("Additional information"),
     ).not.toBeInTheDocument();
 
     // Expand from alert.
@@ -246,14 +246,14 @@ describe("<Alert/>", () => {
 
     screen.getByText("Expanded: false");
     expect(
-      screen.queryByText("Additional information")
+      screen.queryByText("Additional information"),
     ).not.toBeInTheDocument();
   });
 
   it("renders with className", async () => {
     render(<Alert className="my-custom-class" />);
     expect(
-      document.querySelector(".c__alert.my-custom-class")
+      document.querySelector(".c__alert.my-custom-class"),
     ).toBeInTheDocument();
   });
 });
diff --git a/packages/react/src/components/Alert/tokens.ts b/packages/react/src/components/Alert/tokens.ts
index d0f3f1a..e9e0fb2 100644
--- a/packages/react/src/components/Alert/tokens.ts
+++ b/packages/react/src/components/Alert/tokens.ts
@@ -2,7 +2,8 @@ import { DefaultTokens } from "@openfun/cunningham-tokens";
 
 export const tokens = (defaults: DefaultTokens) => {
   return {
-    "background-color": defaults.contextuals.background.semantic.neutral.tertiary,
+    "background-color":
+      defaults.contextuals.background.semantic.neutral.tertiary,
     "border-radius": "4px",
     "border-color": defaults.contextuals.border.semantic.neutral.primary,
     "border-left-color": defaults.contextuals.border.semantic.neutral.primary,
diff --git a/packages/react/src/components/Button/index.tsx b/packages/react/src/components/Button/index.tsx
index 78ea34c..04c9fb4 100644
--- a/packages/react/src/components/Button/index.tsx
+++ b/packages/react/src/components/Button/index.tsx
@@ -79,6 +79,6 @@ export const Button = ({
       {!!icon && iconPosition === "left" && iconElement}
       {children}
       {!!icon && iconPosition === "right" && iconElement}
-    </>
+    </>,
   );
 };
diff --git a/packages/react/src/components/DataGrid/index.spec.tsx b/packages/react/src/components/DataGrid/index.spec.tsx
index 580fda3..80a7836 100644
--- a/packages/react/src/components/DataGrid/index.spec.tsx
+++ b/packages/react/src/components/DataGrid/index.spec.tsx
@@ -97,7 +97,7 @@ describe("<DataGrid/>", () => {
 
     fetchMock.mockIf(
       "https://example.com/?page=1&sort=lastName&sortOrder=desc",
-      () => deferred.promise
+      () => deferred.promise,
     );
 
     render(<Component />);
@@ -115,8 +115,8 @@ describe("<DataGrid/>", () => {
         JSON.stringify({
           rows: database.slice(0, 10),
           count: database.length,
-        })
-      )
+        }),
+      ),
     );
 
     // Make sure the loader disappears.
@@ -124,8 +124,8 @@ describe("<DataGrid/>", () => {
       expect(
         screen.queryByRole("status", {
           name: "Loading data",
-        })
-      ).toBeNull()
+        }),
+      ).toBeNull(),
     );
 
     // Make sure the rows are rendered.
@@ -154,7 +154,7 @@ describe("<DataGrid/>", () => {
     deferred = new Deferred();
     fetchMock.mockIf(
       "https://example.com/?page=2&sort=lastName&sortOrder=desc",
-      () => deferred.promise
+      () => deferred.promise,
     );
 
     // Go to page 2.
@@ -187,8 +187,8 @@ describe("<DataGrid/>", () => {
         JSON.stringify({
           rows: database.slice(10, 20),
           count: database.length,
-        })
-      )
+        }),
+      ),
     );
 
     // Make sure the loader disappears.
@@ -196,8 +196,8 @@ describe("<DataGrid/>", () => {
       expect(
         screen.queryByRole("status", {
           name: "Loading data",
-        })
-      ).toBeNull()
+        }),
+      ).toBeNull(),
     );
 
     // Make sure the rows are rendered.
@@ -330,15 +330,15 @@ describe("<DataGrid/>", () => {
       expect(tds.length).toBe(3);
       expect(tds[0].textContent).toEqual(row.firstName);
       expect(Array.from(tds[0].classList)).toContain(
-        "c__datagrid__row__cell--highlight"
+        "c__datagrid__row__cell--highlight",
       );
       expect(tds[1].textContent).toEqual(row.lastName);
       expect(Array.from(tds[1].classList)).not.toContain(
-        "c__datagrid__row__cell--highlight"
+        "c__datagrid__row__cell--highlight",
       );
       expect(tds[2].textContent).toEqual(row.email);
       expect(Array.from(tds[2].classList)).toContain(
-        "c__datagrid__row__cell--highlight"
+        "c__datagrid__row__cell--highlight",
       );
     });
   });
@@ -395,10 +395,10 @@ describe("<DataGrid/>", () => {
           rows={[]}
           className="my-custom-class"
         />
-      </CunninghamProvider>
+      </CunninghamProvider>,
     );
     expect(
-      document.querySelector(".c__datagrid.my-custom-class")
+      document.querySelector(".c__datagrid.my-custom-class"),
     ).toBeInTheDocument();
   });
 
diff --git a/packages/react/src/components/DataGrid/index.stories.tsx b/packages/react/src/components/DataGrid/index.stories.tsx
index b4da8b1..a05f138 100644
--- a/packages/react/src/components/DataGrid/index.stories.tsx
+++ b/packages/react/src/components/DataGrid/index.stories.tsx
@@ -198,14 +198,14 @@ export const FullServerSide = () => {
     setTimeout(() => {
       // Set the pagination length.
       pagination.setPagesCount(
-        Math.ceil(sortedDatabase.length / pagination.pageSize)
+        Math.ceil(sortedDatabase.length / pagination.pageSize),
       );
       // Select the rows to display on the current page.
       setRows(
         sortedDatabase.slice(
           (pagination.page - 1) * pagination.pageSize,
-          pagination.page * pagination.pageSize
-        )
+          pagination.page * pagination.pageSize,
+        ),
       );
       setIsLoading(false);
     }, 1000);
diff --git a/packages/react/src/components/DataGrid/index.tsx b/packages/react/src/components/DataGrid/index.tsx
index 78c62dd..43976d0 100644
--- a/packages/react/src/components/DataGrid/index.tsx
+++ b/packages/react/src/components/DataGrid/index.tsx
@@ -102,7 +102,7 @@ export const DataGrid = <T extends Row>({
   headlessColumns.forEach((column) => {
     if (column.enableSorting && !onSortModelChange) {
       console.warn(
-        "You are using a column with sorting enabled, but you are not providing an `onSortModelChange` handler. The sorting will not work as expected."
+        "You are using a column with sorting enabled, but you are not providing an `onSortModelChange` handler. The sorting will not work as expected.",
       );
     }
   });
@@ -112,11 +112,11 @@ export const DataGrid = <T extends Row>({
    */
   const paginationState = useMemo(
     () => paginationToPaginationState(pagination),
-    [pagination]
+    [pagination],
   );
   const headlessSorting = useMemo(
     () => sortModelToSortingState(sortModel),
-    [sortModel]
+    [sortModel],
   );
 
   /**
@@ -139,7 +139,7 @@ export const DataGrid = <T extends Row>({
       // a TS error.
       if (typeof newHeadlessSorting === "function") {
         onSortModelChange?.(
-          sortingStateToSortModel(newHeadlessSorting(headlessSorting))
+          sortingStateToSortModel(newHeadlessSorting(headlessSorting)),
         );
       }
     },
@@ -221,7 +221,7 @@ export const DataGrid = <T extends Row>({
                                     {
                                       "c__datagrid__header--sortable":
                                         header.column.getCanSort(),
-                                    }
+                                    },
                                   )}
                                   {...(header.column.getCanSort()
                                     ? {
@@ -240,13 +240,13 @@ export const DataGrid = <T extends Row>({
                                       indeterminate={table.getIsSomeRowsSelected()}
                                       onChange={table.getToggleAllRowsSelectedHandler()}
                                       aria-label={t(
-                                        "components.datagrid.rows_selection_aria"
+                                        "components.datagrid.rows_selection_aria",
                                       )}
                                     />
                                   ) : (
                                     flexRender(
                                       header.column.columnDef.header,
-                                      header.getContext()
+                                      header.getContext(),
                                     )
                                   )}
                                   {header.column.getIsSorted() === "asc" && (
@@ -303,7 +303,7 @@ export const DataGrid = <T extends Row>({
                           >
                             {flexRender(
                               cell.column.columnDef.cell,
-                              cell.getContext()
+                              cell.getContext(),
                             )}
                           </td>
                         );
diff --git a/packages/react/src/components/Forms/Checkbox/tokens.ts b/packages/react/src/components/Forms/Checkbox/tokens.ts
index a03467f..fe4d819 100644
--- a/packages/react/src/components/Forms/Checkbox/tokens.ts
+++ b/packages/react/src/components/Forms/Checkbox/tokens.ts
@@ -12,9 +12,12 @@ export const tokens = (defaults: DefaultTokens) => ({
   "accent-color": defaults.contextuals.content.semantic.contextual.primary,
 
   size: "1.5rem",
-  "background-color--checked": defaults.contextuals.content.semantic.brand.tertiary,
+  "background-color--checked":
+    defaults.contextuals.content.semantic.brand.tertiary,
   "background-color--indeterminate":
     defaults.contextuals.content.semantic.brand.tertiary,
-  "background-color--disabled": defaults.contextuals.content.semantic.disabled.primary,
-  "border-color--disabled": defaults.contextuals.content.semantic.disabled.primary,
+  "background-color--disabled":
+    defaults.contextuals.content.semantic.disabled.primary,
+  "border-color--disabled":
+    defaults.contextuals.content.semantic.disabled.primary,
 });
diff --git a/packages/react/src/components/Forms/DatePicker/Calendar.tsx b/packages/react/src/components/Forms/DatePicker/Calendar.tsx
index 06e96d7..a18b071 100644
--- a/packages/react/src/components/Forms/DatePicker/Calendar.tsx
+++ b/packages/react/src/components/Forms/DatePicker/Calendar.tsx
@@ -117,7 +117,7 @@ const CalendarAux = ({
   const monthItems: Array<Option> = useMemo(() => {
     // Note that in some calendar systems, such as the Hebrew, the number of months may differ between years.
     const numberOfMonths = state.focusedDate.calendar.getMonthsInYear(
-      state.focusedDate
+      state.focusedDate,
     );
     return range(1, numberOfMonths).map((monthNumber) => {
       const date = state.focusedDate.set({ month: monthNumber });
@@ -133,15 +133,16 @@ const CalendarAux = ({
 
   const yearItems: Array<Option> = useMemo(() => {
     const calendarCurrentUser = createCalendar(
-      new Intl.DateTimeFormat().resolvedOptions().calendar as CalendarIdentifier
+      new Intl.DateTimeFormat().resolvedOptions()
+        .calendar as CalendarIdentifier,
     );
     const minDate = toCalendar(
       new CalendarDate(new GregorianCalendar(), minYear, 1, 1),
-      calendarCurrentUser
+      calendarCurrentUser,
     );
     const maxDate = toCalendar(
       new CalendarDate(new GregorianCalendar(), maxYear, 12, 31),
-      calendarCurrentUser
+      calendarCurrentUser,
     );
     return range(minDate.year, maxDate.year).map((yearNumber) => {
       const date = state.focusedDate.set({ year: yearNumber });
@@ -157,7 +158,7 @@ const CalendarAux = ({
 
   const useDownshiftSelect = (
     key: string,
-    items: Array<Option>
+    items: Array<Option>,
   ): UseSelectReturnValue<Option> => {
     return useSelect({
       items,
@@ -214,12 +215,12 @@ const CalendarAux = ({
   const getToggleButtonProps = (
     key: string,
     items: Array<Option>,
-    downshift: UseSelectReturnValue<Option>
+    downshift: UseSelectReturnValue<Option>,
   ) => ({
     ...downshift.getToggleButtonProps(),
     onClick: () => {
       const selectedItem = items.find(
-        (item) => item.value === state.focusedDate[key as keyof CalendarDate]
+        (item) => item.value === state.focusedDate[key as keyof CalendarDate],
       );
       if (selectedItem) {
         downshift.selectItem(selectedItem);
@@ -227,7 +228,7 @@ const CalendarAux = ({
       downshift.toggleMenu();
     },
     "aria-label": t(
-      `components.forms.date_picker.${key}_select_button_aria_label`
+      `components.forms.date_picker.${key}_select_button_aria_label`,
     ),
   });
 
@@ -263,7 +264,7 @@ const CalendarAux = ({
               {...{
                 ...prevButtonOtherProps,
                 "aria-label": t(
-                  "components.forms.date_picker.previous_month_button_aria_label"
+                  "components.forms.date_picker.previous_month_button_aria_label",
                 ),
               }}
               disabled={isPrevButtonDisabled}
@@ -281,7 +282,7 @@ const CalendarAux = ({
               {...getToggleButtonProps("month", monthItems, downshiftMonth)}
             >
               {selectedMonthItemFormatter.format(
-                state.focusedDate.toDate(state.timeZone)
+                state.focusedDate.toDate(state.timeZone),
               )}
             </Button>
             <Button
@@ -293,7 +294,7 @@ const CalendarAux = ({
               {...{
                 ...nextButtonOtherProps,
                 "aria-label": t(
-                  "components.forms.date_picker.next_month_button_aria_label"
+                  "components.forms.date_picker.next_month_button_aria_label",
                 ),
               }}
               disabled={isNextButtonDisabled}
@@ -312,7 +313,7 @@ const CalendarAux = ({
                 state.minValue.year > state.focusedDate.add({ years: -1 }).year
               }
               aria-label={t(
-                "components.forms.date_picker.previous_year_button_aria_label"
+                "components.forms.date_picker.previous_year_button_aria_label",
               )}
               type="button"
             />
@@ -327,7 +328,7 @@ const CalendarAux = ({
               {...getToggleButtonProps("year", yearItems, downshiftYear)}
             >
               {yearItemsFormatter.format(
-                state.focusedDate.toDate(state.timeZone)
+                state.focusedDate.toDate(state.timeZone),
               )}
             </Button>
             <Button
@@ -341,7 +342,7 @@ const CalendarAux = ({
                 state.maxValue.year < state.focusedDate.add({ years: 1 }).year
               }
               aria-label={t(
-                "components.forms.date_picker.next_year_button_aria_label"
+                "components.forms.date_picker.next_year_button_aria_label",
               )}
               type="button"
             />
diff --git a/packages/react/src/components/Forms/DatePicker/CalendarCell.tsx b/packages/react/src/components/Forms/DatePicker/CalendarCell.tsx
index 9914de4..599827d 100644
--- a/packages/react/src/components/Forms/DatePicker/CalendarCell.tsx
+++ b/packages/react/src/components/Forms/DatePicker/CalendarCell.tsx
@@ -75,9 +75,9 @@ export const CalendarCell = ({ state, date }: CalendarCellProps) => {
                 isSelected,
               "c__calendar__wrapper__grid__week-row__button--today": isToday(
                 date,
-                getLocalTimeZone()
+                getLocalTimeZone(),
               ),
-            }
+            },
           )}
           type="button"
           disabled={isDisabled}
diff --git a/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx b/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx
index 87aef04..be7847b 100644
--- a/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx
+++ b/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx
@@ -76,7 +76,7 @@ const DatePickerAux = ({
 
   const isDateInvalid = useMemo(
     () => pickerState.validationState === "invalid" || props.state === "error",
-    [pickerState.validationState, props.state]
+    [pickerState.validationState, props.state],
   );
 
   return (
@@ -114,7 +114,7 @@ const DatePickerAux = ({
                   name={name && `${name}_start`}
                   value={convertDateValueToString(
                     pickerState.value?.start ?? null,
-                    props.timezone
+                    props.timezone,
                   )}
                 />
                 <input
@@ -122,7 +122,7 @@ const DatePickerAux = ({
                   name={name && `${name}_end`}
                   value={convertDateValueToString(
                     pickerState.value?.end ?? null,
-                    props.timezone
+                    props.timezone,
                   )}
                 />
               </>
@@ -132,7 +132,7 @@ const DatePickerAux = ({
                 name={name}
                 value={convertDateValueToString(
                   pickerState.value,
-                  props.timezone
+                  props.timezone,
                 )}
               />
             )}
@@ -148,7 +148,7 @@ const DatePickerAux = ({
                 aria-label={t(
                   pickerState.isOpen
                     ? "components.forms.date_picker.toggle_button_aria_label_close"
-                    : "components.forms.date_picker.toggle_button_aria_label_open"
+                    : "components.forms.date_picker.toggle_button_aria_label_open",
                 )}
                 color="neutral"
                 variant="tertiary"
@@ -178,7 +178,7 @@ const DatePickerAux = ({
                 }
               }}
               aria-label={t(
-                "components.forms.date_picker.clear_button_aria_label"
+                "components.forms.date_picker.clear_button_aria_label",
               )}
               disabled={disabled}
               type="button"
diff --git a/packages/react/src/components/Forms/DatePicker/index.stories.tsx b/packages/react/src/components/Forms/DatePicker/index.stories.tsx
index e3c6b7e..3e1f68c 100644
--- a/packages/react/src/components/Forms/DatePicker/index.stories.tsx
+++ b/packages/react/src/components/Forms/DatePicker/index.stories.tsx
@@ -140,7 +140,7 @@ export const ReactHookForm = () => {
     resolver: yupResolver(
       Yup.object().shape({
         date: Yup.string().required(),
-      })
+      }),
     ),
   });
 
diff --git a/packages/react/src/components/Forms/DatePicker/tokens.ts b/packages/react/src/components/Forms/DatePicker/tokens.ts
index b8239da..431318c 100644
--- a/packages/react/src/components/Forms/DatePicker/tokens.ts
+++ b/packages/react/src/components/Forms/DatePicker/tokens.ts
@@ -2,7 +2,8 @@ import { DefaultTokens } from "@openfun/cunningham-tokens";
 
 export const tokens = (defaults: DefaultTokens) => ({
   "border-color": defaults.contextuals.border.semantic.neutral.tertiary,
-  "border-color--disabled": defaults.contextuals.border.semantic.disabled.primary,
+  "border-color--disabled":
+    defaults.contextuals.border.semantic.disabled.primary,
   "border-color--focus": defaults.contextuals.border.semantic.brand.primary,
   "border-color--hover": defaults.contextuals.border.semantic.neutral.secondary,
   "border-radius": "8px",
@@ -11,7 +12,8 @@ export const tokens = (defaults: DefaultTokens) => ({
   "border-style": "solid",
   "border-width": "1px",
   "value-color": defaults.contextuals.content.semantic.neutral.tertiary,
-  "value-color--disabled": defaults.contextuals.content.semantic.disabled.primary,
+  "value-color--disabled":
+    defaults.contextuals.content.semantic.disabled.primary,
   "font-size": defaults.globals.font.sizes.lg,
   height: "3.5rem",
   "item-background-color--hover":
@@ -26,7 +28,9 @@ export const tokens = (defaults: DefaultTokens) => ({
     defaults.contextuals.background.semantic.brand.tertiary,
   "range-selection-background-color--disabled":
     defaults.contextuals.background.semantic.neutral.tertiary,
-  "grid-cell--border-color--today": defaults.contextuals.border.semantic.brand.primary,
-  "grid-cell--color--today": defaults.contextuals.content.semantic.brand.primary,
+  "grid-cell--border-color--today":
+    defaults.contextuals.border.semantic.brand.primary,
+  "grid-cell--color--today":
+    defaults.contextuals.content.semantic.brand.primary,
   "label-color--focus": defaults.contextuals.border.semantic.brand.secondary,
 });
diff --git a/packages/react/src/components/Forms/FileUploader/FileUploaderMono.tsx b/packages/react/src/components/Forms/FileUploader/FileUploaderMono.tsx
index b4becac..760fbb6 100644
--- a/packages/react/src/components/Forms/FileUploader/FileUploaderMono.tsx
+++ b/packages/react/src/components/Forms/FileUploader/FileUploaderMono.tsx
@@ -13,7 +13,7 @@ export const FileUploaderMono = ({
   const [file, setFile] = useState<File | undefined>(
     fakeDefaultFiles && fakeDefaultFiles.length > 0
       ? fakeDefaultFiles[0]
-      : undefined
+      : undefined,
   );
   // This is made to prevent useEffects inside DropZone that depends on `files` to trigger on each render,
   // doing this preserves the reference of the array.
diff --git a/packages/react/src/components/Forms/FileUploader/FileUploaderMulti.tsx b/packages/react/src/components/Forms/FileUploader/FileUploaderMulti.tsx
index b37bc81..2dd324b 100644
--- a/packages/react/src/components/Forms/FileUploader/FileUploaderMulti.tsx
+++ b/packages/react/src/components/Forms/FileUploader/FileUploaderMulti.tsx
@@ -45,7 +45,7 @@ export const FileUploaderMulti = ({
                     "components.forms.file_uploader.delete_file_name",
                     {
                       name: file.name,
-                    }
+                    },
                   )}
                   onClick={() => {
                     setFiles(files.filter((f) => f !== file));
diff --git a/packages/react/src/components/Forms/Input/InputPassword.tsx b/packages/react/src/components/Forms/Input/InputPassword.tsx
index c74199e..437c4d0 100644
--- a/packages/react/src/components/Forms/Input/InputPassword.tsx
+++ b/packages/react/src/components/Forms/Input/InputPassword.tsx
@@ -26,7 +26,7 @@ export const InputPassword = (props: Omit<InputProps, "rightIcon">) => {
           color="neutral"
           size="small"
           aria-label={t(
-            `components.forms.input.password.${showPassword ? "hide" : "show"}_password`
+            `components.forms.input.password.${showPassword ? "hide" : "show"}_password`,
           )}
         />
       }
diff --git a/packages/react/src/components/Forms/Input/index.stories.tsx b/packages/react/src/components/Forms/Input/index.stories.tsx
index 5965c56..4b05542 100644
--- a/packages/react/src/components/Forms/Input/index.stories.tsx
+++ b/packages/react/src/components/Forms/Input/index.stories.tsx
@@ -259,7 +259,7 @@ export const ReactHookForm = () => {
       mode: "onChange",
       reValidateMode: "onChange",
       resolver: yupResolver(inputExampleSchema),
-    }
+    },
   );
 
   return (
diff --git a/packages/react/src/components/Forms/Input/tokens.ts b/packages/react/src/components/Forms/Input/tokens.ts
index eea49f9..6e2adff 100644
--- a/packages/react/src/components/Forms/Input/tokens.ts
+++ b/packages/react/src/components/Forms/Input/tokens.ts
@@ -18,5 +18,6 @@ export const tokens = (defaults: DefaultTokens) => ({
   "label-color--focus": defaults.contextuals.content.semantic.brand.primary,
   "background-color": defaults.contextuals.background.surface.secondary,
   "value-color": defaults.contextuals.content.semantic.neutral.primary,
-  "value-color--disabled": defaults.contextuals.content.semantic.disabled.primary,
+  "value-color--disabled":
+    defaults.contextuals.content.semantic.disabled.primary,
 });
diff --git a/packages/react/src/components/Forms/LabelledBox/tokens.ts b/packages/react/src/components/Forms/LabelledBox/tokens.ts
index 9d93472..1adb2ed 100644
--- a/packages/react/src/components/Forms/LabelledBox/tokens.ts
+++ b/packages/react/src/components/Forms/LabelledBox/tokens.ts
@@ -5,5 +5,6 @@ export const tokens = (defaults: DefaultTokens) => ({
   "label-color--big": defaults.contextuals.content.semantic.neutral.primary,
   "label-color--small--disabled":
     defaults.contextuals.content.semantic.neutral.secondary,
-  "label-color--big--disabled": defaults.contextuals.content.semantic.neutral.secondary,
+  "label-color--big--disabled":
+    defaults.contextuals.content.semantic.neutral.secondary,
 });
diff --git a/packages/react/src/components/Forms/Radio/tokens.ts b/packages/react/src/components/Forms/Radio/tokens.ts
index 0b52dac..fcabe3a 100644
--- a/packages/react/src/components/Forms/Radio/tokens.ts
+++ b/packages/react/src/components/Forms/Radio/tokens.ts
@@ -2,7 +2,8 @@ import { DefaultTokens } from "@openfun/cunningham-tokens";
 
 export const tokens = (defaults: DefaultTokens) => ({
   "border-color": defaults.contextuals.border.semantic.neutral.tertiary,
-  "border-color--disabled": defaults.contextuals.border.semantic.neutral.tertiary,
+  "border-color--disabled":
+    defaults.contextuals.border.semantic.neutral.tertiary,
   "accent-color": defaults.contextuals.content.semantic.brand.tertiary,
   "background-color": defaults.contextuals.background.surface.primary,
 });
diff --git a/packages/react/src/components/Forms/Select/mono-common.tsx b/packages/react/src/components/Forms/Select/mono-common.tsx
index eb98277..d374595 100644
--- a/packages/react/src/components/Forms/Select/mono-common.tsx
+++ b/packages/react/src/components/Forms/Select/mono-common.tsx
@@ -101,7 +101,7 @@ export const SelectMonoAux = ({
             "c__select--" + state,
             {
               "c__select--disabled": disabled,
-            }
+            },
           )}
           onBlur={() =>
             onBlur?.({ target: { value: downshiftReturn.selectedItem?.value } })
@@ -142,7 +142,7 @@ export const SelectMonoAux = ({
                         color="neutral"
                         size="nano"
                         aria-label={t(
-                          "components.forms.select.clear_button_aria_label"
+                          "components.forms.select.clear_button_aria_label",
                         )}
                         className="c__select__inner__actions__clear"
                         onClick={(e) => {
diff --git a/packages/react/src/components/Forms/Select/multi-common.tsx b/packages/react/src/components/Forms/Select/multi-common.tsx
index b8855ef..a3b9551 100644
--- a/packages/react/src/components/Forms/Select/multi-common.tsx
+++ b/packages/react/src/components/Forms/Select/multi-common.tsx
@@ -24,14 +24,14 @@ import { SelectMultiMenu } from ":/components/Forms/Select/multi-menu";
  */
 export function getMultiOptionsFilter(
   selectedOptions: Option[],
-  inputValue?: string
+  inputValue?: string,
 ) {
   const optionsFilter = getOptionsFilter(inputValue);
   return (option: Option) => {
     return (
       !selectedOptions.find(
         (selectedOption) =>
-          optionToValue(selectedOption) === optionToValue(option)
+          optionToValue(selectedOption) === optionToValue(option),
       ) && optionsFilter(option)
     );
   };
@@ -83,7 +83,7 @@ export const SelectMultiAux = ({ children, ...props }: SelectMultiAuxProps) => {
               "c__select--populated": props.selectedItems.length > 0,
               "c__select--monoline": props.monoline,
               "c__select--multiline": !props.monoline,
-            }
+            },
           )}
         >
           <div
@@ -121,7 +121,7 @@ export const SelectMultiAux = ({ children, ...props }: SelectMultiAuxProps) => {
                           color="neutral"
                           size="nano"
                           aria-label={t(
-                            "components.forms.select.clear_all_button_aria_label"
+                            "components.forms.select.clear_all_button_aria_label",
                           )}
                           className="c__select__inner__actions__clear"
                           onClick={(e) => {
diff --git a/packages/react/src/components/Forms/Select/multi-selected-items.tsx b/packages/react/src/components/Forms/Select/multi-selected-items.tsx
index 8576e94..038ba42 100644
--- a/packages/react/src/components/Forms/Select/multi-selected-items.tsx
+++ b/packages/react/src/components/Forms/Select/multi-selected-items.tsx
@@ -49,7 +49,7 @@ const SelectedItemsChips = ({
           onClick={(e) => {
             e.stopPropagation();
             useMultipleSelectionReturn.removeSelectedItem(
-              selectedItemForRender
+              selectedItemForRender,
             );
           }}
           icon={<span className="material-icons">close</span>}
diff --git a/packages/react/src/components/Forms/Select/multi.stories.tsx b/packages/react/src/components/Forms/Select/multi.stories.tsx
index 67026d7..058ac49 100644
--- a/packages/react/src/components/Forms/Select/multi.stories.tsx
+++ b/packages/react/src/components/Forms/Select/multi.stories.tsx
@@ -509,7 +509,7 @@ export const ReactHookForm = () => {
       .test({
         test: (cityList) =>
           cityList.every((city) =>
-            [CitiesOptionEnum.PARIS, CitiesOptionEnum.TOKYO].includes(city)
+            [CitiesOptionEnum.PARIS, CitiesOptionEnum.TOKYO].includes(city),
           ),
         message: "Wrong answer!",
       }),
diff --git a/packages/react/src/components/Forms/Select/tokens.ts b/packages/react/src/components/Forms/Select/tokens.ts
index 8623644..097f908 100644
--- a/packages/react/src/components/Forms/Select/tokens.ts
+++ b/packages/react/src/components/Forms/Select/tokens.ts
@@ -10,7 +10,8 @@ export const tokens = (defaults: DefaultTokens) => ({
   "border-style": "solid",
   "border-width": "1px",
   "value-color": defaults.contextuals.content.semantic.neutral.primary,
-  "value-color--disabled": defaults.contextuals.content.semantic.disabled.primary,
+  "value-color--disabled":
+    defaults.contextuals.content.semantic.disabled.primary,
   "font-size": defaults.globals.font.sizes.md,
   height: "3.5rem",
   "item-background-color--hover":
@@ -18,7 +19,8 @@ export const tokens = (defaults: DefaultTokens) => ({
   "item-background-color--selected":
     defaults.contextuals.background.semantic.brand.secondary,
   "item-color": defaults.contextuals.content.semantic.neutral.primary,
-  "item-color--disabled": defaults.contextuals.content.semantic.disabled.secondary,
+  "item-color--disabled":
+    defaults.contextuals.content.semantic.disabled.secondary,
   "item-font-size": defaults.globals.font.sizes.md,
   "background-color": defaults.contextuals.background.surface.primary,
   "menu-background-color": defaults.contextuals.background.surface.primary,
diff --git a/packages/react/src/components/Forms/Switch/index.tsx b/packages/react/src/components/Forms/Switch/index.tsx
index 6da5140..9b41fff 100644
--- a/packages/react/src/components/Forms/Switch/index.tsx
+++ b/packages/react/src/components/Forms/Switch/index.tsx
@@ -41,7 +41,7 @@ export const Switch = ({
         {
           "c__checkbox--disabled": props.disabled,
           "c__switch--full-width": props.fullWidth,
-        }
+        },
       )}
     >
       <Field compact={true} {...fieldProps}>
diff --git a/packages/react/src/components/Forms/Switch/tokens.ts b/packages/react/src/components/Forms/Switch/tokens.ts
index 3912658..c010106 100644
--- a/packages/react/src/components/Forms/Switch/tokens.ts
+++ b/packages/react/src/components/Forms/Switch/tokens.ts
@@ -2,11 +2,13 @@ import { DefaultTokens } from "@openfun/cunningham-tokens";
 
 export const tokens = (defaults: DefaultTokens) => ({
   "accent-color": defaults.contextuals.content.semantic.brand.tertiary,
-  "rail-background-color": defaults.contextuals.content.semantic.neutral.tertiary,
+  "rail-background-color":
+    defaults.contextuals.content.semantic.neutral.tertiary,
   "rail-background-color--disabled":
     defaults.contextuals.content.semantic.disabled.primary,
   "rail-border-radius": "50vw",
-  "handle-background-color": defaults.contextuals.content.semantic.contextual.primary,
+  "handle-background-color":
+    defaults.contextuals.content.semantic.contextual.primary,
   "handle-background-color--disabled":
     defaults.contextuals.content.semantic.disabled.secondary,
   "handle-border-radius": "50%",
diff --git a/packages/react/src/components/Forms/TextArea/tokens.ts b/packages/react/src/components/Forms/TextArea/tokens.ts
index baf064f..f7821f2 100644
--- a/packages/react/src/components/Forms/TextArea/tokens.ts
+++ b/packages/react/src/components/Forms/TextArea/tokens.ts
@@ -10,10 +10,12 @@ export const tokens = (defaults: DefaultTokens) => ({
   "border-color": defaults.contextuals.border.semantic.neutral.tertiary,
   "border-color--hover": defaults.contextuals.border.semantic.neutral.secondary,
   "border-color--focus": defaults.contextuals.border.semantic.brand.primary,
-  "border-color--disabled": defaults.contextuals.border.semantic.disabled.primary,
+  "border-color--disabled":
+    defaults.contextuals.border.semantic.disabled.primary,
   "border-style": "solid",
   "label-color--focus": defaults.contextuals.border.semantic.brand.primary,
   "background-color": defaults.contextuals.background.surface.primary,
   "value-color": defaults.contextuals.content.semantic.neutral.primary,
-  "value-color--disabled": defaults.contextuals.content.semantic.neutral.secondary,
+  "value-color--disabled":
+    defaults.contextuals.content.semantic.neutral.secondary,
 });
diff --git a/packages/react/src/components/Modal/MessageModal.tsx b/packages/react/src/components/Modal/MessageModal.tsx
index 7e29411..672718e 100644
--- a/packages/react/src/components/Modal/MessageModal.tsx
+++ b/packages/react/src/components/Modal/MessageModal.tsx
@@ -26,7 +26,7 @@ export const MessageModal = ({
           <span
             className={classNames(
               "material-icons",
-              `modal-message-${messageType}-icon`
+              `modal-message-${messageType}-icon`,
             )}
           >
             {iconFromType(messageType)}
diff --git a/packages/react/src/components/Toast/index.tsx b/packages/react/src/components/Toast/index.tsx
index f3a8378..5c00bdd 100644
--- a/packages/react/src/components/Toast/index.tsx
+++ b/packages/react/src/components/Toast/index.tsx
@@ -45,7 +45,7 @@ export const Toast = (props: ToastProps) => {
 
   const removeAfterAnimation = async () => {
     await Promise.allSettled(
-      container.current!.getAnimations().map((animation) => animation.finished)
+      container.current!.getAnimations().map((animation) => animation.finished),
     );
     props.onDelete?.();
   };
diff --git a/packages/react/src/components/Toast/tokens.ts b/packages/react/src/components/Toast/tokens.ts
index 29601cd..19ee1bf 100644
--- a/packages/react/src/components/Toast/tokens.ts
+++ b/packages/react/src/components/Toast/tokens.ts
@@ -4,7 +4,8 @@ export const tokens = (defaults: DefaultTokens) => {
   return {
     "slide-in-duration": "1000ms",
     "slide-out-duration": "300ms",
-    "background-color": defaults.contextuals.background.semantic.neutral.tertiary,
+    "background-color":
+      defaults.contextuals.background.semantic.neutral.tertiary,
     color: defaults.contextuals.content.semantic.neutral.primary,
     "font-weight": defaults.globals.font.weights.regular,
     "icon-size": "19px",
diff --git a/packages/react/src/components/Tooltip/index.spec.tsx b/packages/react/src/components/Tooltip/index.spec.tsx
index 8822a07..69eabfc 100644
--- a/packages/react/src/components/Tooltip/index.spec.tsx
+++ b/packages/react/src/components/Tooltip/index.spec.tsx
@@ -17,7 +17,7 @@ describe("<Tooltip />", () => {
         <Button size="nano" variant="tertiary">
           ⬅️
         </Button>
-      </Tooltip>
+      </Tooltip>,
     );
 
     const button = screen.getByRole("button");
@@ -36,7 +36,7 @@ describe("<Tooltip />", () => {
         <Button size="nano" variant="tertiary">
           ⬅️
         </Button>
-      </Tooltip>
+      </Tooltip>,
     );
 
     expect(screen.queryByText("Hi there")).not.toBeInTheDocument();
@@ -54,7 +54,7 @@ describe("<Tooltip />", () => {
         <Button size="nano" variant="tertiary">
           ⬅️
         </Button>
-      </Tooltip>
+      </Tooltip>,
     );
 
     expect(screen.queryByText("Hi there")).not.toBeInTheDocument();
@@ -105,7 +105,7 @@ describe("<Tooltip />", () => {
         <Button size="nano" variant="tertiary">
           ⬅️
         </Button>
-      </Tooltip>
+      </Tooltip>,
     );
 
     const button = screen.getByRole("button");
@@ -131,7 +131,7 @@ describe("<Tooltip />", () => {
         <Button size="nano" variant="tertiary">
           ⬅️
         </Button>
-      </Tooltip>
+      </Tooltip>,
     );
 
     const button = screen.getByRole("button");
diff --git a/packages/react/src/docs/colors.stories.tsx b/packages/react/src/docs/colors.stories.tsx
index a0a1204..56667fb 100644
--- a/packages/react/src/docs/colors.stories.tsx
+++ b/packages/react/src/docs/colors.stories.tsx
@@ -99,7 +99,7 @@ export const ContextualBackgrounds: Story = {
           }));
         }
         return [];
-      }
+      },
     );
 
     // Group by category
@@ -111,7 +111,7 @@ export const ContextualBackgrounds: Story = {
         acc[entry.category].push(entry);
         return acc;
       },
-      {} as Record<string, typeof backgroundEntries>
+      {} as Record<string, typeof backgroundEntries>,
     );
 
     return (
diff --git a/packages/react/src/docs/spacings.stories.tsx b/packages/react/src/docs/spacings.stories.tsx
index b3a9ef4..65ebebf 100644
--- a/packages/react/src/docs/spacings.stories.tsx
+++ b/packages/react/src/docs/spacings.stories.tsx
@@ -14,7 +14,7 @@ export const Default: Story = {
     // Trier les espacements par valeur croissante avant de les afficher
     // Sort spacings by value before rendering
     const sortedSpacings = Object.entries(
-      tokens.themes.default.globals.spacings
+      tokens.themes.default.globals.spacings,
     ).sort((a, b) => {
       // On retire les éventuelles unités pour comparer numériquement
       const parse = (v: any) =>