From 2bdc92f8bbb8baacde68869469485411f009eb02 Mon Sep 17 00:00:00 2001
From: Maxime Golfier <25312957+maxgfr@users.noreply.github.com>
Date: Thu, 20 Jun 2024 21:01:57 +0200
Subject: [PATCH] feat(combobox): use `downshift` instead of
 `react-autosuggest` (#5972)

* fix: autoscroll

* fix: autoscroll

* fix: snapshot

* fix: test

* fix: test

* fix: test

* fix: snapshot

* fix: snapshot

* fix: snapshot

* fix: snapshot

* fix: default value

* fix: default value

* fix: test
---
 .../__snapshots__/a-propos.test.tsx.snap      |  41 +-
 .../droit-du-travail.test.js.snap             |  41 +-
 .../fiche-ministere-travail.test.tsx.snap     |  41 +-
 .../glossaire-[slug].test.tsx.snap            |  41 +-
 .../__snapshots__/glossaire.test.tsx.snap     |  41 +-
 .../mentions-legales.test.tsx.snap            |  41 +-
 .../modeles-de-courriers-[slug].test.tsx.snap |  41 +-
 .../modeles-de-courriers.test.tsx.snap        |  41 +-
 .../__snapshots__/recherche.test.js.snap      |  41 +-
 .../__snapshots__/stats.test.tsx.snap         |  41 +-
 .../__snapshots__/themes.test.tsx.snap        |  41 +-
 .../code-du-travail-frontend/package.json     |   3 +-
 .../AgreementInput/SearchAgreementInput.tsx   | 182 ++--
 .../AgreementSearch/AgreementNoResult.tsx     |  26 +-
 .../__snapshots__/Wizard.test.tsx.snap        | 154 ++--
 .../src/search/SearchBar/DocumentSuggester.js | 131 ---
 .../SearchBar/DocumentSuggesterTheme.ts       |  41 -
 .../__tests__/DocumentSuggester.test.js       |  87 --
 .../DocumentSuggester.test.js.snap            | 142 ----
 .../search/SearchBar/{index.js => index.tsx}  | 207 +++--
 .../src/search/__tests__/SearchBar.test.js    |  73 --
 .../src/search/__tests__/SearchHero.test.js   |  26 -
 .../__snapshots__/SearchBar.test.js.snap      | 201 -----
 .../__snapshots__/SearchHero.test.js.snap     | 786 ------------------
 packages/react-ui/package.json                |   4 +-
 .../react-ui/src/ScreenReaderOnly/index.js    |  21 +-
 packages/react-ui/types.d.ts                  |   1 +
 yarn.lock                                     | 116 +--
 28 files changed, 538 insertions(+), 2114 deletions(-)
 delete mode 100644 packages/code-du-travail-frontend/src/search/SearchBar/DocumentSuggester.js
 delete mode 100644 packages/code-du-travail-frontend/src/search/SearchBar/DocumentSuggesterTheme.ts
 delete mode 100644 packages/code-du-travail-frontend/src/search/SearchBar/__tests__/DocumentSuggester.test.js
 delete mode 100644 packages/code-du-travail-frontend/src/search/SearchBar/__tests__/__snapshots__/DocumentSuggester.test.js.snap
 rename packages/code-du-travail-frontend/src/search/SearchBar/{index.js => index.tsx} (55%)
 delete mode 100644 packages/code-du-travail-frontend/src/search/__tests__/SearchBar.test.js
 delete mode 100644 packages/code-du-travail-frontend/src/search/__tests__/SearchHero.test.js
 delete mode 100644 packages/code-du-travail-frontend/src/search/__tests__/__snapshots__/SearchBar.test.js.snap
 delete mode 100644 packages/code-du-travail-frontend/src/search/__tests__/__snapshots__/SearchHero.test.js.snap
 create mode 100644 packages/react-ui/types.d.ts

diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/a-propos.test.tsx.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/a-propos.test.tsx.snap
index f7db31a5d6..4ef62e527d 100644
--- a/packages/code-du-travail-frontend/__tests__/__snapshots__/a-propos.test.tsx.snap
+++ b/packages/code-du-travail-frontend/__tests__/__snapshots__/a-propos.test.tsx.snap
@@ -62,7 +62,7 @@ exports[`<About /> should render 1`] = `
         >
           <form
             action="/recherche"
-            class="sc-kCMKrZ fAggpb"
+            class="sc-dQEtJz dDGKmp"
             role="search"
           >
             <div
@@ -74,41 +74,28 @@ exports[`<About /> should render 1`] = `
                 Rechercher
               </label>
             </div>
-            <div
+            <input
+              aria-activedescendant=""
+              aria-autocomplete="list"
+              aria-controls="downshift-:r0:-menu"
               aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="react-autowhatever-1"
+              aria-labelledby="downshift-:r0:-label"
+              autocomplete="off"
+              class="sc-iLsKjm cykCX"
+              id="floating-search"
+              placeholder="Rechercher"
               role="combobox"
-              style="flex: 1 1 auto;"
-            >
-              <input
-                aria-autocomplete="list"
-                aria-controls="react-autowhatever-1"
-                aria-label="recherchez par mots-clés"
-                autocomplete="off"
-                class="sc-iLsKjm cykCX"
-                id="floating-search"
-                name="q"
-                placeholder="Rechercher"
-                title="recherchez par mots-clés"
-                type="search"
-                value=""
-              />
-              <div
-                class="sc-imwsjW MXbtV"
-                id="react-autowhatever-1"
-                role="listbox"
-              />
-            </div>
+              value=""
+            />
             <button
               aria-label="Lancer ma recherche"
-              class="sc-kOPcWz kyVwqT sc-eifrsQ hbTAEy"
+              class="sc-kOPcWz kyVwqT sc-epALIP hCiGPx"
               title="Lancer ma recherche"
               type="submit"
             >
               <svg
                 aria-hidden="true"
-                class="sc-dJiZtA dqyRfb"
+                class="sc-imwsjW kdnIoO"
                 fill="none"
                 viewBox="0 0 32 32"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/droit-du-travail.test.js.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/droit-du-travail.test.js.snap
index 86d62f1a1b..3ff729f6c2 100644
--- a/packages/code-du-travail-frontend/__tests__/__snapshots__/droit-du-travail.test.js.snap
+++ b/packages/code-du-travail-frontend/__tests__/__snapshots__/droit-du-travail.test.js.snap
@@ -62,7 +62,7 @@ exports[`<DroitDuTravail /> should render 1`] = `
         >
           <form
             action="/recherche"
-            class="sc-bfhvDw ciumlM"
+            class="sc-fKWMtX nLBUO"
             role="search"
           >
             <div
@@ -74,41 +74,28 @@ exports[`<DroitDuTravail /> should render 1`] = `
                 Rechercher
               </label>
             </div>
-            <div
+            <input
+              aria-activedescendant=""
+              aria-autocomplete="list"
+              aria-controls="downshift-:r0:-menu"
               aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="react-autowhatever-1"
+              aria-labelledby="downshift-:r0:-label"
+              autocomplete="off"
+              class="sc-hBtRBD jBDoTn"
+              id="floating-search"
+              placeholder="Rechercher"
               role="combobox"
-              style="flex: 1 1 auto;"
-            >
-              <input
-                aria-autocomplete="list"
-                aria-controls="react-autowhatever-1"
-                aria-label="recherchez par mots-clés"
-                autocomplete="off"
-                class="sc-hBtRBD jBDoTn"
-                id="floating-search"
-                name="q"
-                placeholder="Rechercher"
-                title="recherchez par mots-clés"
-                type="search"
-                value=""
-              />
-              <div
-                class="sc-kgOKUu dhyfuU"
-                id="react-autowhatever-1"
-                role="listbox"
-              />
-            </div>
+              value=""
+            />
             <button
               aria-label="Lancer ma recherche"
-              class="sc-kOPcWz kyVwqT sc-bOQTJJ eMnhEA"
+              class="sc-kOPcWz kyVwqT sc-fUBkdm gLfJpD"
               title="Lancer ma recherche"
               type="submit"
             >
               <svg
                 aria-hidden="true"
-                class="sc-cMa-dbN xePnd"
+                class="sc-kgOKUu iKwraL"
                 fill="none"
                 viewBox="0 0 32 32"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/fiche-ministere-travail.test.tsx.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/fiche-ministere-travail.test.tsx.snap
index 8e7b07824b..48aebf87d9 100644
--- a/packages/code-du-travail-frontend/__tests__/__snapshots__/fiche-ministere-travail.test.tsx.snap
+++ b/packages/code-du-travail-frontend/__tests__/__snapshots__/fiche-ministere-travail.test.tsx.snap
@@ -62,7 +62,7 @@ exports[`<FicheMT /> should render 1`] = `
         >
           <form
             action="/recherche"
-            class="sc-izQBue eHlhBV"
+            class="sc-dChVcU fGdpDW"
             role="search"
           >
             <div
@@ -74,41 +74,28 @@ exports[`<FicheMT /> should render 1`] = `
                 Rechercher
               </label>
             </div>
-            <div
+            <input
+              aria-activedescendant=""
+              aria-autocomplete="list"
+              aria-controls="downshift-:r0:-menu"
               aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="react-autowhatever-1"
+              aria-labelledby="downshift-:r0:-label"
+              autocomplete="off"
+              class="sc-jlGgGc dIeNLL"
+              id="floating-search"
+              placeholder="Rechercher"
               role="combobox"
-              style="flex: 1 1 auto;"
-            >
-              <input
-                aria-autocomplete="list"
-                aria-controls="react-autowhatever-1"
-                aria-label="recherchez par mots-clés"
-                autocomplete="off"
-                class="sc-jlGgGc dIeNLL"
-                id="floating-search"
-                name="q"
-                placeholder="Rechercher"
-                title="recherchez par mots-clés"
-                type="search"
-                value=""
-              />
-              <div
-                class="sc-rPWID gBbLcg"
-                id="react-autowhatever-1"
-                role="listbox"
-              />
-            </div>
+              value=""
+            />
             <button
               aria-label="Lancer ma recherche"
-              class="sc-kOPcWz kyVwqT sc-cTTdyq etgydP"
+              class="sc-kOPcWz kyVwqT sc-gtJxfw gzkgek"
               title="Lancer ma recherche"
               type="submit"
             >
               <svg
                 aria-hidden="true"
-                class="sc-jBeBSR iciHqJ"
+                class="sc-rPWID dtqUFz"
                 fill="none"
                 viewBox="0 0 32 32"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/glossaire-[slug].test.tsx.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/glossaire-[slug].test.tsx.snap
index aa4bacad51..c6726829d2 100644
--- a/packages/code-du-travail-frontend/__tests__/__snapshots__/glossaire-[slug].test.tsx.snap
+++ b/packages/code-du-travail-frontend/__tests__/__snapshots__/glossaire-[slug].test.tsx.snap
@@ -62,7 +62,7 @@ exports[`<Term /> should render 1`] = `
         >
           <form
             action="/recherche"
-            class="sc-kCMKrZ fAggpb"
+            class="sc-dQEtJz dDGKmp"
             role="search"
           >
             <div
@@ -74,41 +74,28 @@ exports[`<Term /> should render 1`] = `
                 Rechercher
               </label>
             </div>
-            <div
+            <input
+              aria-activedescendant=""
+              aria-autocomplete="list"
+              aria-controls="downshift-:r0:-menu"
               aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="react-autowhatever-1"
+              aria-labelledby="downshift-:r0:-label"
+              autocomplete="off"
+              class="sc-iLsKjm cykCX"
+              id="floating-search"
+              placeholder="Rechercher"
               role="combobox"
-              style="flex: 1 1 auto;"
-            >
-              <input
-                aria-autocomplete="list"
-                aria-controls="react-autowhatever-1"
-                aria-label="recherchez par mots-clés"
-                autocomplete="off"
-                class="sc-iLsKjm cykCX"
-                id="floating-search"
-                name="q"
-                placeholder="Rechercher"
-                title="recherchez par mots-clés"
-                type="search"
-                value=""
-              />
-              <div
-                class="sc-imwsjW MXbtV"
-                id="react-autowhatever-1"
-                role="listbox"
-              />
-            </div>
+              value=""
+            />
             <button
               aria-label="Lancer ma recherche"
-              class="sc-kOPcWz kyVwqT sc-eifrsQ hbTAEy"
+              class="sc-kOPcWz kyVwqT sc-epALIP hCiGPx"
               title="Lancer ma recherche"
               type="submit"
             >
               <svg
                 aria-hidden="true"
-                class="sc-dJiZtA dqyRfb"
+                class="sc-imwsjW kdnIoO"
                 fill="none"
                 viewBox="0 0 32 32"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/glossaire.test.tsx.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/glossaire.test.tsx.snap
index babac8f133..540c6df366 100644
--- a/packages/code-du-travail-frontend/__tests__/__snapshots__/glossaire.test.tsx.snap
+++ b/packages/code-du-travail-frontend/__tests__/__snapshots__/glossaire.test.tsx.snap
@@ -62,7 +62,7 @@ exports[`<Glossaire /> should render 1`] = `
         >
           <form
             action="/recherche"
-            class="sc-kCMKrZ fAggpb"
+            class="sc-dQEtJz dDGKmp"
             role="search"
           >
             <div
@@ -74,41 +74,28 @@ exports[`<Glossaire /> should render 1`] = `
                 Rechercher
               </label>
             </div>
-            <div
+            <input
+              aria-activedescendant=""
+              aria-autocomplete="list"
+              aria-controls="downshift-:r0:-menu"
               aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="react-autowhatever-1"
+              aria-labelledby="downshift-:r0:-label"
+              autocomplete="off"
+              class="sc-iLsKjm cykCX"
+              id="floating-search"
+              placeholder="Rechercher"
               role="combobox"
-              style="flex: 1 1 auto;"
-            >
-              <input
-                aria-autocomplete="list"
-                aria-controls="react-autowhatever-1"
-                aria-label="recherchez par mots-clés"
-                autocomplete="off"
-                class="sc-iLsKjm cykCX"
-                id="floating-search"
-                name="q"
-                placeholder="Rechercher"
-                title="recherchez par mots-clés"
-                type="search"
-                value=""
-              />
-              <div
-                class="sc-imwsjW MXbtV"
-                id="react-autowhatever-1"
-                role="listbox"
-              />
-            </div>
+              value=""
+            />
             <button
               aria-label="Lancer ma recherche"
-              class="sc-kOPcWz kyVwqT sc-eifrsQ hbTAEy"
+              class="sc-kOPcWz kyVwqT sc-epALIP hCiGPx"
               title="Lancer ma recherche"
               type="submit"
             >
               <svg
                 aria-hidden="true"
-                class="sc-dJiZtA dqyRfb"
+                class="sc-imwsjW kdnIoO"
                 fill="none"
                 viewBox="0 0 32 32"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/mentions-legales.test.tsx.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/mentions-legales.test.tsx.snap
index 19edf3483c..1b893822a9 100644
--- a/packages/code-du-travail-frontend/__tests__/__snapshots__/mentions-legales.test.tsx.snap
+++ b/packages/code-du-travail-frontend/__tests__/__snapshots__/mentions-legales.test.tsx.snap
@@ -62,7 +62,7 @@ exports[`<MentionLegales /> should render 1`] = `
         >
           <form
             action="/recherche"
-            class="sc-kCMKrZ fAggpb"
+            class="sc-dQEtJz dDGKmp"
             role="search"
           >
             <div
@@ -74,41 +74,28 @@ exports[`<MentionLegales /> should render 1`] = `
                 Rechercher
               </label>
             </div>
-            <div
+            <input
+              aria-activedescendant=""
+              aria-autocomplete="list"
+              aria-controls="downshift-:r0:-menu"
               aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="react-autowhatever-1"
+              aria-labelledby="downshift-:r0:-label"
+              autocomplete="off"
+              class="sc-iLsKjm cykCX"
+              id="floating-search"
+              placeholder="Rechercher"
               role="combobox"
-              style="flex: 1 1 auto;"
-            >
-              <input
-                aria-autocomplete="list"
-                aria-controls="react-autowhatever-1"
-                aria-label="recherchez par mots-clés"
-                autocomplete="off"
-                class="sc-iLsKjm cykCX"
-                id="floating-search"
-                name="q"
-                placeholder="Rechercher"
-                title="recherchez par mots-clés"
-                type="search"
-                value=""
-              />
-              <div
-                class="sc-imwsjW MXbtV"
-                id="react-autowhatever-1"
-                role="listbox"
-              />
-            </div>
+              value=""
+            />
             <button
               aria-label="Lancer ma recherche"
-              class="sc-kOPcWz kyVwqT sc-eifrsQ hbTAEy"
+              class="sc-kOPcWz kyVwqT sc-epALIP hCiGPx"
               title="Lancer ma recherche"
               type="submit"
             >
               <svg
                 aria-hidden="true"
-                class="sc-dJiZtA dqyRfb"
+                class="sc-imwsjW kdnIoO"
                 fill="none"
                 viewBox="0 0 32 32"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/modeles-de-courriers-[slug].test.tsx.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/modeles-de-courriers-[slug].test.tsx.snap
index 895e8330f5..342aab4ec9 100644
--- a/packages/code-du-travail-frontend/__tests__/__snapshots__/modeles-de-courriers-[slug].test.tsx.snap
+++ b/packages/code-du-travail-frontend/__tests__/__snapshots__/modeles-de-courriers-[slug].test.tsx.snap
@@ -62,7 +62,7 @@ exports[`<ModelesDeCourrier /> should render 1`] = `
         >
           <form
             action="/recherche"
-            class="sc-kCMKrZ fAggpb"
+            class="sc-dQEtJz dDGKmp"
             role="search"
           >
             <div
@@ -74,41 +74,28 @@ exports[`<ModelesDeCourrier /> should render 1`] = `
                 Rechercher
               </label>
             </div>
-            <div
+            <input
+              aria-activedescendant=""
+              aria-autocomplete="list"
+              aria-controls="downshift-:r0:-menu"
               aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="react-autowhatever-1"
+              aria-labelledby="downshift-:r0:-label"
+              autocomplete="off"
+              class="sc-iLsKjm cykCX"
+              id="floating-search"
+              placeholder="Rechercher"
               role="combobox"
-              style="flex: 1 1 auto;"
-            >
-              <input
-                aria-autocomplete="list"
-                aria-controls="react-autowhatever-1"
-                aria-label="recherchez par mots-clés"
-                autocomplete="off"
-                class="sc-iLsKjm cykCX"
-                id="floating-search"
-                name="q"
-                placeholder="Rechercher"
-                title="recherchez par mots-clés"
-                type="search"
-                value=""
-              />
-              <div
-                class="sc-imwsjW MXbtV"
-                id="react-autowhatever-1"
-                role="listbox"
-              />
-            </div>
+              value=""
+            />
             <button
               aria-label="Lancer ma recherche"
-              class="sc-kOPcWz kyVwqT sc-eifrsQ hbTAEy"
+              class="sc-kOPcWz kyVwqT sc-epALIP hCiGPx"
               title="Lancer ma recherche"
               type="submit"
             >
               <svg
                 aria-hidden="true"
-                class="sc-dJiZtA dqyRfb"
+                class="sc-imwsjW kdnIoO"
                 fill="none"
                 viewBox="0 0 32 32"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/modeles-de-courriers.test.tsx.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/modeles-de-courriers.test.tsx.snap
index e2a13ac832..585782551d 100644
--- a/packages/code-du-travail-frontend/__tests__/__snapshots__/modeles-de-courriers.test.tsx.snap
+++ b/packages/code-du-travail-frontend/__tests__/__snapshots__/modeles-de-courriers.test.tsx.snap
@@ -62,7 +62,7 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
         >
           <form
             action="/recherche"
-            class="sc-kCMKrZ fAggpb"
+            class="sc-dQEtJz dDGKmp"
             role="search"
           >
             <div
@@ -74,41 +74,28 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
                 Rechercher
               </label>
             </div>
-            <div
+            <input
+              aria-activedescendant=""
+              aria-autocomplete="list"
+              aria-controls="downshift-:r0:-menu"
               aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="react-autowhatever-1"
+              aria-labelledby="downshift-:r0:-label"
+              autocomplete="off"
+              class="sc-iLsKjm cykCX"
+              id="floating-search"
+              placeholder="Rechercher"
               role="combobox"
-              style="flex: 1 1 auto;"
-            >
-              <input
-                aria-autocomplete="list"
-                aria-controls="react-autowhatever-1"
-                aria-label="recherchez par mots-clés"
-                autocomplete="off"
-                class="sc-iLsKjm cykCX"
-                id="floating-search"
-                name="q"
-                placeholder="Rechercher"
-                title="recherchez par mots-clés"
-                type="search"
-                value=""
-              />
-              <div
-                class="sc-imwsjW MXbtV"
-                id="react-autowhatever-1"
-                role="listbox"
-              />
-            </div>
+              value=""
+            />
             <button
               aria-label="Lancer ma recherche"
-              class="sc-kOPcWz kyVwqT sc-eifrsQ hbTAEy"
+              class="sc-kOPcWz kyVwqT sc-epALIP hCiGPx"
               title="Lancer ma recherche"
               type="submit"
             >
               <svg
                 aria-hidden="true"
-                class="sc-dJiZtA dqyRfb"
+                class="sc-imwsjW kdnIoO"
                 fill="none"
                 viewBox="0 0 32 32"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/recherche.test.js.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/recherche.test.js.snap
index 0ca63137b8..f84b4a05e8 100644
--- a/packages/code-du-travail-frontend/__tests__/__snapshots__/recherche.test.js.snap
+++ b/packages/code-du-travail-frontend/__tests__/__snapshots__/recherche.test.js.snap
@@ -112,7 +112,7 @@ exports[`<Recherche /> should render 1`] = `
         >
           <form
             action="/recherche"
-            class="sc-hYmls cZgcka"
+            class="sc-fUBkdm hYdaqy"
             role="search"
           >
             <div
@@ -124,41 +124,28 @@ exports[`<Recherche /> should render 1`] = `
                 Rechercher
               </label>
             </div>
-            <div
+            <input
+              aria-activedescendant=""
+              aria-autocomplete="list"
+              aria-controls="downshift-:r0:-menu"
               aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="react-autowhatever-1"
+              aria-labelledby="downshift-:r0:-label"
+              autocomplete="off"
+              class="sc-gEkIjz ihmYtE"
+              id="search-input"
+              placeholder="congés payés, durée de préavis"
               role="combobox"
-              style="flex: 1 1 auto;"
-            >
-              <input
-                aria-autocomplete="list"
-                aria-controls="react-autowhatever-1"
-                aria-label="recherchez par mots-clés"
-                autocomplete="off"
-                class="sc-gEkIjz ihmYtE"
-                id="search-input"
-                name="q"
-                placeholder="congés payés, durée de préavis"
-                title="recherchez par mots-clés"
-                type="search"
-                value=""
-              />
-              <div
-                class="sc-hBtRBD cJLOam"
-                id="react-autowhatever-1"
-                role="listbox"
-              />
-            </div>
+              value=""
+            />
             <button
               aria-label="Lancer ma recherche"
-              class="sc-kOPcWz cefBoA sc-hoLEA iZtlxs"
+              class="sc-kOPcWz cefBoA sc-bOQTJJ hJnDeP"
               title="Lancer ma recherche"
               type="submit"
             >
               <svg
                 aria-hidden="true"
-                class="sc-bOQTJJ gofZPX"
+                class="sc-hBtRBD iUiOtB"
                 fill="none"
                 viewBox="0 0 32 32"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/stats.test.tsx.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/stats.test.tsx.snap
index 6cf51a520e..b1144d4b6b 100644
--- a/packages/code-du-travail-frontend/__tests__/__snapshots__/stats.test.tsx.snap
+++ b/packages/code-du-travail-frontend/__tests__/__snapshots__/stats.test.tsx.snap
@@ -62,7 +62,7 @@ exports[`<Stats /> should render 1`] = `
         >
           <form
             action="/recherche"
-            class="sc-kCMKrZ fAggpb"
+            class="sc-dQEtJz dDGKmp"
             role="search"
           >
             <div
@@ -74,41 +74,28 @@ exports[`<Stats /> should render 1`] = `
                 Rechercher
               </label>
             </div>
-            <div
+            <input
+              aria-activedescendant=""
+              aria-autocomplete="list"
+              aria-controls="downshift-:r0:-menu"
               aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="react-autowhatever-1"
+              aria-labelledby="downshift-:r0:-label"
+              autocomplete="off"
+              class="sc-iLsKjm cykCX"
+              id="floating-search"
+              placeholder="Rechercher"
               role="combobox"
-              style="flex: 1 1 auto;"
-            >
-              <input
-                aria-autocomplete="list"
-                aria-controls="react-autowhatever-1"
-                aria-label="recherchez par mots-clés"
-                autocomplete="off"
-                class="sc-iLsKjm cykCX"
-                id="floating-search"
-                name="q"
-                placeholder="Rechercher"
-                title="recherchez par mots-clés"
-                type="search"
-                value=""
-              />
-              <div
-                class="sc-imwsjW MXbtV"
-                id="react-autowhatever-1"
-                role="listbox"
-              />
-            </div>
+              value=""
+            />
             <button
               aria-label="Lancer ma recherche"
-              class="sc-kOPcWz kyVwqT sc-eifrsQ hbTAEy"
+              class="sc-kOPcWz kyVwqT sc-epALIP hCiGPx"
               title="Lancer ma recherche"
               type="submit"
             >
               <svg
                 aria-hidden="true"
-                class="sc-dJiZtA dqyRfb"
+                class="sc-imwsjW kdnIoO"
                 fill="none"
                 viewBox="0 0 32 32"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/themes.test.tsx.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/themes.test.tsx.snap
index 830b71a1ac..39bc5b42e7 100644
--- a/packages/code-du-travail-frontend/__tests__/__snapshots__/themes.test.tsx.snap
+++ b/packages/code-du-travail-frontend/__tests__/__snapshots__/themes.test.tsx.snap
@@ -62,7 +62,7 @@ exports[`<Theme /> should render 1`] = `
         >
           <form
             action="/recherche"
-            class="sc-fKWMtX nLBUO"
+            class="sc-lbJcrp krUqKE"
             role="search"
           >
             <div
@@ -74,41 +74,28 @@ exports[`<Theme /> should render 1`] = `
                 Rechercher
               </label>
             </div>
-            <div
+            <input
+              aria-activedescendant=""
+              aria-autocomplete="list"
+              aria-controls="downshift-:r0:-menu"
               aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="react-autowhatever-1"
+              aria-labelledby="downshift-:r0:-label"
+              autocomplete="off"
+              class="sc-cMa-dbN koAZjn"
+              id="floating-search"
+              placeholder="Rechercher"
               role="combobox"
-              style="flex: 1 1 auto;"
-            >
-              <input
-                aria-autocomplete="list"
-                aria-controls="react-autowhatever-1"
-                aria-label="recherchez par mots-clés"
-                autocomplete="off"
-                class="sc-cMa-dbN koAZjn"
-                id="floating-search"
-                name="q"
-                placeholder="Rechercher"
-                title="recherchez par mots-clés"
-                type="search"
-                value=""
-              />
-              <div
-                class="sc-eifrsQ fWGXEu"
-                id="react-autowhatever-1"
-                role="listbox"
-              />
-            </div>
+              value=""
+            />
             <button
               aria-label="Lancer ma recherche"
-              class="sc-kOPcWz kyVwqT sc-hBtRBD zOmVu"
+              class="sc-kOPcWz kyVwqT sc-bfhvDw BoDvp"
               title="Lancer ma recherche"
               type="submit"
             >
               <svg
                 aria-hidden="true"
-                class="sc-kgOKUu iKwraL"
+                class="sc-eifrsQ IOvkV"
                 fill="none"
                 viewBox="0 0 32 32"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/code-du-travail-frontend/package.json b/packages/code-du-travail-frontend/package.json
index 571787e00a..78541d3351 100644
--- a/packages/code-du-travail-frontend/package.json
+++ b/packages/code-du-travail-frontend/package.json
@@ -50,6 +50,7 @@
     "cors": "^2.8.5",
     "date-fns": "^2.22.1",
     "debounce-promise": "^3.1.2",
+    "downshift": "^9.0.6",
     "final-form": "^4.20.2",
     "final-form-arrays": "^3.0.2",
     "final-form-calculate": "^1.3.2",
@@ -66,7 +67,6 @@
     "prop-types": "^15.8.1",
     "publicodes": "1.0.0-beta.60",
     "react": "^18.2.0",
-    "react-autosuggest": "10.1.0",
     "react-dom": "^18.2.0",
     "react-final-form": "^6.5.3",
     "react-final-form-arrays": "^3.1.3",
@@ -90,7 +90,6 @@
     "@types/cors": "^2.8.13",
     "@types/debounce-promise": "^3.1.4",
     "@types/jest": "^29.5.12",
-    "@types/react-autosuggest": "^10.1.6",
     "cypress": "^13.9.0",
     "cypress-html-validate": "^6.1.0",
     "cypress-iframe": "^1.0.1",
diff --git a/packages/code-du-travail-frontend/src/outils/common/Agreement/AgreementSearch/AgreementInput/SearchAgreementInput.tsx b/packages/code-du-travail-frontend/src/outils/common/Agreement/AgreementSearch/AgreementInput/SearchAgreementInput.tsx
index 6cd98f2665..7c0f3d69f9 100644
--- a/packages/code-du-travail-frontend/src/outils/common/Agreement/AgreementSearch/AgreementInput/SearchAgreementInput.tsx
+++ b/packages/code-du-travail-frontend/src/outils/common/Agreement/AgreementSearch/AgreementInput/SearchAgreementInput.tsx
@@ -1,11 +1,8 @@
-import { Input, Label, Paragraph, Text, theme } from "@socialgouv/cdtn-ui";
+import { Label, Text, theme } from "@socialgouv/cdtn-ui";
 import React, { useState } from "react";
 import styled from "styled-components";
-import Autosuggest from "react-autosuggest";
 import { formatIdcc } from "@socialgouv/modeles-social";
-import { suggesterTheme } from "../../../../../search/SearchBar/DocumentSuggesterTheme";
 import { InfoBulle } from "../../../InfoBulle";
-import { createSuggesterHook } from "../../components/Suggester";
 import { searchAgreements } from "../../../../../conventions/Search/api/agreements.service";
 import {
   TrackingProps,
@@ -13,6 +10,12 @@ import {
 } from "../../../../ConventionCollective/types";
 import { AgreementNoResult } from "../AgreementNoResult";
 import { Agreement } from "../../../../../outils/types";
+import { useCombobox } from "downshift";
+import {
+  StyledSuggestion,
+  StyledList,
+  StyledInput,
+} from "../../../../../search/SearchBar";
 
 type Props = {
   onSelectAgreement: (agreement: Agreement) => void;
@@ -24,43 +27,49 @@ export const SearchAgreementInput = ({
   onSelectAgreement,
   searchResultOverride,
 }: Props): JSX.Element => {
-  const [query, setQuery] = useState("");
-
-  const useAgreementSuggester = createSuggesterHook(
-    searchAgreements,
-    (query) => {
-      onUserAction(UserAction.SearchAgreement, { query });
-    }
-  );
-
-  const state = useAgreementSuggester(query);
-
-  const onChange = () => {};
+  const [query, setQuery] = useState<null | string>(null);
+  const [suggestions, setSuggestions] = useState<Agreement[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
 
-  const onClear = () => {
-    setQuery("");
-  };
-
-  const onSearch = async ({ value }) => {
-    setQuery(value);
-  };
+  const {
+    isOpen,
+    getMenuProps,
+    getInputProps,
+    highlightedIndex,
+    getItemProps,
+  } = useCombobox({
+    items: suggestions,
+    onInputValueChange: async ({ inputValue }) => {
+      setIsLoading(true);
+      setQuery(inputValue);
+      try {
+        const results = await searchAgreements(inputValue);
+        if (inputValue) {
+          onUserAction(UserAction.SearchAgreement, { query: inputValue });
+        }
+        if (searchResultOverride) {
+          setSuggestions(searchResultOverride(inputValue, results));
+        } else {
+          setSuggestions(results);
+        }
+      } catch (error) {
+        setError(error);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    onSelectedItemChange(changes) {
+      const suggestion: Agreement = changes.selectedItem;
+      if (suggestion) {
+        onSelectAgreement(suggestion);
+      }
+    },
+    itemToString(item) {
+      return item ? item.shortTitle : "";
+    },
+  });
 
-  const onSelect = async (event, data) => {
-    event.preventDefault();
-    onSelectAgreement(data.suggestion);
-  };
-  const inputProps: any = {
-    "aria-label": "agreement-search-label",
-    id: "agreement-search",
-    name: "agreement-search",
-    onChange: onChange,
-    placeholder: "Ex : Transports routiers ou 1486",
-    title: "Nom de la convention collective",
-    type: "search",
-    value: query,
-    "data-testid": "agreement-search-input",
-    autoFocus: true,
-  };
   return (
     <>
       <InlineLabel htmlFor="agreement-search" id="agreement-search-label">
@@ -84,69 +93,54 @@ export const SearchAgreementInput = ({
           l’entreprise (Ex : 4752A).
         </p>
       </InfoBulle>
-      <Autosuggest
-        theme={suggesterTheme}
-        suggestions={
-          !state.isLoading && searchResultOverride
-            ? searchResultOverride(query, state.data ?? [])
-            : state.data ?? []
-        }
-        alwaysRenderSuggestions={false}
-        onSuggestionSelected={onSelect}
-        onSuggestionsFetchRequested={onSearch}
-        shouldRenderSuggestions={(value, reason) => {
-          if (reason === "escape-pressed") {
-            onClear();
-          }
-          return true;
-        }}
-        getSuggestionValue={(suggestion) => suggestion as any}
-        renderSuggestion={renderSuggestion}
-        renderSuggestionsContainer={renderSuggestionsContainer}
-        renderInputComponent={renderInputComponent}
-        inputProps={inputProps}
-        focusInputOnSuggestionClick={false}
-      />
-      <AgreementNoResult onUserAction={onUserAction} state={state} />
-    </>
-  );
-};
 
-const renderInputComponent = (inputProps) => <BlockInput {...inputProps} />;
-
-const SuggestionsContainer = styled.div`
-  li[role="option"]:nth-child(2n + 1) {
-    background: ${theme.colors.bgSecondary};
-  }
-`;
+      <StyledSearch
+        {...getInputProps()}
+        data-testid="agreement-search-input"
+        id="agreement-search"
+        placeholder={"Ex : Transports routiers ou 1486"}
+      />
 
-const renderSuggestion = (suggestion: Agreement) => {
-  return (
-    <SuggestionContainer>
-      <Paragraph noMargin>
-        {suggestion.shortTitle} (IDCC {formatIdcc(suggestion.num)})
-      </Paragraph>
-      {suggestion.highlight?.searchInfo && (
-        <Paragraph noMargin variant="secondary">
-          ({suggestion.highlight?.searchInfo})
-        </Paragraph>
+      {isOpen && suggestions.length > 0 && (
+        <StyledUl
+          {...getMenuProps()}
+          hideBorder={suggestions.length === 0 || !isOpen}
+        >
+          {suggestions.map((item: Agreement, index) => (
+            <StyledSuggestion
+              {...getItemProps({
+                item,
+                index,
+              })}
+              key={`${item}${index}`}
+              isHighlighted={highlightedIndex === index}
+            >
+              {item.shortTitle} (IDCC {formatIdcc(item.num)})
+            </StyledSuggestion>
+          ))}
+        </StyledUl>
+      )}
+      {query !== null && query !== "" && (
+        <AgreementNoResult
+          data={suggestions}
+          isLoading={isLoading}
+          error={error}
+          onUserAction={onUserAction}
+        />
       )}
-    </SuggestionContainer>
+    </>
   );
 };
 
-const SuggestionContainer = styled.div`
-  display: flex;
-  flex-direction: column;
+const StyledSearch = styled(StyledInput)`
+  margin-top: ${theme.spacings.small};
 `;
 
-const renderSuggestionsContainer = ({ containerProps, children }) => (
-  <SuggestionsContainer {...containerProps}>{children}</SuggestionsContainer>
-);
-
-const BlockInput = styled(Input)`
-  padding-top: ${theme.spacings.small};
-  width: 100%;
+const StyledUl = styled(StyledList)`
+  position: initial;
+  border: ${({ hideBorder }) =>
+    hideBorder ? "0px" : `1px solid ${theme.colors.border}`};
+  box-shadow: initial;
 `;
 
 const InlineLabel = styled(Label)`
diff --git a/packages/code-du-travail-frontend/src/outils/common/Agreement/AgreementSearch/AgreementNoResult.tsx b/packages/code-du-travail-frontend/src/outils/common/Agreement/AgreementSearch/AgreementNoResult.tsx
index cd1e9ecbf4..0da9f4bf1e 100644
--- a/packages/code-du-travail-frontend/src/outils/common/Agreement/AgreementSearch/AgreementNoResult.tsx
+++ b/packages/code-du-travail-frontend/src/outils/common/Agreement/AgreementSearch/AgreementNoResult.tsx
@@ -13,22 +13,30 @@ import Link from "next/link";
 import React from "react";
 import Spinner from "react-svg-spinner";
 import styled from "styled-components";
-import { FetchReducerState } from "../components/Suggester";
+
 import { TrackingProps, UserAction } from "../../../ConventionCollective/types";
 import { Error } from "../../ErrorField";
 import { HelpModal } from "../components/Modal";
 
 type Props = {
-  state: FetchReducerState<Agreement[]>;
+  isLoading: boolean;
+  error?: any;
+  data?: Agreement[];
+  onUserAction: (action: UserAction) => void;
 } & TrackingProps;
 
-const AgreementNoResult = ({ onUserAction, state }: Props): JSX.Element => {
+const AgreementNoResult = ({
+  isLoading,
+  error,
+  data,
+  onUserAction,
+}: Props): JSX.Element => {
   function openModalHandler(openModal: () => void) {
     onUserAction(UserAction.OpenAgreementHelp);
     openModal();
   }
 
-  if (state.isLoading) {
+  if (isLoading) {
     return (
       <Section>
         <Spinner aria-hidden="true" />{" "}
@@ -36,14 +44,14 @@ const AgreementNoResult = ({ onUserAction, state }: Props): JSX.Element => {
       </Section>
     );
   }
-  if (state.error && state.isError) {
-    if (typeof state.error === "string") {
-      return <Error>{state.error}</Error>;
+  if (error) {
+    if (typeof error === "string") {
+      return <Error>{error}</Error>;
     }
-    return <Section> {state.error}</Section>;
+    return <Section> {error}</Section>;
   }
 
-  if (state.data && !state.data.length) {
+  if (data && !data.length) {
     return (
       <Section>
         <ScreenReaderOnly role="status">0 résultat</ScreenReaderOnly>
diff --git a/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/Wizard.test.tsx.snap b/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/Wizard.test.tsx.snap
index 4aa09cc17b..45bdb0dc3d 100644
--- a/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/Wizard.test.tsx.snap
+++ b/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/Wizard.test.tsx.snap
@@ -6,35 +6,35 @@ exports[`<Wizard /> should call navigate the previous step when click on précé
     class="sc-iGgWBj biWgIW"
   >
     <form
-      class="sc-hBtRBD fnDxju"
+      class="sc-fFlnrN guAbeS"
     >
       <div
-        class="sc-lbJcrp cdhttH"
+        class="sc-hBtRBD fBOCwQ"
       >
         <div
-          class="sc-fKWMtX hAkXbB"
+          class="sc-bOQTJJ enQbXO"
         >
           <h1
-            class="sc-eifrsQ tgMxp"
+            class="sc-hYmls fxMBUA"
           >
             test H1
           </h1>
         </div>
       </div>
       <div
-        class="sc-iGgWBj sc-dQEtJz cWzIZL fChbfB"
+        class="sc-iGgWBj sc-eifrsQ cWzIZL kbgGSr"
       >
         <span
-          class="sc-imwsjW kKJSLf"
+          class="sc-fKWMtX dwODUN"
         >
           Étape
           <span
-            class="sc-kCMKrZ cfQfxP"
+            class="sc-kgOKUu lRoEZ"
           >
             s
           </span>
           <span
-            class="sc-dJiZtA dfTdvd"
+            class="sc-bfhvDw cRllDc"
           >
              
             1/2
@@ -45,21 +45,21 @@ exports[`<Wizard /> should call navigate the previous step when click on précé
         >
           <li
             aria-live="polite"
-            class="sc-epALIP xZDCN"
+            class="sc-cMa-dbN dVEDhW"
             title="onglet actif"
           >
             <span
-              class="sc-iLsKjm bpYAjG"
+              class="sc-fUBkdm gKleHP"
             >
               1
             </span>
             First Step
           </li>
           <li
-            class="sc-epALIP cJvUFn"
+            class="sc-cMa-dbN kjfnCY"
           >
             <span
-              class="sc-iLsKjm gbcIPV"
+              class="sc-fUBkdm fvEnYs"
             >
               2
             </span>
@@ -71,15 +71,15 @@ exports[`<Wizard /> should call navigate the previous step when click on précé
         Premiere Etape
       </p>
       <div
-        class="sc-fAGzit fbVmkc"
+        class="sc-epALIP gMUQhG"
       >
         <button
-          class="sc-kOPcWz cefBoA sc-dGCmGc sc-bkSUFG lmdpCB gSqrvY"
+          class="sc-kOPcWz cefBoA sc-dJiZtA sc-iLsKjm kAtcjM gdEPCY"
         >
           Commencer
           <svg
             aria-hidden="true"
-            class="sc-deXhhX kQXjDw"
+            class="sc-lbJcrp bPOrps"
             fill="none"
             viewBox="0 0 28 15"
             xmlns="http://www.w3.org/2000/svg"
@@ -102,35 +102,35 @@ exports[`<Wizard /> should handle initialState.stepIndex 1`] = `
     class="sc-iGgWBj biWgIW"
   >
     <form
-      class="sc-hBtRBD fnDxju"
+      class="sc-fFlnrN guAbeS"
     >
       <div
-        class="sc-lbJcrp cdhttH"
+        class="sc-hBtRBD fBOCwQ"
       >
         <div
-          class="sc-fKWMtX hAkXbB"
+          class="sc-bOQTJJ enQbXO"
         >
           <h1
-            class="sc-eifrsQ tgMxp"
+            class="sc-hYmls fxMBUA"
           >
             test H1
           </h1>
         </div>
       </div>
       <div
-        class="sc-iGgWBj sc-dQEtJz cWzIZL fChbfB"
+        class="sc-iGgWBj sc-eifrsQ cWzIZL kbgGSr"
       >
         <span
-          class="sc-imwsjW kKJSLf"
+          class="sc-fKWMtX dwODUN"
         >
           Étape
           <span
-            class="sc-kCMKrZ cfQfxP"
+            class="sc-kgOKUu lRoEZ"
           >
             s
           </span>
           <span
-            class="sc-dJiZtA dfTdvd"
+            class="sc-bfhvDw cRllDc"
           >
              
             2/2
@@ -140,10 +140,10 @@ exports[`<Wizard /> should handle initialState.stepIndex 1`] = `
           class="sc-cfxfcM kMmTaI"
         >
           <li
-            class="sc-epALIP cJvUFn"
+            class="sc-cMa-dbN kjfnCY"
           >
             <span
-              class="sc-iLsKjm gbcIPV"
+              class="sc-fUBkdm fvEnYs"
             >
               1
             </span>
@@ -151,11 +151,11 @@ exports[`<Wizard /> should handle initialState.stepIndex 1`] = `
           </li>
           <li
             aria-live="polite"
-            class="sc-epALIP xZDCN"
+            class="sc-cMa-dbN dVEDhW"
             title="onglet actif"
           >
             <span
-              class="sc-iLsKjm bpYAjG"
+              class="sc-fUBkdm gKleHP"
             >
               2
             </span>
@@ -178,16 +178,16 @@ exports[`<Wizard /> should handle initialState.stepIndex 1`] = `
         />
       </label>
       <div
-        class="sc-fAGzit fbVmkc"
+        class="sc-epALIP gMUQhG"
       >
         <button
-          class="sc-kOPcWz dSQWfG sc-dGCmGc lmdpCB"
+          class="sc-kOPcWz dSQWfG sc-dJiZtA kAtcjM"
           type="button"
         >
           Précédent
         </button>
         <button
-          class="sc-kOPcWz gWtlVM sc-dGCmGc lmdpCB"
+          class="sc-kOPcWz gWtlVM sc-dJiZtA kAtcjM"
           type="button"
         >
           Imprimer le résultat
@@ -204,35 +204,35 @@ exports[`<Wizard /> should handle initialValues 1`] = `
     class="sc-iGgWBj biWgIW"
   >
     <form
-      class="sc-hBtRBD fnDxju"
+      class="sc-fFlnrN guAbeS"
     >
       <div
-        class="sc-lbJcrp cdhttH"
+        class="sc-hBtRBD fBOCwQ"
       >
         <div
-          class="sc-fKWMtX hAkXbB"
+          class="sc-bOQTJJ enQbXO"
         >
           <h1
-            class="sc-eifrsQ tgMxp"
+            class="sc-hYmls fxMBUA"
           >
             test H1
           </h1>
         </div>
       </div>
       <div
-        class="sc-iGgWBj sc-dQEtJz cWzIZL fChbfB"
+        class="sc-iGgWBj sc-eifrsQ cWzIZL kbgGSr"
       >
         <span
-          class="sc-imwsjW kKJSLf"
+          class="sc-fKWMtX dwODUN"
         >
           Étape
           <span
-            class="sc-kCMKrZ cfQfxP"
+            class="sc-kgOKUu lRoEZ"
           >
             s
           </span>
           <span
-            class="sc-dJiZtA dfTdvd"
+            class="sc-bfhvDw cRllDc"
           >
              
             1/3
@@ -243,31 +243,31 @@ exports[`<Wizard /> should handle initialValues 1`] = `
         >
           <li
             aria-live="polite"
-            class="sc-epALIP xZDCN"
+            class="sc-cMa-dbN dVEDhW"
             title="onglet actif"
           >
             <span
-              class="sc-iLsKjm bpYAjG"
+              class="sc-fUBkdm gKleHP"
             >
               1
             </span>
             First Step
           </li>
           <li
-            class="sc-epALIP cJvUFn"
+            class="sc-cMa-dbN kjfnCY"
           >
             <span
-              class="sc-iLsKjm gbcIPV"
+              class="sc-fUBkdm fvEnYs"
             >
               2
             </span>
             Second Step
           </li>
           <li
-            class="sc-epALIP cJvUFn"
+            class="sc-cMa-dbN kjfnCY"
           >
             <span
-              class="sc-iLsKjm gbcIPV"
+              class="sc-fUBkdm fvEnYs"
             >
               3
             </span>
@@ -279,15 +279,15 @@ exports[`<Wizard /> should handle initialValues 1`] = `
         Premiere Etape
       </p>
       <div
-        class="sc-fAGzit fbVmkc"
+        class="sc-epALIP gMUQhG"
       >
         <button
-          class="sc-kOPcWz cefBoA sc-dGCmGc sc-bkSUFG lmdpCB gSqrvY"
+          class="sc-kOPcWz cefBoA sc-dJiZtA sc-iLsKjm kAtcjM gdEPCY"
         >
           Commencer
           <svg
             aria-hidden="true"
-            class="sc-deXhhX kQXjDw"
+            class="sc-lbJcrp bPOrps"
             fill="none"
             viewBox="0 0 28 15"
             xmlns="http://www.w3.org/2000/svg"
@@ -310,35 +310,35 @@ exports[`<Wizard /> should navigate to the second step when click on Commencer 1
     class="sc-iGgWBj biWgIW"
   >
     <form
-      class="sc-hBtRBD fnDxju"
+      class="sc-fFlnrN guAbeS"
     >
       <div
-        class="sc-lbJcrp cdhttH"
+        class="sc-hBtRBD fBOCwQ"
       >
         <div
-          class="sc-fKWMtX hAkXbB"
+          class="sc-bOQTJJ enQbXO"
         >
           <h1
-            class="sc-eifrsQ tgMxp"
+            class="sc-hYmls fxMBUA"
           >
             test H1
           </h1>
         </div>
       </div>
       <div
-        class="sc-iGgWBj sc-dQEtJz cWzIZL fChbfB"
+        class="sc-iGgWBj sc-eifrsQ cWzIZL kbgGSr"
       >
         <span
-          class="sc-imwsjW kKJSLf"
+          class="sc-fKWMtX dwODUN"
         >
           Étape
           <span
-            class="sc-kCMKrZ cfQfxP"
+            class="sc-kgOKUu lRoEZ"
           >
             s
           </span>
           <span
-            class="sc-dJiZtA dfTdvd"
+            class="sc-bfhvDw cRllDc"
           >
              
             2/2
@@ -348,10 +348,10 @@ exports[`<Wizard /> should navigate to the second step when click on Commencer 1
           class="sc-cfxfcM kMmTaI"
         >
           <li
-            class="sc-epALIP cJvUFn"
+            class="sc-cMa-dbN kjfnCY"
           >
             <span
-              class="sc-iLsKjm gbcIPV"
+              class="sc-fUBkdm fvEnYs"
             >
               1
             </span>
@@ -359,11 +359,11 @@ exports[`<Wizard /> should navigate to the second step when click on Commencer 1
           </li>
           <li
             aria-live="polite"
-            class="sc-epALIP xZDCN"
+            class="sc-cMa-dbN dVEDhW"
             title="onglet actif"
           >
             <span
-              class="sc-iLsKjm bpYAjG"
+              class="sc-fUBkdm gKleHP"
             >
               2
             </span>
@@ -386,16 +386,16 @@ exports[`<Wizard /> should navigate to the second step when click on Commencer 1
         />
       </label>
       <div
-        class="sc-fAGzit fbVmkc"
+        class="sc-epALIP gMUQhG"
       >
         <button
-          class="sc-kOPcWz dSQWfG sc-dGCmGc lmdpCB"
+          class="sc-kOPcWz dSQWfG sc-dJiZtA kAtcjM"
           type="button"
         >
           Précédent
         </button>
         <button
-          class="sc-kOPcWz gWtlVM sc-dGCmGc lmdpCB"
+          class="sc-kOPcWz gWtlVM sc-dJiZtA kAtcjM"
           type="button"
         >
           Imprimer le résultat
@@ -412,35 +412,35 @@ exports[`<Wizard /> should render a step 1`] = `
     class="sc-iGgWBj biWgIW"
   >
     <form
-      class="sc-hBtRBD fnDxju"
+      class="sc-fFlnrN guAbeS"
     >
       <div
-        class="sc-lbJcrp cdhttH"
+        class="sc-hBtRBD fBOCwQ"
       >
         <div
-          class="sc-fKWMtX hAkXbB"
+          class="sc-bOQTJJ enQbXO"
         >
           <h1
-            class="sc-eifrsQ tgMxp"
+            class="sc-hYmls fxMBUA"
           >
             test H1
           </h1>
         </div>
       </div>
       <div
-        class="sc-iGgWBj sc-dQEtJz cWzIZL fChbfB"
+        class="sc-iGgWBj sc-eifrsQ cWzIZL kbgGSr"
       >
         <span
-          class="sc-imwsjW kKJSLf"
+          class="sc-fKWMtX dwODUN"
         >
           Étape
           <span
-            class="sc-kCMKrZ cfQfxP"
+            class="sc-kgOKUu lRoEZ"
           >
             s
           </span>
           <span
-            class="sc-dJiZtA dfTdvd"
+            class="sc-bfhvDw cRllDc"
           >
              
             1/2
@@ -451,21 +451,21 @@ exports[`<Wizard /> should render a step 1`] = `
         >
           <li
             aria-live="polite"
-            class="sc-epALIP xZDCN"
+            class="sc-cMa-dbN dVEDhW"
             title="onglet actif"
           >
             <span
-              class="sc-iLsKjm bpYAjG"
+              class="sc-fUBkdm gKleHP"
             >
               1
             </span>
             First Step
           </li>
           <li
-            class="sc-epALIP cJvUFn"
+            class="sc-cMa-dbN kjfnCY"
           >
             <span
-              class="sc-iLsKjm gbcIPV"
+              class="sc-fUBkdm fvEnYs"
             >
               2
             </span>
@@ -477,15 +477,15 @@ exports[`<Wizard /> should render a step 1`] = `
         Premiere Etape
       </p>
       <div
-        class="sc-fAGzit fbVmkc"
+        class="sc-epALIP gMUQhG"
       >
         <button
-          class="sc-kOPcWz cefBoA sc-dGCmGc sc-bkSUFG lmdpCB gSqrvY"
+          class="sc-kOPcWz cefBoA sc-dJiZtA sc-iLsKjm kAtcjM gdEPCY"
         >
           Commencer
           <svg
             aria-hidden="true"
-            class="sc-deXhhX kQXjDw"
+            class="sc-lbJcrp bPOrps"
             fill="none"
             viewBox="0 0 28 15"
             xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/code-du-travail-frontend/src/search/SearchBar/DocumentSuggester.js b/packages/code-du-travail-frontend/src/search/SearchBar/DocumentSuggester.js
deleted file mode 100644
index 82a06f56cf..0000000000
--- a/packages/code-du-travail-frontend/src/search/SearchBar/DocumentSuggester.js
+++ /dev/null
@@ -1,131 +0,0 @@
-import { theme } from "@socialgouv/cdtn-ui";
-import PropTypes from "prop-types";
-import React from "react";
-import Autosuggest from "react-autosuggest";
-import styled from "styled-components";
-
-import Html from "../../common/Html";
-import { suggesterGlobalSearchTheme } from "./DocumentSuggesterTheme";
-
-const { colors } = theme;
-
-export class DocumentSuggester extends React.Component {
-  onSuggestionSelected = (event, data) => {
-    this.props.onSelect(data.suggestion, event);
-  };
-
-  onKeyPress = (event) => {
-    if (event.key === "Enter") {
-      event.target.blur();
-
-      /**
-       * HACK: @lionelb
-       * on IE, submit event are not triggered while pressing Enter
-       * if there is no <input type="submit"/> present in form
-       * solution is to dispatch the submit event manually
-       * since calling form.submit() doesn't call
-       * onSubmit react form's handler
-       */
-      const { form } = event.target;
-      if (form && form.dispatchEvent) {
-        let eventSubmit;
-        if (typeof Event === "function") {
-          eventSubmit = new Event("submit");
-        } else {
-          // Fixed IE11 issue
-          eventSubmit = document.createEvent("Event");
-          eventSubmit.initEvent("submit", false, false);
-        }
-
-        form.dispatchEvent(eventSubmit);
-      }
-    }
-  };
-
-  render() {
-    const {
-      ariaLabel,
-      className,
-      inputId,
-      query,
-      onChange,
-      onSearch,
-      onClear,
-      placeholder,
-      suggestions,
-    } = this.props;
-    const inputProps = {
-      "aria-label": ariaLabel,
-      className,
-      id: inputId,
-      name: "q",
-      onChange,
-      onKeyPress: this.onKeyPress,
-      placeholder,
-      title: ariaLabel,
-      type: "search",
-      value: query,
-    };
-    return (
-      <Autosuggest
-        theme={suggesterGlobalSearchTheme}
-        suggestions={suggestions}
-        alwaysRenderSuggestions={false}
-        onSuggestionSelected={this.onSuggestionSelected}
-        onSuggestionsFetchRequested={onSearch}
-        onSuggestionsClearRequested={onClear}
-        getSuggestionValue={getSuggestionValue}
-        renderSuggestion={(suggestion) => renderSuggestion(suggestion, query)}
-        renderSuggestionsContainer={renderSuggestionsContainer}
-        inputProps={inputProps}
-      />
-    );
-  }
-}
-
-DocumentSuggester.propTypes = {
-  hasFocus: PropTypes.bool,
-  inputId: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  onClear: PropTypes.func.isRequired,
-  onSearch: PropTypes.func.isRequired,
-  onSelect: PropTypes.func.isRequired,
-  query: PropTypes.string,
-  suggestions: PropTypes.array,
-  children: PropTypes.node,
-};
-
-DocumentSuggester.defaultProps = {
-  excludeSources: "",
-  hasFocus: false,
-  inputId: "main-search-input",
-  query: "",
-  suggestions: [],
-};
-
-const getSuggestionValue = (suggestion) => suggestion;
-
-const SuggestionContainer = styled.div`
-  p {
-    margin: 0;
-  }
-`;
-
-const renderSuggestion = (suggestion, query) => {
-  const title = suggestion.replace(query, `<strong>${query}</strong>`);
-  return (
-    <SuggestionContainer>
-      <Html as="span">{title}</Html>
-    </SuggestionContainer>
-  );
-};
-
-const SuggestionsContainer = styled.div`
-  li[role="option"]:nth-child(2n + 1) {
-    background: ${colors.bgSecondary};
-  }
-`;
-
-const renderSuggestionsContainer = ({ containerProps, children }) => (
-  <SuggestionsContainer {...containerProps}>{children}</SuggestionsContainer>
-);
diff --git a/packages/code-du-travail-frontend/src/search/SearchBar/DocumentSuggesterTheme.ts b/packages/code-du-travail-frontend/src/search/SearchBar/DocumentSuggesterTheme.ts
deleted file mode 100644
index 8fdff1adec..0000000000
--- a/packages/code-du-travail-frontend/src/search/SearchBar/DocumentSuggesterTheme.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { theme } from "@socialgouv/cdtn-ui";
-import { Theme } from "react-autosuggest";
-import * as React from "react";
-
-const suggestionsList: React.CSSProperties = {
-  zIndex: 1,
-  background: theme.colors.white,
-  border: "1px solid " + theme.colors.border,
-  borderRadius: "3px",
-  boxShadow: "0 10px 10px -10px #b7bcdf",
-  margin: 0,
-  marginTop: theme.spacings.tiny,
-  padding: 0,
-};
-
-// see https://github.com/moroshko/react-autosuggest#themeProp
-export const suggesterTheme: Theme = {
-  container: {
-    flex: "1 1 auto",
-  },
-  suggestion: {
-    borderRadius: "3px",
-    cursor: "pointer",
-    lineHeight: "2rem",
-    listStyleType: "none",
-    padding: theme.spacings.base,
-  },
-  suggestionHighlighted: {
-    background: theme.colors.bgTertiary,
-  },
-  suggestionsList,
-};
-
-export const suggesterGlobalSearchTheme: Theme = {
-  ...suggesterTheme,
-  suggestionsList: {
-    ...suggestionsList,
-    position: "absolute",
-    width: "100%",
-  },
-};
diff --git a/packages/code-du-travail-frontend/src/search/SearchBar/__tests__/DocumentSuggester.test.js b/packages/code-du-travail-frontend/src/search/SearchBar/__tests__/DocumentSuggester.test.js
deleted file mode 100644
index 9632643cfe..0000000000
--- a/packages/code-du-travail-frontend/src/search/SearchBar/__tests__/DocumentSuggester.test.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import { fireEvent, render } from "@testing-library/react";
-import React from "react";
-
-import { DocumentSuggester } from "../DocumentSuggester";
-
-const suggestions = ["foo", "foobar", "foo bar ?", "foo bazzz"];
-
-function renderDocumentSuggester({
-  onSearch = jest.fn(),
-  onSelect = jest.fn(),
-  onClear = jest.fn(),
-  onChange = jest.fn(),
-  query = "foo",
-  placeholder = "document suggester placeholder",
-  suggestions = [],
-}) {
-  return render(
-    <DocumentSuggester
-      onChange={onChange}
-      onSearch={onSearch}
-      onClear={onClear}
-      onSelect={onSelect}
-      query={query}
-      placeholder={placeholder}
-      suggestions={suggestions}
-    />
-  );
-}
-
-describe("<DocumentSuggester />", () => {
-  it("should render", () => {
-    const { container } = renderDocumentSuggester({});
-    expect(container).toMatchSnapshot();
-  });
-
-  it("should render suggestions", () => {
-    const { container, getByPlaceholderText } = renderDocumentSuggester({
-      placeholder: "search foo",
-      suggestions,
-    });
-    const input = getByPlaceholderText(/search foo/i);
-    input.focus();
-    expect(container).toMatchSnapshot();
-  });
-
-  it("should call onChange when input change", () => {
-    const onChange = jest.fn();
-    const { getByPlaceholderText } = renderDocumentSuggester({
-      onChange,
-      placeholder: "search foo",
-    });
-
-    const input = getByPlaceholderText(/search foo/i);
-    const mockEvent = { target: { value: "test" } };
-    fireEvent.change(input, mockEvent);
-    expect(onChange).toHaveBeenCalled();
-  });
-  it("should call onSearch after input has changed", () => {
-    const onSearch = jest.fn();
-
-    const { getByPlaceholderText } = renderDocumentSuggester({
-      onSearch,
-      placeholder: "search foo",
-    });
-
-    const input = getByPlaceholderText(/search foo/i);
-    const mockEvent = { target: { value: "test" } };
-    fireEvent.change(input, mockEvent);
-    expect(onSearch).toHaveBeenCalledWith(
-      expect.objectContaining({ value: "test" })
-    );
-  });
-
-  it("should call onSelect when user clicks some option", () => {
-    const onSelect = jest.fn();
-    const { getAllByRole, getByPlaceholderText } = renderDocumentSuggester({
-      onSelect,
-      placeholder: "the place to be",
-      suggestions,
-    });
-    const input = getByPlaceholderText(/the place to be/i);
-    input.focus();
-    const [option] = getAllByRole("option");
-    option.click();
-    expect(onSelect).toHaveBeenCalledWith(suggestions[0], expect.anything());
-  });
-});
diff --git a/packages/code-du-travail-frontend/src/search/SearchBar/__tests__/__snapshots__/DocumentSuggester.test.js.snap b/packages/code-du-travail-frontend/src/search/SearchBar/__tests__/__snapshots__/DocumentSuggester.test.js.snap
deleted file mode 100644
index 7f34fabcca..0000000000
--- a/packages/code-du-travail-frontend/src/search/SearchBar/__tests__/__snapshots__/DocumentSuggester.test.js.snap
+++ /dev/null
@@ -1,142 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<DocumentSuggester /> should render 1`] = `
-<div>
-  <div
-    aria-expanded="false"
-    aria-haspopup="listbox"
-    aria-owns="react-autowhatever-1"
-    role="combobox"
-    style="flex: 1 1 auto;"
-  >
-    <input
-      aria-autocomplete="list"
-      aria-controls="react-autowhatever-1"
-      autocomplete="off"
-      id="main-search-input"
-      name="q"
-      placeholder="document suggester placeholder"
-      type="search"
-      value="foo"
-    />
-    <div
-      class="sc-YysOf bZIRlW"
-      id="react-autowhatever-1"
-      role="listbox"
-    />
-  </div>
-</div>
-`;
-
-exports[`<DocumentSuggester /> should render suggestions 1`] = `
-<div>
-  <div
-    aria-expanded="true"
-    aria-haspopup="listbox"
-    aria-owns="react-autowhatever-1"
-    role="combobox"
-    style="flex: 1 1 auto;"
-  >
-    <input
-      aria-autocomplete="list"
-      aria-controls="react-autowhatever-1"
-      autocomplete="off"
-      id="main-search-input"
-      name="q"
-      placeholder="search foo"
-      type="search"
-      value="foo"
-    />
-    <div
-      class="sc-YysOf bZIRlW"
-      id="react-autowhatever-1"
-      role="listbox"
-    >
-      <ul
-        role="listbox"
-        style="z-index: 1; background: rgb(255, 255, 255); border: 1px solid #bbcadf; border-radius: 3px; box-shadow: 0 10px 10px -10px #b7bcdf; margin: 0.4rem 0px 0px 0px; padding: 0px; position: absolute; width: 100%;"
-      >
-        <li
-          aria-selected="false"
-          data-suggestion-index="0"
-          id="react-autowhatever-1--item-0"
-          role="option"
-          style="border-radius: 3px; cursor: pointer; line-height: 2rem; list-style-type: none; padding: 1.6rem;"
-        >
-          <div
-            class="sc-ktPPKK gznNzK"
-          >
-            <span
-              class="sc-fMMURN"
-            >
-              <strong>
-                foo
-              </strong>
-            </span>
-          </div>
-        </li>
-        <li
-          aria-selected="false"
-          data-suggestion-index="1"
-          id="react-autowhatever-1--item-1"
-          role="option"
-          style="border-radius: 3px; cursor: pointer; line-height: 2rem; list-style-type: none; padding: 1.6rem;"
-        >
-          <div
-            class="sc-ktPPKK gznNzK"
-          >
-            <span
-              class="sc-fMMURN"
-            >
-              <strong>
-                foo
-              </strong>
-              bar
-            </span>
-          </div>
-        </li>
-        <li
-          aria-selected="false"
-          data-suggestion-index="2"
-          id="react-autowhatever-1--item-2"
-          role="option"
-          style="border-radius: 3px; cursor: pointer; line-height: 2rem; list-style-type: none; padding: 1.6rem;"
-        >
-          <div
-            class="sc-ktPPKK gznNzK"
-          >
-            <span
-              class="sc-fMMURN"
-            >
-              <strong>
-                foo
-              </strong>
-               bar ?
-            </span>
-          </div>
-        </li>
-        <li
-          aria-selected="false"
-          data-suggestion-index="3"
-          id="react-autowhatever-1--item-3"
-          role="option"
-          style="border-radius: 3px; cursor: pointer; line-height: 2rem; list-style-type: none; padding: 1.6rem;"
-        >
-          <div
-            class="sc-ktPPKK gznNzK"
-          >
-            <span
-              class="sc-fMMURN"
-            >
-              <strong>
-                foo
-              </strong>
-               bazzz
-            </span>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>
-`;
diff --git a/packages/code-du-travail-frontend/src/search/SearchBar/index.js b/packages/code-du-travail-frontend/src/search/SearchBar/index.tsx
similarity index 55%
rename from packages/code-du-travail-frontend/src/search/SearchBar/index.js
rename to packages/code-du-travail-frontend/src/search/SearchBar/index.tsx
index 964a7629de..450426fb56 100644
--- a/packages/code-du-travail-frontend/src/search/SearchBar/index.js
+++ b/packages/code-du-travail-frontend/src/search/SearchBar/index.tsx
@@ -3,27 +3,71 @@ import { push as matopush } from "@socialgouv/matomo-next";
 import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
-
 import { fetchSuggestResults } from "../search.service";
-import { DocumentSuggester } from "./DocumentSuggester";
-
+import { useCombobox } from "downshift";
+import Html from "../../common/Html";
 const { Search: SearchIcon } = icons;
 
 const suggestMaxResults = 5;
 
+type Props = {
+  inputId: string;
+  hasButton?: boolean;
+  hasSearchIcon?: boolean;
+};
+
 const SearchBar = ({
-  hasFocus = false,
   inputId,
   hasButton = false,
   hasSearchIcon = false,
-}) => {
+}: Props) => {
   const router = useRouter();
-  // query in the input box
-  const [query, setQuery] = useState(router.query.q || "");
+  const [query, setQuery] = useState(
+    typeof router.query.q === "string" ? router.query.q : ""
+  );
   const [suggestions, setSuggestions] = useState([]);
 
+  const {
+    isOpen,
+    getMenuProps,
+    getInputProps,
+    highlightedIndex,
+    getItemProps,
+  } = useCombobox({
+    items: suggestions,
+    onInputValueChange: async ({ inputValue }) => {
+      setQuery(inputValue);
+      try {
+        const results = await fetchSuggestResults(inputValue).then((items) =>
+          items.slice(0, suggestMaxResults)
+        );
+        setSuggestions(results);
+      } catch (error) {
+        console.error("fetch error", error);
+      }
+    },
+    onSelectedItemChange(changes) {
+      const suggestion = changes.selectedItem;
+      if (suggestion) {
+        matopush(["trackEvent", "selectedSuggestion", query, suggestion]);
+        matopush([
+          "trackEvent",
+          "candidateSuggestions",
+          suggestions.join("###"),
+        ]);
+        window.scrollTo(0, 0);
+        document.body.focus();
+        router.push({
+          pathname: "/recherche",
+          query: { q: suggestion },
+        });
+      }
+    },
+    initialInputValue: query,
+  });
+
   useEffect(() => {
-    setQuery(router.query.q);
+    if (typeof router.query.q === "string") setQuery(router.query.q);
   }, [router.query.q]);
 
   const onFormSubmit = (e) => {
@@ -40,59 +84,55 @@ const SearchBar = ({
     }
   };
 
-  const onChange = (event, { newValue } = {}) => {
-    setQuery(newValue);
-  };
-
-  const onSelect = (suggestion, event) => {
-    // prevent onSubmit to be call
-    event.preventDefault();
-    matopush(["trackEvent", "selectedSuggestion", query, suggestion]);
-    matopush(["trackEvent", "candidateSuggestions", suggestions.join("###")]);
-    window.scrollTo(0, 0);
-    document.body.focus();
-    router.push({
-      pathname: "/recherche",
-      query: { q: suggestion },
-    });
-  };
-
-  const onClear = () => {
-    setSuggestions([]);
-  };
-
-  const onSearch = async ({ value }) => {
-    try {
-      const results = await fetchSuggestResults(value).then((items) =>
-        items.slice(0, suggestMaxResults)
-      );
-      setSuggestions(results);
-    } catch (error) {
-      console.error("fetch error", error);
+  function renderBoldFromQuery(item: string, query: string | string[]) {
+    if (typeof query === "string") {
+      const regex = new RegExp(`(${query})`, "gi");
+      return item.replace(regex, "<b>$1</b>");
+    } else if (Array.isArray(query)) {
+      let result = item;
+      query.forEach((q) => {
+        const regex = new RegExp(`(${q})`, "gi");
+        result = result.replace(regex, "<b>$1</b>");
+      });
+      return result;
     }
-  };
+    return item;
+  }
+
   return (
     <SearchForm role="search" action="/recherche" onSubmit={onFormSubmit}>
       <ScreenReaderOnly>
         <label htmlFor={inputId}>Rechercher</label>
       </ScreenReaderOnly>
       {hasButton && !hasSearchIcon && <SearchIconLeft aria-hidden="true" />}
-      <SearchInput
-        inputId={inputId}
-        hasFocus={hasFocus}
-        hasButton={hasButton}
-        hasSearchIcon={hasSearchIcon}
-        onChange={onChange}
-        query={query}
+
+      <StyledInput
+        {...getInputProps()}
+        id={inputId}
         placeholder={
           hasButton ? "congés payés, durée de préavis" : "Rechercher"
         }
-        onSearch={onSearch}
-        onSelect={onSelect}
-        onClear={onClear}
-        suggestions={suggestions}
-        ariaLabel="recherchez par mots-clés"
+        hasButton={hasButton}
+        hasSearchIcon={hasSearchIcon}
       />
+
+      {isOpen && suggestions.length > 0 && (
+        <StyledList {...getMenuProps()} hasButton={hasButton}>
+          {suggestions.map((item, index) => (
+            <StyledSuggestion
+              {...getItemProps({
+                item,
+                index,
+              })}
+              isHighlighted={highlightedIndex === index}
+              key={`${item}${index}`}
+            >
+              <Html>{renderBoldFromQuery(item, query)}</Html>
+            </StyledSuggestion>
+          ))}
+        </StyledList>
+      )}
+
       {hasButton ? (
         <SubmitButton
           hasSearchIcon={hasSearchIcon}
@@ -119,9 +159,7 @@ const SearchBar = ({
   );
 };
 
-export default SearchBar;
-
-const { box, breakpoints, fonts, spacings } = theme;
+const { breakpoints, spacings, fonts, box, colors } = theme;
 
 const SearchForm = styled.form`
   position: relative;
@@ -149,7 +187,27 @@ const SearchIconLeft = styled(StyledSearchIcon)`
   }
 `;
 
-const SearchInput = styled(DocumentSuggester)`
+const SubmitButton = styled(Button)`
+  position: absolute;
+  top: ${spacings.xsmall};
+  right: ${spacings.xsmall};
+  ${({ hasSearchIcon }) => hasSearchIcon && `padding: 0 ${spacings.base};`};
+  @media (max-width: ${breakpoints.mobile}) {
+    position: static;
+    margin-top: ${spacings.small};
+    margin-left: 0;
+  }
+`;
+const SubmitIcon = styled(Button)`
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 3rem;
+  height: 5.4rem;
+  color: ${({ theme }) => theme.secondary};
+`;
+
+export const StyledInput = styled.input`
   display: flex;
   width: 100%;
   height: ${({ hasButton }) => (hasButton ? "7rem" : "5.4rem")};
@@ -185,22 +243,31 @@ const SearchInput = styled(DocumentSuggester)`
   }
 `;
 
-const SubmitButton = styled(Button)`
+export const StyledList = styled.ul`
   position: absolute;
-  top: ${spacings.xsmall};
-  right: ${spacings.xsmall};
-  ${({ hasSearchIcon }) => hasSearchIcon && `padding: 0 ${spacings.base};`};
-  @media (max-width: ${breakpoints.mobile}) {
-    position: static;
-    margin-top: ${spacings.small};
-    margin-left: 0;
-  }
+  width: 100%;
+  z-index: 100;
+  background: ${colors.white};
+  box-shadow: 0 10px 10px -10px #b7bcdf;
+  margin: 0;
+  margin-top: ${spacings.tiny};
+  padding: 0;
+  border-radius: 3px;
+  top: ${({ hasButton }) => (hasButton ? "7rem" : "5.4rem")};
 `;
-const SubmitIcon = styled(Button)`
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 3rem;
-  height: 5.4rem;
-  color: ${({ theme }) => theme.secondary};
+
+export const StyledSuggestion = styled.li`
+  border-radius: 3px;
+  cursor: pointer;
+  line-height: 2rem;
+  list-style-type: none;
+  padding: ${spacings.base};
+  background: ${({ isHighlighted }) =>
+    isHighlighted ? colors.bgTertiary : colors.white};
+  &:nth-child(2n + 1) {
+    background: ${({ isHighlighted }) =>
+      isHighlighted ? colors.bgTertiary : colors.bgSecondary};
+  }
 `;
+
+export default SearchBar;
diff --git a/packages/code-du-travail-frontend/src/search/__tests__/SearchBar.test.js b/packages/code-du-travail-frontend/src/search/__tests__/SearchBar.test.js
deleted file mode 100644
index 3a78246049..0000000000
--- a/packages/code-du-travail-frontend/src/search/__tests__/SearchBar.test.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import { push as matopush } from "@socialgouv/matomo-next";
-import { fireEvent, render, waitFor } from "@testing-library/react";
-import React from "react";
-import { act } from "react-dom/test-utils";
-
-import { fetchSuggestResults } from "../search.service";
-import SearchBar from "../SearchBar";
-
-jest.useFakeTimers();
-
-jest.mock("../search.service.js", () => ({
-  fetchSuggestResults: jest.fn(),
-}));
-
-jest.mock("@socialgouv/matomo-next");
-
-const q = "foo";
-const suggestions = ["foo", "foobar", "foo bar ?", "foo bazzz"];
-
-fetchSuggestResults.mockResolvedValue(suggestions);
-
-describe("<SearchBar />", () => {
-  it("should render", () => {
-    const { container } = render(<SearchBar />);
-    expect(container).toMatchSnapshot();
-  });
-
-  it("should render suggestions", async () => {
-    const { container, getAllByRole, getByLabelText } = render(<SearchBar />, {
-      query: { q },
-    });
-    const input = getByLabelText(/recherchez/i);
-    fireEvent.change(input, { target: { value: "yolo" } });
-    input.focus();
-    await waitFor(() => getAllByRole("option"));
-    expect(container).toMatchSnapshot();
-  });
-
-  it("should update input value when suggestion are hightlighted", async () => {
-    const { getByLabelText, getAllByRole } = render(<SearchBar />);
-    const input = getByLabelText(/recherchez/i);
-    fireEvent.change(input, { target: { value: "yolo" } });
-    input.focus();
-    await waitFor(() => getAllByRole("option"));
-    fireEvent.keyDown(input, { keyCode: 40 }); // foo
-    fireEvent.keyDown(input, { keyCode: 40 }); // foobar
-    expect(input.value).toBe("foobar");
-  });
-
-  it("should track suggestions and selectedSuggestion", async () => {
-    const { getByText, getByLabelText } = render(<SearchBar />);
-
-    const input = getByLabelText(/recherchez/i);
-    await act(async () => {
-      fireEvent.change(input, { target: { value: "yolo" } });
-      input.focus();
-    });
-    const suggestion = getByText("foobar");
-    suggestion.click();
-    expect(matopush).toHaveBeenCalledTimes(2);
-    expect(matopush.mock.calls[0][0]).toEqual([
-      "trackEvent",
-      "selectedSuggestion",
-      "yolo",
-      "foobar",
-    ]);
-    expect(matopush.mock.calls[1][0]).toEqual([
-      "trackEvent",
-      "candidateSuggestions",
-      suggestions.join("###"),
-    ]);
-  });
-});
diff --git a/packages/code-du-travail-frontend/src/search/__tests__/SearchHero.test.js b/packages/code-du-travail-frontend/src/search/__tests__/SearchHero.test.js
deleted file mode 100644
index 4d06ef8377..0000000000
--- a/packages/code-du-travail-frontend/src/search/__tests__/SearchHero.test.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { render } from "@testing-library/react";
-import React from "react";
-
-import { fetchSuggestResults } from "../search.service";
-import SearchHero from "../SearchHero";
-
-jest.mock("../search.service.js", () => ({
-  fetchSuggestResults: jest.fn(),
-}));
-
-jest.mock("@socialgouv/matomo-next", () => {
-  return {
-    push: jest.fn(),
-  };
-});
-
-const suggestions = ["foo", "foobar", "foo bar ?", "foo bazzz"];
-
-fetchSuggestResults.mockResolvedValue(suggestions);
-
-describe("<SearchHero />", () => {
-  it("should render", () => {
-    const { container } = render(<SearchHero />);
-    expect(container).toMatchSnapshot();
-  });
-});
diff --git a/packages/code-du-travail-frontend/src/search/__tests__/__snapshots__/SearchBar.test.js.snap b/packages/code-du-travail-frontend/src/search/__tests__/__snapshots__/SearchBar.test.js.snap
deleted file mode 100644
index dca217eb2f..0000000000
--- a/packages/code-du-travail-frontend/src/search/__tests__/__snapshots__/SearchBar.test.js.snap
+++ /dev/null
@@ -1,201 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<SearchBar /> should render 1`] = `
-<div>
-  <form
-    action="/recherche"
-    class="sc-cVzyXs iRvGjI"
-    role="search"
-  >
-    <div
-      class="sc-cWSHoV bKtA-De"
-    >
-      <label>
-        Rechercher
-      </label>
-    </div>
-    <div
-      aria-expanded="false"
-      aria-haspopup="listbox"
-      aria-owns="react-autowhatever-1"
-      role="combobox"
-      style="flex: 1 1 auto;"
-    >
-      <input
-        aria-autocomplete="list"
-        aria-controls="react-autowhatever-1"
-        aria-label="recherchez par mots-clés"
-        autocomplete="off"
-        class="sc-dPZUQH EWuGz"
-        id="main-search-input"
-        name="q"
-        placeholder="Rechercher"
-        title="recherchez par mots-clés"
-        type="search"
-        value=""
-      />
-      <div
-        class="sc-YysOf bZIRlW"
-        id="react-autowhatever-1"
-        role="listbox"
-      />
-    </div>
-    <button
-      aria-label="Lancer ma recherche"
-      class="sc-kOPcWz kyVwqT sc-iXzfSG jOetDF"
-      title="Lancer ma recherche"
-      type="submit"
-    >
-      <svg
-        aria-hidden="true"
-        class="sc-ePDLzJ cjpeUy"
-        fill="none"
-        viewBox="0 0 32 32"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M27.319 25.368a.935.935 0 0 1-1.304 1.341l-6.256-6.012a9.797 9.797 0 0 1-6.092 2.1C8.327 22.798 4 18.59 4 13.4S8.328 4 13.667 4c5.338 0 9.666 4.208 9.666 9.399 0 2.245-.81 4.307-2.16 5.923l6.146 6.046zm-13.652-4.515c4.234 0 7.666-3.337 7.666-7.454 0-4.117-3.432-7.454-7.666-7.454C9.432 5.945 6 9.282 6 13.399c0 4.117 3.432 7.454 7.667 7.454z"
-          fill="currentColor"
-        />
-      </svg>
-    </button>
-  </form>
-</div>
-`;
-
-exports[`<SearchBar /> should render suggestions 1`] = `
-<div>
-  <form
-    action="/recherche"
-    class="sc-cVzyXs iRvGjI"
-    role="search"
-  >
-    <div
-      class="sc-cWSHoV bKtA-De"
-    >
-      <label>
-        Rechercher
-      </label>
-    </div>
-    <div
-      aria-expanded="true"
-      aria-haspopup="listbox"
-      aria-owns="react-autowhatever-1"
-      role="combobox"
-      style="flex: 1 1 auto;"
-    >
-      <input
-        aria-autocomplete="list"
-        aria-controls="react-autowhatever-1"
-        aria-label="recherchez par mots-clés"
-        autocomplete="off"
-        class="sc-dPZUQH EWuGz"
-        id="main-search-input"
-        name="q"
-        placeholder="Rechercher"
-        title="recherchez par mots-clés"
-        type="search"
-        value="yolo"
-      />
-      <div
-        class="sc-YysOf bZIRlW"
-        id="react-autowhatever-1"
-        role="listbox"
-      >
-        <ul
-          role="listbox"
-          style="z-index: 1; background: rgb(255, 255, 255); border: 1px solid #bbcadf; border-radius: 3px; box-shadow: 0 10px 10px -10px #b7bcdf; margin: 0.4rem 0px 0px 0px; padding: 0px; position: absolute; width: 100%;"
-        >
-          <li
-            aria-selected="false"
-            data-suggestion-index="0"
-            id="react-autowhatever-1--item-0"
-            role="option"
-            style="border-radius: 3px; cursor: pointer; line-height: 2rem; list-style-type: none; padding: 1.6rem;"
-          >
-            <div
-              class="sc-ktPPKK gznNzK"
-            >
-              <span
-                class="sc-fMMURN"
-              >
-                foo
-              </span>
-            </div>
-          </li>
-          <li
-            aria-selected="false"
-            data-suggestion-index="1"
-            id="react-autowhatever-1--item-1"
-            role="option"
-            style="border-radius: 3px; cursor: pointer; line-height: 2rem; list-style-type: none; padding: 1.6rem;"
-          >
-            <div
-              class="sc-ktPPKK gznNzK"
-            >
-              <span
-                class="sc-fMMURN"
-              >
-                foobar
-              </span>
-            </div>
-          </li>
-          <li
-            aria-selected="false"
-            data-suggestion-index="2"
-            id="react-autowhatever-1--item-2"
-            role="option"
-            style="border-radius: 3px; cursor: pointer; line-height: 2rem; list-style-type: none; padding: 1.6rem;"
-          >
-            <div
-              class="sc-ktPPKK gznNzK"
-            >
-              <span
-                class="sc-fMMURN"
-              >
-                foo bar ?
-              </span>
-            </div>
-          </li>
-          <li
-            aria-selected="false"
-            data-suggestion-index="3"
-            id="react-autowhatever-1--item-3"
-            role="option"
-            style="border-radius: 3px; cursor: pointer; line-height: 2rem; list-style-type: none; padding: 1.6rem;"
-          >
-            <div
-              class="sc-ktPPKK gznNzK"
-            >
-              <span
-                class="sc-fMMURN"
-              >
-                foo bazzz
-              </span>
-            </div>
-          </li>
-        </ul>
-      </div>
-    </div>
-    <button
-      aria-label="Lancer ma recherche"
-      class="sc-kOPcWz kyVwqT sc-iXzfSG jOetDF"
-      title="Lancer ma recherche"
-      type="submit"
-    >
-      <svg
-        aria-hidden="true"
-        class="sc-ePDLzJ cjpeUy"
-        fill="none"
-        viewBox="0 0 32 32"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M27.319 25.368a.935.935 0 0 1-1.304 1.341l-6.256-6.012a9.797 9.797 0 0 1-6.092 2.1C8.327 22.798 4 18.59 4 13.4S8.328 4 13.667 4c5.338 0 9.666 4.208 9.666 9.399 0 2.245-.81 4.307-2.16 5.923l6.146 6.046zm-13.652-4.515c4.234 0 7.666-3.337 7.666-7.454 0-4.117-3.432-7.454-7.666-7.454C9.432 5.945 6 9.282 6 13.399c0 4.117 3.432 7.454 7.667 7.454z"
-          fill="currentColor"
-        />
-      </svg>
-    </button>
-  </form>
-</div>
-`;
diff --git a/packages/code-du-travail-frontend/src/search/__tests__/__snapshots__/SearchHero.test.js.snap b/packages/code-du-travail-frontend/src/search/__tests__/__snapshots__/SearchHero.test.js.snap
deleted file mode 100644
index 993a0e3526..0000000000
--- a/packages/code-du-travail-frontend/src/search/__tests__/__snapshots__/SearchHero.test.js.snap
+++ /dev/null
@@ -1,786 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<SearchHero /> should render 1`] = `
-<div>
-  <div
-    class="sc-gEvEer hpVpdb sc-lnPyaJ cWUfkT"
-  >
-    <div
-      class="sc-aXZVg sc-eulNck gZgZQL dczUkd"
-    >
-      <header
-        class="sc-dExYaf cwSspm"
-      >
-        <h1
-          class="sc-iapWAC hgrGfO"
-        >
-          Bienvenue sur 
-          <br />
-          <span
-            class="sc-dxcDKg fOHrcd"
-          >
-            le Code du travail numérique
-          </span>
-        </h1>
-        <h2
-          class="sc-kqGoIF kOMleA"
-        >
-          Obtenez les réponses à vos questions sur le droit du travail.
-        </h2>
-      </header>
-      <label
-        class="sc-knuQbY lbnMWg"
-        for="searchbar"
-        id="search"
-      >
-        Recherchez par mots-clés
-      </label>
-      <div
-        class="sc-ERObt dKVziZ"
-      >
-        <form
-          action="/recherche"
-          class="sc-cVzyXs iRvGjI"
-          role="search"
-        >
-          <div
-            class="sc-cWSHoV bKtA-De"
-          >
-            <label
-              for="searchbar"
-            >
-              Rechercher
-            </label>
-          </div>
-          <svg
-            aria-hidden="true"
-            class="sc-ePDLzJ sc-bVVIoq cjpeUy bYcuok"
-            fill="none"
-            viewBox="0 0 32 32"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M27.319 25.368a.935.935 0 0 1-1.304 1.341l-6.256-6.012a9.797 9.797 0 0 1-6.092 2.1C8.327 22.798 4 18.59 4 13.4S8.328 4 13.667 4c5.338 0 9.666 4.208 9.666 9.399 0 2.245-.81 4.307-2.16 5.923l6.146 6.046zm-13.652-4.515c4.234 0 7.666-3.337 7.666-7.454 0-4.117-3.432-7.454-7.666-7.454C9.432 5.945 6 9.282 6 13.399c0 4.117 3.432 7.454 7.667 7.454z"
-              fill="currentColor"
-            />
-          </svg>
-          <div
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-owns="react-autowhatever-1"
-            role="combobox"
-            style="flex: 1 1 auto;"
-          >
-            <input
-              aria-autocomplete="list"
-              aria-controls="react-autowhatever-1"
-              aria-label="recherchez par mots-clés"
-              autocomplete="off"
-              class="sc-dPZUQH bfTFiT"
-              id="searchbar"
-              name="q"
-              placeholder="congés payés, durée de préavis"
-              title="recherchez par mots-clés"
-              type="search"
-              value=""
-            />
-            <div
-              class="sc-YysOf bZIRlW"
-              id="react-autowhatever-1"
-              role="listbox"
-            />
-          </div>
-          <button
-            aria-label="Lancer ma recherche"
-            class="sc-kOPcWz cefBoA sc-eBHhsj kKQfO"
-            title="Lancer ma recherche"
-            type="submit"
-          >
-            Rechercher
-          </button>
-        </form>
-      </div>
-      <div
-        class="sc-gvZAcH gzBrmO"
-      >
-        <svg
-          aria-hidden="true"
-          class="sc-kRRyDe leodMn"
-          fill="none"
-          viewBox="0 0 616 514"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <g
-            opacity="0.8"
-          >
-            <path
-              d="M388.597 90.563c-47.466 7.842-95.005 3.621-140.769-2.226-45.764-5.847-91.422-13.314-138.987-11.852-30.58.948-64.597 6.9-85.758 25.166C2.728 119.226-.184 143.253.01 164.982c.146 16.343 1.695 33.272 12.87 46.415 7.758 9.12 19.618 15.744 28.586 24.179 31.245 29.354 22.383 74.828 2.599 113.334-9.307 18.069-20.681 35.801-26.924 54.324-6.242 18.522-6.86 38.473 4.893 53.809 11.66 15.204 33.964 23.961 57.172 28.656 47.126 9.528 99.432 4.61 150.022-2.232 111.977-15.217 222.704-39.83 333.112-64.397 40.864-9.087 81.908-18.227 121.224-31.607 21.832-7.414 44.042-16.744 58.023-31.5 17.743-18.734 17.902-44.592.372-60.276-29.41-26.339-95.204-21.387-118.066-51.36-12.591-16.462-7.466-38.599 2.154-58.057 20.608-41.746 60.994-82.735 55.177-124.686-3.989-28.814-32.163-52.94-69.59-59.61-39.223-6.987-89.354 4.681-111.538 33.33-22.842 29.579-69.59 48.345-111.498 55.259z"
-              fill="#5E7EBE"
-              opacity="0.1"
-            />
-            <path
-              d="M540.384 148H125.616c-3.101 0-5.616 2.579-5.616 5.761v232.478c0 3.182 2.515 5.761 5.616 5.761h414.768c3.102 0 5.616-2.579 5.616-5.761V153.761c0-3.182-2.514-5.761-5.616-5.761z"
-              fill="#F2F5FA"
-            />
-            <path
-              d="M543.434 144.89H121.823a2.16 2.16 0 0 0-1.529.636c-.405.407-.633.96-.633 1.536v9.186h425.917v-9.168a2.182 2.182 0 0 0-.62-1.541 2.163 2.163 0 0 0-1.524-.649z"
-              fill="#7598D6"
-            />
-            <path
-              d="M128.184 153.502a2.929 2.929 0 0 0 2.922-2.936 2.928 2.928 0 0 0-2.922-2.935 2.928 2.928 0 0 0-2.922 2.935 2.929 2.929 0 0 0 2.922 2.936zm7.867 0a2.93 2.93 0 0 0 2.923-2.936 2.93 2.93 0 0 0-2.923-2.935 2.929 2.929 0 0 0-2.922 2.935 2.93 2.93 0 0 0 2.922 2.936z"
-              fill="#fff"
-            />
-            <path
-              d="M143.919 153.502a2.93 2.93 0 0 0 2.922-2.936 2.929 2.929 0 0 0-2.922-2.935 2.93 2.93 0 0 0-2.923 2.935 2.93 2.93 0 0 0 2.923 2.936z"
-              fill="#EE5D49"
-            />
-            <path
-              d="M498.757 200.132H152.77c-2.53 0-4.581 2.06-4.581 4.602v168.181c0 2.541 2.051 4.602 4.581 4.602h345.987c2.53 0 4.581-2.061 4.581-4.602V204.734c0-2.542-2.051-4.602-4.581-4.602z"
-              fill="#fff"
-            />
-            <path
-              d="M233.551 168.301h-98.686c-.959 0-1.735.78-1.735 1.743v7.285c0 .962.776 1.743 1.735 1.743h98.686a1.74 1.74 0 0 0 1.735-1.743v-7.285c0-.963-.777-1.743-1.735-1.743zm192.635 52.42h-98.687c-.958 0-1.735.78-1.735 1.743v7.284a1.74 1.74 0 0 0 1.735 1.744h98.687a1.74 1.74 0 0 0 1.735-1.744v-7.284c0-.963-.777-1.743-1.735-1.743zm57.358 30.159H327.499c-.958 0-1.735.78-1.735 1.743v7.285a1.74 1.74 0 0 0 1.735 1.743h156.045a1.74 1.74 0 0 0 1.736-1.743v-7.285a1.74 1.74 0 0 0-1.736-1.743zm0 17.612H327.499a1.74 1.74 0 0 0-1.735 1.743v7.285c0 .963.777 1.743 1.735 1.743h156.045a1.74 1.74 0 0 0 1.736-1.743v-7.285a1.74 1.74 0 0 0-1.736-1.743zm0 17.613H327.499a1.74 1.74 0 0 0-1.735 1.744v7.284c0 .963.777 1.743 1.735 1.743h156.045a1.74 1.74 0 0 0 1.736-1.743v-7.284a1.74 1.74 0 0 0-1.736-1.744zm0 17.613H327.499c-.958 0-1.735.78-1.735 1.743v7.284a1.74 1.74 0 0 0 1.735 1.744h156.045a1.74 1.74 0 0 0 1.736-1.744v-7.284a1.74 1.74 0 0 0-1.736-1.743zm0 19.42H169.179c-.958 0-1.735.78-1.735 1.743v7.284a1.74 1.74 0 0 0 1.735 1.744h314.365a1.74 1.74 0 0 0 1.735-1.744v-7.284c0-.963-.777-1.743-1.735-1.743zm0 17.613H169.179c-.958 0-1.735.78-1.735 1.743v7.285c0 .963.777 1.743 1.735 1.743h314.365c.958 0 1.735-.78 1.735-1.743v-7.285c0-.963-.777-1.743-1.735-1.743zm0 17.612H169.179a1.74 1.74 0 0 0-1.735 1.744v7.284c0 .963.777 1.743 1.735 1.743h314.365c.958 0 1.735-.78 1.735-1.743v-7.284a1.74 1.74 0 0 0-1.735-1.744zM299.388 214.746H171.265c-2.11 0-3.821 1.719-3.821 3.839v92.373c0 2.12 1.711 3.839 3.821 3.839h128.123a3.83 3.83 0 0 0 3.822-3.839v-92.373a3.83 3.83 0 0 0-3.822-3.839z"
-              fill="#7598D6"
-              opacity="0.2"
-            />
-            <path
-              d="M469.322 484.896c26.266 0 47.558-5.284 47.558-11.802s-21.292-11.802-47.558-11.802c-26.265 0-47.558 5.284-47.558 11.802s21.293 11.802 47.558 11.802z"
-              fill="#9298AF"
-              opacity="0.1"
-            />
-            <path
-              d="M474.144 303.037s5.874-.196 7.746 4.61c1.872 4.807.46 8.483-.075 10.229-1.395 4.567-1.511 6.224-.835 8.982.601 2.443 1.156 3.702 1.84 5.987.685 2.285-.459 2.017-.56 2.196-.101.178-22.995 2.276-22.995 2.276s.612-4.947 2.224-6.094c1.613-1.147 3.204-1.38 1.979-6.276-1.225-4.895-2.005-7.166-1.317-10.716.797-4.114 1.297-6.684 5.175-9.381a10.45 10.45 0 0 1 6.818-1.813z"
-              fill="#4E6896"
-            />
-            <path
-              d="M480.919 464.49s-3.23 4.783-4.53 5.938c0 0-2.889 1.058-3.178 3.078-.289 2.02-.243 3.365 3.178 3.457 3.421.093 5.666-.515 6.293-2.593a9.414 9.414 0 0 1 1.996-3.457v4.322h.772s.193-4.181.242-4.951c.05-.769.549-3.725-1.074-5.036-1.624-1.311-3.699-.758-3.699-.758zm-16.168-3.821a13.736 13.736 0 0 1-1.623 2.691c-.775 1.009-3.178 5.143-4.242 5.434-1.063.291-4.333.865-4.622 2.692-.289 1.826-.434 3.123 2.796 3.267 3.231.144 5.351.337 6.894-1.922 1.543-2.259 4.002-3.893 4.002-3.893v5.896h1.256s.578-6.138.916-6.57c.338-.432 1.205-5.143-1.8-7.595-3.004-2.452-3.577 0-3.577 0z"
-              fill="#7D7D95"
-            />
-            <path
-              d="M483.089 372.168s3.629 5.382 4.736 11.655c1.106 6.273-.205 27.235-.156 30.335.049 3.101 2.938 10.817 2.36 16.658-.578 5.84-5.411 34.432-5.411 34.432l-3.699-.758s.362-29.635 0-32.087c-.361-2.452-1.086-11.39-1.23-12.39-.145-.999-9.182-27.517-9.182-32.041 0-4.523 2.733-23.183 12.582-15.804z"
-              fill="#FCB6AC"
-            />
-            <path
-              d="M462.602 374.233s-6.697 25.503-7.495 29.035c-.797 3.533-1.947 6.449-1.947 7.95 0 3.481 1.294 9.071 1.294 9.071l10.297 40.379 4.271.669s-2.471-24.815-2.601-29.575c-.13-4.76-3.805-11.545-3.08-13.565.726-2.02 11.65-25.302 11.65-25.302s8.266-26.065-12.389-18.662zm13.787 96.195s3.306 1.844 5.435-.525a16.712 16.712 0 0 0 2.794-4.656l-3.698-.758-4.531 5.939z"
-              fill="#FCB6AC"
-            />
-            <path
-              d="M458.895 468.796s2.889.72 4.002 0c1.112-.721 4.877-7.077 6.125-7.457 0 0-1.208-2.447-4.27-.669 0 0-5.036 7.068-5.857 8.126z"
-              fill="#FCB6AC"
-            />
-            <path
-              d="M453.16 411.22s15.498 6.627 38.571 6.627c0 0-2.43-34.865-5.778-42.379-3.349-7.515-23.88.757-23.88.757s-8.913 28.702-8.913 34.995z"
-              fill="#7598D6"
-            />
-            <path
-              d="M435.726 360.703s14.134 1.213 17.625-.34c1.759-.775 4.131-3.997 6.31-7.518.372-.599.739-1.21 1.097-1.818 2.679-4.552 4.843-9.024 4.843-9.024s6.483-8.126-.405-11.024a8.338 8.338 0 0 0-4.333 3.302c-1.662 2.561-2.962 6.408-3.288 7.676-.327 1.267-5.863 12.413-6.209 12.727-.347.314-3.826.106-6.507.357-4.374.412-8.988.651-8.988.651l-.145 5.011z"
-              fill="#5E7EBE"
-            />
-            <path
-              d="M460.201 349.387c1.733 4.014.098 5.354.896 9.368.797 4.013 1.077 15.45.93 17.68-.147 2.23 19.82 4.521 24.443.458 0 0-1.54-8.676-4.369-14.07-.54-1.023-.289-5.06.266-6.449.168-.423.835-2.065 1.684-4.14l2.869-6.993c1.078-2.625 1.922-4.665 1.922-4.665s.687-6.46-2.002-8.541c-2.332-1.809-8.703-2.452-9.844-2.849-1.141-.398-4.467-.577-6.804-.222 0 0-3.577 1.683-4.819 1.933-1.243.251-6.068 6.492-6.909 8.771-.84 2.279-.002 5.7 1.737 9.719z"
-              fill="#7598D6"
-            />
-            <path
-              d="M468.481 324.846s.714 6.547.578 8.676c0 0 2.991 3.625 7.223-4.429 0 0-1.054-3.227.289-7.751 1.344-4.523-8.09 3.504-8.09 3.504z"
-              fill="#FCB6AC"
-            />
-            <path
-              d="M479.85 329.757s-2.565 7.529-9.58 6.982c-7.015-.548-3.329-6.368-3.329-6.368s1.751-1 2.242-1.095c.492-.095 6.969-.369 6.969-.369l3.698.85z"
-              fill="#FCB6AC"
-            />
-            <path
-              d="M434.62 335.908h16.734a1.33 1.33 0 0 1 1.332 1.329v24.981a1.33 1.33 0 0 1-1.332 1.328H434.62a1.33 1.33 0 0 1-1.332-1.328v-24.981a1.33 1.33 0 0 1 1.332-1.329z"
-              fill="#434343"
-            />
-            <path
-              d="M434.608 337.787h16.761v23.881h-16.761v-23.881z"
-              fill="#DBDFF0"
-            />
-            <path
-              d="M457.528 357.898a1.947 1.947 0 0 1-1.051-.288c-.72-.542-.98-1.876-2.248-1.778-1.269.098-1.861 4.069-1.543 4.821.318.752 2.083 1.129 4.689.611 2.606-.519.153-3.366.153-3.366z"
-              fill="#FCB6AC"
-            />
-            <path
-              d="M435.498 341.212s-2.757-.64-3.644.686a5.16 5.16 0 0 0-.699 3.818c.223.789.936 2.818 1.87 2.403 2.993-1.326 2.473-6.907 2.473-6.907z"
-              fill="#EEA886"
-            />
-            <path
-              d="M432.771 341.241s.384-1.856 1.132-1.539c.749.317.072 1.542.072 1.542l-1.204-.003z"
-              fill="#EEA886"
-            />
-            <path
-              d="M435.498 341.213s-.043-1.06-1.97.032c-1.928 1.092 1.97-.032 1.97-.032z"
-              fill="#EEA886"
-            />
-            <path
-              d="M409.061 320.744a.107.107 0 1 0 0-.214.107.107 0 0 0 0 .214z"
-              fill="#E6E8EC"
-            />
-            <path
-              d="M449.951 323.042h-77.886a3.072 3.072 0 0 0-3.065 3.079v90.839a3.072 3.072 0 0 0 3.065 3.079h77.886a3.072 3.072 0 0 0 3.065-3.079v-90.839c0-1.7-1.372-3.079-3.065-3.079z"
-              fill="#fff"
-            />
-            <path
-              d="M449.951 323.042h-77.886a3.072 3.072 0 0 0-3.065 3.079v90.839a3.072 3.072 0 0 0 3.065 3.079h77.886a3.072 3.072 0 0 0 3.065-3.079v-90.839c0-1.7-1.372-3.079-3.065-3.079z"
-              fill="#3E486E"
-              opacity="0.1"
-            />
-            <path
-              d="M445.666 327.989H376.35a3.072 3.072 0 0 0-3.065 3.079v80.945a3.072 3.072 0 0 0 3.065 3.079h69.316a3.072 3.072 0 0 0 3.065-3.079v-80.945c0-1.7-1.372-3.079-3.065-3.079z"
-              fill="#fff"
-            />
-            <path
-              d="M433.225 345.458h-46.168a2.803 2.803 0 0 0-2.796 2.809v12.326a2.802 2.802 0 0 0 2.796 2.809h46.168a2.802 2.802 0 0 0 2.796-2.809v-12.326a2.803 2.803 0 0 0-2.796-2.809z"
-              fill="#7598D6"
-              opacity="0.7"
-            />
-            <path
-              d="M434.124 369.966h-47.962v3.661h47.962v-3.661z"
-              fill="#FF7067"
-            />
-            <path
-              d="M444.006 377.693H378.01v3.662h65.996v-3.662zm0 8.135H378.01v3.662h65.996v-3.662zm0 8.133H378.01v3.662h65.996v-3.662z"
-              fill="#7598D6"
-              opacity="0.7"
-            />
-            <path
-              d="M454.662 355.851a39.266 39.266 0 0 0-3.932-1.078c-1.849-.398-4.045-.527-4.273-.207-.228.319 1.8.662 3.614 1.175 1.667.473 1.269.646 1.269.646s.109-.055-1.795-.234c-2.048-.19-4.154-.187-4.362.222-.101.199-.032.334.705.519-.442-.02-.506.095-.523.274-.087.919 2.889 1.651 4.085 1.942-.913-.219-1.601-.289-1.271.331.375.706 4.637 1.559 6.139 2.017 1.642.472.344-5.607.344-5.607z"
-              fill="#FCB6AC"
-            />
-            <path
-              d="M460.77 351.01s-2.103-4.982-2.193-6.106c.018.663.168 4.7 1.095 7.927.373-.599.74-1.21 1.098-1.818v-.003z"
-              fill="#2F3B6C"
-            />
-            <path
-              d="M458.577 344.906v-.094s-.003.058 0 .094z"
-              fill="#D1C0BA"
-            />
-            <path
-              d="m469.357 357.901 8.754-15.372s-3.056 15.335-5.374 15.848c-2.317.513-3.38-.476-3.38-.476z"
-              fill="#5E7EBE"
-            />
-            <path
-              d="M486.47 331.757s4.198 2.083 2.75 7.491c-1.447 5.409-2.889 6.95-4.27 8.967-1.306 1.908-3.973 7.039-4.299 7.613-.327.573-3.537 8.952-6.484 9.906-2.947.954-17.543-3.677-17.872-3.169-.33.507.02-5.1.02-5.1s6.775.484 8.257.38c2.427-.164 6.325.827 7.261-1.271 1.101-2.463 5.047-10.563 5.463-11.897.416-1.334 5.279-14.292 9.174-12.92z"
-              fill="#5E7EBE"
-            />
-            <path
-              d="M469.565 306.112s-6.478 4.215-4.372 14.407c2.107 10.191 9.754 4.593 10.584 4.016.829-.576 3.4-6.958 3.498-9.742.096-2.622 1.477-13.127-9.71-8.681z"
-              fill="#FCB6AC"
-            />
-            <path
-              d="M470.01 308.157c.676-.199 2.941 4.196 4.184 5.279 1.242 1.083 3.484 3.809 3.706 6.791.223 2.983 2.745-6.517 1.87-10.044-.876-3.527-2.037-8.696-9.931-4.593-7.893 4.103-5.844 11.428-5.844 11.428s2.6-7.855 6.015-8.861z"
-              fill="#4E6896"
-            />
-            <path
-              d="M475.482 315.193c.208-1.207 2.889-2.227 2.837-.415-.052 1.812-1.511 3.907-2.346 3.777-.835-.129-.685-2.25-.491-3.362z"
-              fill="#FCB6AC"
-            />
-            <path
-              d="M475.156 324.956c-.05.092-1.59 3.046-6.305 3.789-.107-1.152-.251-2.564-.251-2.564a7.602 7.602 0 0 0 6.556-1.225z"
-              fill="#AB7D7D"
-            />
-            <path
-              d="M214.036 513.991c26.888 0 48.686-5.409 48.686-12.082 0-6.673-21.798-12.082-48.686-12.082-26.889 0-48.687 5.409-48.687 12.082 0 6.673 21.798 12.082 48.687 12.082z"
-              fill="#9298AF"
-              opacity="0.1"
-            />
-            <path
-              d="M346.259 322.632H145.215a3.222 3.222 0 0 0-3.215 3.229v95.269a3.221 3.221 0 0 0 3.215 3.229h201.044a3.222 3.222 0 0 0 3.215-3.229v-95.269a3.223 3.223 0 0 0-3.215-3.229z"
-              fill="#fff"
-            />
-            <path
-              d="M346.259 322.632H145.215a3.222 3.222 0 0 0-3.215 3.229v95.269a3.221 3.221 0 0 0 3.215 3.229h201.044a3.222 3.222 0 0 0 3.215-3.229v-95.269a3.223 3.223 0 0 0-3.215-3.229z"
-              fill="#F2F5FA"
-            />
-            <path
-              d="M335.308 327.126H155.434a3.222 3.222 0 0 0-3.215 3.229v84.892a3.222 3.222 0 0 0 3.215 3.23h179.874a3.222 3.222 0 0 0 3.215-3.23v-84.892a3.222 3.222 0 0 0-3.215-3.229z"
-              fill="#fff"
-            />
-            <path
-              d="M304.576 346.147H182.628a2.94 2.94 0 0 0-2.933 2.946v12.928a2.94 2.94 0 0 0 2.933 2.946h121.948a2.94 2.94 0 0 0 2.932-2.946v-12.928a2.94 2.94 0 0 0-2.932-2.946z"
-              fill="#7598D6"
-              opacity="0.2"
-            />
-            <path
-              d="M302.82 371.846H184.384v3.84H302.82v-3.84zm24.399 8.105h-162.97v3.84h162.97v-3.84zm0 8.529h-162.97v3.841h162.97v-3.841zm0 8.531h-162.97v3.84h162.97v-3.84z"
-              fill="#7598D6"
-              opacity="0.7"
-            />
-            <path
-              d="M192.71 497.562c.579-2.12.973-3.987.973-3.987a8.326 8.326 0 0 1 1.079-4.04v-.586l.166-4.305a14.483 14.483 0 0 0-.973-2.296c-.72-1.382.243-6.312.243-6.312s3.127-6.874 2.602-11.335c-.525-4.46 6.624-19.459 6.624-19.459a19.344 19.344 0 0 0-.448-4.397 3.414 3.414 0 0 1-.048-.914.698.698 0 0 1 0-.112v.034c.209-2.931 2.718-8.305 2.718-8.305l.093-10.455s-1.236-6.215 1.459-14.388c.948-2.854 1.571-5.14 1.979-6.909.049-.2.092-.39.131-.576a799.818 799.818 0 0 1-8.647-1.72s3.322-11.911 5.35-13.938c2.028-2.028 3.808-8.584 3.808-8.584s1.333-8.452-.195-10.993c-1.527-2.54-1.595-6.84-1.595-6.84s-3.608-2.848-4.027-4.065c-.418-1.216-1.084-3.957-1.031-5.374.054-1.417.569-2.687.443-3.444-.126-.757 1.221-3.562.652-4.939a3.785 3.785 0 0 1-.195-1.315v-.039c.041-1.183.195-2.359.462-3.512a9.909 9.909 0 0 1 3.745-1.828l.092-.322.244-.836c.119-.074.242-.143.369-.205l.024-.308.078-1.216-.467-2.775c-.972-4.817 5.408-5.281 5.408-5.281a3.346 3.346 0 0 1 1.853-1.515c1.294-.4-.058 7.187-.676 7.651-.486.347-1.945 2.687-2.65 3.835l-.117.191c.102.098.197.204.282.317l-.306 1.647-.049.249a6.82 6.82 0 0 1 .948 1.773s-1.21 1.231-1.031 2.668a8.612 8.612 0 0 1-.486 3.288c.068-.073.919-.928 1.727-.684.807.244 3.054 1.021 3.054 1.021s1.687.366 1.517.738c-.17.371 1.085 2.071 1.085 2.071l4.732-4.167c.053-.132.102-.259.15-.391.218-.614.381-1.247.487-1.891a10.06 10.06 0 0 1-1.459-.523 3.182 3.182 0 0 1-1.236-.859c-.437-.567-.486-1.32-.656-2.008-.311-1.349-1.041-2.57-1.551-3.865a12.404 12.404 0 0 1-.652-6.84c.104-.703.37-1.373.778-1.954.788-1.001 2.154-1.368 3.171-2.15 1.016-.781 1.697-2.017 2.864-2.589 1.061-.518 2.32-.401 3.482-.166a18.557 18.557 0 0 1 6.347 2.594c.652.425 1.367.914 2.14.801a2.949 2.949 0 0 0 1.605-1.089.386.386 0 0 1 0-.068l.053-.054a8.08 8.08 0 0 1 .574 3.459c0 .181 0 .366-.039.547v.19a.877.877 0 0 0 0 .162.837.837 0 0 0 .029.239c.086.241.224.46.404.64.132.163.249.338.35.523 0-.064-.034-.127-.053-.191.275.439.42.947.418 1.466.011.378-.127.745-.384 1.021a4.557 4.557 0 0 1-.769.577 8.798 8.798 0 0 1-.861 5.179 8.746 8.746 0 0 1-3.652 3.756c-.058.127-.116.259-.17.391a10.959 10.959 0 0 0-1.021 4.969c0 .122 0 .244.039.366s.112.132.16.201c0 0 7.538.366 9.377-1.183 1.838-1.548 4.328 4.119 4.328 4.119s2.685.63 3.244.127c.559-.503 3.715.068 3.715.068a6.793 6.793 0 0 1 4.776-1.549 13.932 13.932 0 0 1 3.536-1.797l.087-.03a3.8 3.8 0 0 1 1.707-.151s3.828-2.932 4.971-4.549c1.143-1.617 6.507-7.543 6.507-7.572l.034-.293.092-.89c.151.032.304.051.457.059l.117-.308c.329-.859.727-1.689 1.192-2.482 0 0 .043-1.128-.273-1.421-.316-.294.307-4.397.307-4.397s3.642-7.72 6.41-1.745c0 0 5.514 4.012.593 8.242 0 0-1.945.851-2.223 1.569-.194.488-.89 1.768-1.357 2.633l-.209.386.054.049-.097.733-.039.288c.87.542 1.459 1.07 1.298 1.466a8.34 8.34 0 0 0-.618 2.008s-6.876 7.963-7.859 11.476c0 0-18.023 9.839-23.83 10.367l.803 5.296c.095 1.429.118 2.863.068 4.294-.122 1.124.457 6.259.457 6.259s.715 7.553 1.527 8.638c.812 1.084.486 5.589.486 5.589.122 2.165.428 4.316.915 6.429.739 2.888 0 6.395 0 6.395s2.679 6.874-4.178 2.018c0 0-3.443-.347-7.412-.635v.396c0 .518-.024 1.075-.039 1.661-.097 3.874-.277 9.209-.608 13.24-.583 7.128-3.287 21.169-3.287 21.169l-.273 7.094c.116.672.159 1.355.127 2.037a13.24 13.24 0 0 1-2.174 7.031l-.725 4.714s-1.386 3.068-1.483 4.93c-.003.152.011.304.039.454.036.241.047.485.034.728 0 2.15-1.498 7.24-1.498 7.24s-.277 5.184-1.06 5.453c-.671.234.768 3.024 1.196 3.825a.753.753 0 0 0 .034-.146l.093.156c.143.426.207.875.189 1.324a1.893 1.893 0 0 1-.928 1.788c-1.503.845-2.32 1.563-1.085 1.915.456.089.907.202 1.352.337l.073-.171a.834.834 0 0 1 .486.929 3.792 3.792 0 0 1-.53 1.739 18.947 18.947 0 0 1-2.237 3.752l-.593-.088c.08.229.188.447.321.65.213.336.503.616.846.816.315.204.67.341 1.041.4a2.998 2.998 0 0 1 2.149 1.158c.73 1.031 1.163 2.414-.408 3.552l-5.598 1.7s-9.551.875-8.968-1.246c.584-2.12.973-3.986.973-3.986a8.504 8.504 0 0 1 .914-3.772 4.96 4.96 0 0 1 .36-.547l-.336-.049s-.554-4.763-1.468-5.687c-.205-.22-.248-.381-.195-.488-.083-.259.161-.401.486-.489 0 .059.044.122.064.186.305-.052.614-.073.924-.064 0 0 .403-2.467-.564-3.42a.928.928 0 0 1-.166-.742c.002-.341.05-.679.141-1.007a.43.43 0 0 0 .034.059c.594-2.228 2.432-5.736 2.432-5.736s.16-2.252-.423-3.18c-.584-.929.549-12.244.549-12.244s-.024-5.491.769-8.017-.637-5.594-.637-5.594 0-.058.024-.161a.162.162 0 0 0 0-.044l.127-.86v.054c.213-1.466.607-4.06.87-5.272.375-1.715.306-9.996.306-9.996l-1.259-3.566-2.709 5.99-2.918 8.012s-1.367 1.661-1.459 3.42v.259c.012.18.012.362 0 .542a4.861 4.861 0 0 1-.914 2.858s-.842 3.806-1.946 4.739c-1.104.933-1.191 2.814-1.191 2.814s-1.527 5.511-2.184 6.464c-.549.801-.666 3.063-.686 3.757v.2s-.257 1.984-.316 3.655v.591a5.739 5.739 0 0 0 .107 1.314v.083-.283c.231 1.144.321 2.312.268 3.478-.044 1.999-.438 4.353-1.697 5.697-2.179 2.325-3.478 1.954-3.478 1.954s.89 3.044 2.101 3.694a.722.722 0 0 1 .132.088c0-.059 0-.118.034-.171a1.465 1.465 0 0 1 .321 1.133c.038 1.324-.876 3.42-1.703 4.397a2.43 2.43 0 0 1-1.065.577c.061.046.124.088.19.127.135.08.275.152.418.215.196.096.407.16.623.19a2.94 2.94 0 0 1 2.149 1.158c.73 1.026 1.163 2.409-.408 3.547l-5.598 1.7s-9.581.85-8.992-1.27z"
-              fill="url(#workers-hero_svg__a)"
-            />
-            <path
-              d="m228.868 502.509 5.423-1.705c1.522-1.143 1.104-2.526.399-3.557a2.848 2.848 0 0 0-2.077-1.148 2.53 2.53 0 0 1-1.012-.405 2.45 2.45 0 0 1-.812-.811 4.023 4.023 0 0 1-.53-2.101s-5.807-1.954-7.48-.288a4.405 4.405 0 0 0-.744 1.021 8.836 8.836 0 0 0-.895 3.771s-.369 1.862-.938 3.987 8.666 1.236 8.666 1.236zm-26.072-3.658 5.423-1.705c1.522-1.143 1.104-2.526.398-3.552a2.831 2.831 0 0 0-2.081-1.153 1.904 1.904 0 0 1-.603-.186 3.838 3.838 0 0 1-.404-.219c-1.459-.885-1.347-2.932-1.347-2.932s-5.807-1.954-7.48-.288a4.338 4.338 0 0 0-.593.743 8.554 8.554 0 0 0-1.051 4.05s-.374 1.866-.938 3.986c-.564 2.121 8.676 1.256 8.676 1.256z"
-              fill="#7D7D95"
-            />
-            <path
-              d="M222.775 492.494a4.432 4.432 0 0 0-.74 1.021l8.754 1.363a4.023 4.023 0 0 1-.53-2.101s-5.792-1.949-7.484-.283zm-26.666-2.916-.063 1.656c1.284 2.321 7.922 2.082 9.887 1.021a3.824 3.824 0 0 1-.403-.219c-1.459-.885-1.348-2.932-1.348-2.932s-5.806-1.954-7.479-.288a4.335 4.335 0 0 0-.594.762z"
-              fill="#000"
-              opacity="0.1"
-            />
-            <path
-              d="M195.336 482.406c.386.737.712 1.505.973 2.296l-.239 5.931c1.401 2.541 9.211 2.013 10.311.704 1.099-1.31 2.353-4.803 1.181-5.448-1.172-.645-2.033-3.693-2.033-3.693s1.26.352 3.376-1.954c2.115-2.306 1.716-7.685 1.386-8.975-.331-1.29.218-5.56.218-5.56s.039-3.009.676-3.962c.638-.953 2.121-6.464 2.121-6.464s.068-1.881 1.152-2.814c1.085-.933 1.907-4.744 1.907-4.744.65-.933.958-2.064.87-3.2-.15-1.886 1.421-3.859 1.421-3.859l2.854-8.013 2.626-5.994 1.211 3.581s.059 8.281-.306 9.996c-.365 1.714-.973 6.282-.973 6.282s1.382 3.064.613 5.594c-.768 2.531-.759 8.018-.759 8.018s-1.108 11.32-.544 12.243c.564.923.403 3.176.403 3.176s-3.316 6.493-2.383 7.435c.934.943.545 3.42.545 3.42s-2.091-.083-1.23.855c.86.938 1.323 5.663 1.323 5.663l9.002 1.402a19.211 19.211 0 0 0 2.169-3.757c1.303-2.731-.127-2.487-1.318-2.834-1.192-.347-.404-1.07 1.05-1.915 1.454-.845.71-2.907.71-2.907s-2.028-3.767-1.264-4.035c.763-.269 1.031-5.453 1.031-5.453s1.731-6.107 1.42-7.773c-.311-1.666 1.415-5.589 1.415-5.589l.7-4.709a13.055 13.055 0 0 0 1.989-8.878l.282-7.289s2.646-14.017 3.239-21.169c.37-4.563.555-10.802.638-14.696.048-2.189.068-3.635.068-3.635l-32.181-4.631a26.842 26.842 0 0 1-.773 4.797c-.394 1.774-1.002 4.06-1.946 6.914-2.635 8.173-1.459 14.388-1.459 14.388l-.102 10.455s-3.112 6.879-2.602 9.307c.306 1.445.449 2.92.428 4.397 0 0-6.925 14.989-6.419 19.43.506 4.441-2.534 11.339-2.534 11.339s-.939 4.944-.243 6.327z"
-              fill="#7598D6"
-            />
-            <path
-              d="m215.309 443.977-9.785-1.71s5.355 5.941 9.785 1.71z"
-              fill="#000"
-              opacity="0.05"
-            />
-            <path
-              d="M207.314 432.684s-.486 3.478 1.61 4.885c-.019-.01-3.789-.757-1.61-4.885zm1.031-11.099s7.962 7.118 10.972 6.674c3.01-.445-10.972-6.674-10.972-6.674zm19.04 26.055s6.191 1.671 6.284 4.191c.092 2.521-6.284-4.191-6.284-4.191z"
-              fill="#000"
-              opacity="0.1"
-            />
-            <path
-              d="M224.802 478.906s8.754 1.994 6.216 3.024c-2.539 1.031-6.697 1.774-6.697 1.774s-2.85.049.481-4.798zm7.933 4.888a1.753 1.753 0 0 0 .856-1.251l.083.161s.749 2.057-.71 2.932c-.166.092-.321.19-.487.283-.257-.059-.539-.108-.807-.186-1.186-.366-.394-1.089 1.065-1.939zm-11.351-1.036c-.234-.235-.2-.811 0-1.549.335.681.479 1.441.418 2.198a1.707 1.707 0 0 0-.418-.649zm2.792-37.325c.29.902.453 1.841.486 2.789a10.671 10.671 0 0 0-.613-1.925s.054-.337.127-.864zm-20.052-4.725a3.577 3.577 0 0 1-.054-.826c.093.567.152 1.089.186 1.549a24.582 24.582 0 0 0-.132-.723zm19.24 31.443a4.953 4.953 0 0 1-.156-1.675c.251.677.37 1.397.351 2.12a2.074 2.074 0 0 0-.195-.445zm-2.393 14.086c.407 1.527.692 3.084.851 4.656l9.002 1.403a19.033 19.033 0 0 0 2.174-3.758c.116-.239.204-.454.282-.649.53.268.724.845-.054 2.467a19.173 19.173 0 0 1-2.169 3.752l-9.021-1.392s-.487-4.759-1.357-5.692c-.404-.464-.102-.674.292-.787zm12.464-13.02s-.272 5.183-1.031 5.452c-.345-.874-.569-1.695-.228-1.817.758-.274 1.036-5.453 1.036-5.453s1.731-6.102 1.42-7.773c-.312-1.671 1.41-5.584 1.41-5.584l.705-4.714a13.057 13.057 0 0 0 1.989-8.878l.278-7.289s2.635-14.041 3.209-21.169c.365-4.563.55-10.802.637-14.696 0-.704.03-1.329.039-1.857l.258.04s0 1.465-.068 3.63c-.083 3.908-.267 10.137-.637 14.7-.574 7.123-3.205 21.17-3.205 21.17l-.282 7.284a13.075 13.075 0 0 1-1.984 8.877l-.71 4.715s-1.727 3.908-1.416 5.589c.312 1.68-1.42 7.773-1.42 7.773zm-27.278 16.103a8.818 8.818 0 0 0 1.566-3.512c.89.869-.292 4.079-1.338 5.325-1.045 1.246-8.909 1.837-10.31-.699l.054-1.431c1.945 2.091 8.987 1.558 10.028.317zm-11.045-8.945c.387.737.712 1.505.973 2.296l-.044 1.051a16.478 16.478 0 0 0-.69-1.534 4.53 4.53 0 0 1-.253-1.872l.014.059zm10.875 1.621a14.744 14.744 0 0 1-.671-1.812s1.259.347 3.37-1.979c1.537-1.695 1.746-4.993 1.619-7.162.331 1.295.725 6.649-1.386 8.975-1.391 1.524-2.407 1.9-2.932 1.978zm4.527-16.514a40.4 40.4 0 0 0-.321 4.451 6.445 6.445 0 0 0-.126-.704c-.326-1.294.214-5.559.214-5.559s.044-3.01.676-3.963c.632-.952 2.12-6.463 2.12-6.463s.073-1.876 1.158-2.814c1.084-.938 1.906-4.744 1.906-4.744a4.966 4.966 0 0 0 .871-3.2c-.151-1.886 1.42-3.86 1.42-3.86l2.855-8.012 2.626-5.995 1.211 3.586v1.143l-.973-2.931-2.626 5.99-2.855 8.017s-1.571 1.954-1.42 3.86a4.93 4.93 0 0 1-.871 3.2s-.821 3.806-1.906 4.739c-1.085.933-1.153 2.814-1.153 2.814s-1.488 5.511-2.12 6.468c-.632.958-.686 3.977-.686 3.977z"
-              fill="#000"
-              opacity="0.05"
-            />
-            <path
-              d="m209.527 327.014.457 2.766-.078 1.221-.058.899 3.107.445.375-.636c.69-1.148 2.12-3.488 2.573-3.84.593-.464 1.916-8.051.661-7.651a3.288 3.288 0 0 0-1.799 1.515s-6.157.469-5.238 5.281z"
-              fill="#FCB6AC"
-            />
-            <path
-              d="m209.848 331.901 3.108.445.374-.635a2.746 2.746 0 0 0-3.404-.704l-.078.894z"
-              fill="#000"
-              opacity="0.1"
-            />
-            <path
-              d="m209.002 333.356 4.08 1.119.107-.615.297-1.647a2.849 2.849 0 0 0-1.837-1.178 2.827 2.827 0 0 0-2.127.48l-.233.835-.287 1.006z"
-              fill="#DCE6F2"
-            />
-            <path
-              d="m275.892 329.897 4.299 2.541s.18-.347.433-.821c.452-.865 1.123-2.164 1.313-2.633.287-.718 2.154-1.573 2.154-1.573 4.771-4.236-.564-8.237-.564-8.237-2.675-5.976-6.206 1.749-6.206 1.749s-.607 4.118-.301 4.397c.306.278.263 1.421.263 1.421a16.564 16.564 0 0 0-1.391 3.156z"
-              fill="#FCB6AC"
-            />
-            <path
-              d="m275.892 329.896 4.299 2.541s.18-.347.433-.821c-.603-.542-2.734-2.443-3.458-2.365a5.174 5.174 0 0 1-1.041 0c-.151.377-.233.645-.233.645z"
-              fill="#000"
-              opacity="0.1"
-            />
-            <path
-              d="m275.391 331.201 4.863 2.634.136-1.065.098-.733s-2.763-2.57-3.609-2.512a4.565 4.565 0 0 1-1.294-.053l-.087.889-.107.84z"
-              fill="#DCE6F2"
-            />
-            <path
-              d="M220.795 345.697s21.433 3.274 17.459 1.808c-2.767-1.026-3.813-2.858-3.968-4.851a11.386 11.386 0 0 1 .972-4.974 21.842 21.842 0 0 1 2.077-3.83s-16.107-9.727-13.131-1.334c.46 1.27.724 2.603.783 3.952a11.185 11.185 0 0 1-.574 3.948 11.824 11.824 0 0 1-3.618 5.281z"
-              fill="#FCB6AC"
-            />
-            <path
-              d="M224.224 332.516c.46 1.27.724 2.603.783 3.953 1.498 1.363 3.2 1.343 5.383 1.426 1.678.068 3.517.547 4.864-.215a21.837 21.837 0 0 1 2.076-3.83s-16.083-9.727-13.106-1.334z"
-              fill="#000"
-              opacity="0.1"
-            />
-            <path
-              d="M231.003 338.487c4.918 0 8.905-4.005 8.905-8.946 0-4.94-3.987-8.945-8.905-8.945-4.918 0-8.905 4.005-8.905 8.945 0 4.941 3.987 8.946 8.905 8.946z"
-              fill="#FCB6AC"
-            />
-            <path
-              d="M220.795 345.698s21.433 3.274 17.459 1.808c-2.767-1.026-3.813-2.858-3.968-4.851-1.026-1.207-3.147-2.13-4.513-2.634a6.469 6.469 0 0 0-3.891-.215 5.344 5.344 0 0 0-1.459.611 11.82 11.82 0 0 1-3.628 5.281zm-11.793-12.342 4.08 1.118.107-.615a3.619 3.619 0 0 0-3.89-1.51l-.297 1.007zm66.389-2.154 4.863 2.633.136-1.065a36.593 36.593 0 0 0-4.912-2.384l-.087.816zm-65.198 68.647c8.268 1.647 20.086 3.826 21.987 3.323 1.581-.416 6.566-.171 10.899.146.048-2.189.068-3.635.068-3.635l-32.181-4.631a26.753 26.753 0 0 1-.773 4.797z"
-              fill="#000"
-              opacity="0.1"
-            />
-            <path
-              d="M201.96 397.562s27.263 5.795 30.245 5.008c2.981-.787 18.067.772 18.067.772 6.628 4.846 4.046-2.023 4.046-2.023s.734-3.508 0-6.395a39.232 39.232 0 0 1-.88-6.429s.326-4.505-.457-5.585c-.783-1.079-1.459-8.637-1.459-8.637s-.55-5.135-.433-6.259c.117-1.123-.059-4.294-.059-4.294l-.773-5.296c5.637-.533 23.091-10.392 23.091-10.392.973-3.498 7.631-11.52 7.631-11.52a8.689 8.689 0 0 1 .603-2.008c.486-1.182-6.143-3.845-6.143-3.845s-5.257 5.965-6.346 7.578c-1.09 1.612-4.82 4.553-4.82 4.553a3.622 3.622 0 0 0-1.653.152h-.088a13.31 13.31 0 0 0-3.404 1.802 6.5 6.5 0 0 0-4.63 1.549s-3.049-.567-3.589-.063c-.54.503-3.142-.123-3.142-.123s-2.431-5.657-4.187-4.108c-1.756 1.548-9.08 1.192-9.08 1.192-.919-1.339-3.254-2.36-4.713-2.897a6.404 6.404 0 0 0-3.89-.215 5.058 5.058 0 0 0-1.571.688l-4.591 4.183s-1.211-1.701-1.046-2.072c.166-.371-1.459-.733-1.459-.733s-2.144-.762-2.956-1.016c-.813-.254-1.605.606-1.673.684a8.73 8.73 0 0 0 .486-3.288c-.17-1.436.997-2.672.997-2.672-2.369-6.562-8.482-1.378-8.482-1.378s-.812 3.503-.262 4.885c.549 1.383-.759 4.182-.642 4.94.116.757-.375 2.017-.428 3.444-.054 1.427.588 4.163.972 5.374.385 1.212 3.891 4.065 3.891 4.065s.063 4.29 1.537 6.84c1.473 2.55.18 10.992.18 10.992s-1.751 6.552-3.701 8.584c-1.95 2.033-5.189 13.963-5.189 13.963z"
-              fill="#7598D6"
-            />
-            <path
-              d="M243.862 349.674s.919-2.442 1.673-2.643a17.026 17.026 0 0 0 2.208-.894l-.447-.943s-2.84.67-3.317 1.466c-.477.796-.117 3.014-.117 3.014zm15.241-4.899c.122.757 6.751 1.69 6.751 1.69l-3.234-3.523h-.083a13.37 13.37 0 0 0-3.434 1.833z"
-              fill="#5776AE"
-              opacity="0.1"
-            />
-            <path
-              d="M278.756 335.803a.599.599 0 0 0 .598-.601.599.599 0 1 0-1.196 0 .6.6 0 0 0 .598.601zm-.812 1.173a.6.6 0 0 0 0-1.202.6.6 0 0 0-.598.601.6.6 0 0 0 .598.601zm-.793 1.08a.599.599 0 0 0 .598-.601.6.6 0 0 0-.598-.601.6.6 0 0 0 0 1.202zm-.826 1.173a.6.6 0 0 0 .598-.601.599.599 0 1 0-1.196 0c0 .332.267.601.598.601zm-70.494-2.902a.488.488 0 0 0 0-.977.488.488 0 0 0 0 .977zm-.117 1.104a.487.487 0 0 0 .486-.488.487.487 0 1 0-.972 0c0 .269.217.488.486.488zm-.111 1.104a.488.488 0 0 0 0-.977.488.488 0 0 0 0 .977z"
-              fill="#4E6896"
-            />
-            <path
-              d="M243.045 370.032c.073-.083-17.605 20.652-30.22 7.788 0 0 20.571 3.615 30.22-7.788z"
-              fill="#5776AE"
-              opacity="0.1"
-            />
-            <path
-              d="M252.305 381.528s-10.101-.112-11.269 2.76l-.116 3.034a1.935 1.935 0 0 0 1.877.074c1.041-.513 7.256-3.391 9.352-1.808l.156-4.06z"
-              fill="#000"
-              opacity="0.1"
-            />
-            <path
-              d="M252.116 381.518s-9.654-.107-10.773 2.634l-.112 2.892a1.843 1.843 0 0 0 1.795.068c.973-.488 6.94-3.229 8.944-1.724l.146-3.87z"
-              fill="#5776AE"
-            />
-            <path
-              d="M247.641 359.309a32.921 32.921 0 0 1-4.168 6.59 26.35 26.35 0 0 1-6.361 5.707s10.305-10.929 10.529-12.297zm3.75-11.647s-1.946 7.236-6.396 9.546l6.396-9.546zm2.553.834c.048-.132 1.274 5.834-5.939 8.829 0 0 3.05-.914 5.939-8.829zm-43.862-6.594c.111 0-3.585 2.174-4.606 3.205.024 0 2.48-3.439 4.606-3.205z"
-              fill="#5776AE"
-              opacity="0.1"
-            />
-            <path
-              d="M233.099 337.739a1.916 1.916 0 0 1-.744 1.182 1.835 1.835 0 0 1-.846.152c-2.718.068-5.549.078-8.015-1.07a3.022 3.022 0 0 1-1.191-.86c-.428-.567-.486-1.314-.637-2.008-.302-1.348-1.007-2.565-1.498-3.86a12.758 12.758 0 0 1-.618-6.839 4.6 4.6 0 0 1 .754-1.955c.759-1.001 2.086-1.368 3.069-2.154.982-.787 1.644-2.018 2.782-2.594 1.021-.518 2.242-.406 3.365-.166a17.606 17.606 0 0 1 6.176 2.604c.628.425 1.318.908 2.067.796a2.879 2.879 0 0 0 1.586-1.124 8.35 8.35 0 0 1 .515 3.909 1.696 1.696 0 0 0 0 .586c.083.239.216.457.389.64.638.806 1.012 2.057.321 2.819-.301.332-.753.488-1.045.845-.525.606-.394 1.515-.414 2.321.018.28-.061.558-.223.786a1.16 1.16 0 0 1-1.109.22 3.024 3.024 0 0 0-1.167-.156 1.945 1.945 0 0 0-1.046.742c-1.318 1.535-1.863 3.279-2.471 5.184z"
-              fill="#9298AF"
-            />
-            <path
-              d="M234.476 343.22s-11.186 1.051-12.11-.669l12.11.669z"
-              fill="#000"
-              opacity="0.1"
-            />
-            <path
-              d="M213.043 337.763s-6.181-.229-7.626 2.042l7.626-2.042z"
-              fill="#5776AE"
-              opacity="0.1"
-            />
-            <path
-              d="M360.278 478.817c16.722 0 30.278-2.088 30.278-4.665s-13.556-4.666-30.278-4.666S330 471.575 330 474.152c0 2.577 13.556 4.665 30.278 4.665z"
-              fill="#7DBEDC"
-              opacity="0.1"
-            />
-            <path
-              d="M367.925 426s2.896 3.802-1.338 9.547c-4.234 5.745-7.721 10.592-6.309 14.173 0 0 6.383-10.665 11.584-10.793 5.201-.127 1.782-6.515-3.937-12.927z"
-              fill="#BBCADF"
-            />
-            <path
-              d="M367.926 426c.252.367.451.769.591 1.192 5.074 5.985 7.774 11.573 2.9 11.711-4.541.132-9.991 8.291-11.295 10.346.041.167.093.331.156.491 0 0 6.383-10.666 11.584-10.793 5.201-.128 1.782-6.535-3.936-12.947z"
-              fill="#BBCADF"
-              opacity="0.1"
-            />
-            <path
-              d="M373.307 430.847c0 1.339-.146 2.424-.332 2.424-.185 0-.332-1.085-.332-2.424s.186-.706.371-.706c.186 0 .293-.633.293.706z"
-              fill="#FFD037"
-            />
-            <path
-              d="M375.158 432.446c-1.172.638-2.192 1.025-2.28.863-.088-.162.791-.814 1.953-1.472 1.162-.657.708-.176.796 0 .088.177.698-.034-.469.609z"
-              fill="#FFD037"
-            />
-            <path
-              d="M352.63 426s-2.896 3.802 1.334 9.547c4.229 5.745 7.725 10.592 6.314 14.173 0 0-6.388-10.665-11.584-10.793-5.196-.127-1.782-6.515 3.936-12.927z"
-              fill="#BBCADF"
-            />
-            <path
-              d="M352.63 426a4.586 4.586 0 0 0-.595 1.192c-5.07 5.985-7.77 11.573-2.896 11.711 4.541.132 9.986 8.291 11.29 10.346-.039.167-.09.331-.151.491 0 0-6.388-10.666-11.584-10.793-5.196-.128-1.782-6.535 3.936-12.947z"
-              fill="#BBCADF"
-              opacity="0.1"
-            />
-            <path
-              d="M347.244 430.847c0 1.339.151 2.423.337 2.423.185 0 .332-1.084.332-2.423s-.186-.697-.366-.697c-.181 0-.303-.642-.303.697z"
-              fill="#FFD037"
-            />
-            <path
-              d="M345.398 432.446c1.172.638 2.192 1.025 2.28.863.088-.162-.791-.814-1.953-1.472-1.162-.657-.708-.176-.796 0-.088.177-.703-.034.469.609z"
-              fill="#FFD037"
-            />
-            <path
-              d="m375.871 444.593-.146 1.188-.201 1.678-.088.701-.2 1.678-.088.701-.205 1.673-2.315 19.084c-.21 1.703-2.979 3.032-6.348 3.032h-12.024c-3.345 0-6.109-1.329-6.314-3.032l-2.325-19.069-.2-1.673-.088-.701-.205-1.678-.083-.702-.205-1.678-.146-1.187c-.113-.981 1.387-1.776 3.276-1.776h24.623c1.89-.014 3.39.795 3.282 1.761z"
-              fill="#7598D6"
-            />
-            <path
-              d="m375.715 445.781-.2 1.678h-30.474l-.205-1.678h30.879zm-.288 2.374-.2 1.678H345.33l-.205-1.678h30.302zm-.289 2.379-.205 1.678h-29.315l-.201-1.678h29.721z"
-              fill="#BBCADF"
-            />
-            <path
-              d="m533.256 211.722 4.497-2.528 2.108 1.264L582 413.288l-2.524.481-5.266-4.571-40.954-197.476z"
-              fill="#E4E8EF"
-            />
-            <path
-              d="m537.753 209.194 41.723 204.575 2.524-.481-42.139-202.83-2.108-1.264z"
-              fill="#000"
-              opacity="0.1"
-            />
-            <path
-              d="m506.737 220.283 32.07 3.071v2.48l-31.899-2.778-.171-2.773zm3.399 30.216h34.007v3.63h-34.445l.438-3.63zm3.118 31.679 34.332-1.365 4.295 1.365v2.327l-30.504 1.605h-7.843l-.28-3.932z"
-              fill="#E4E8EF"
-            />
-            <path
-              d="m521.814 284.068 30.067-1.889v2.327l-30.504 1.605.437-2.043z"
-              fill="#000"
-              opacity="0.1"
-            />
-            <path
-              d="m513.254 282.179 8.56 1.889-.437 2.043h-7.843l-.28-3.932z"
-              fill="#000"
-              opacity="0.1"
-            />
-            <path
-              d="m516.364 316.564 37.905-3.517 4.177 1.089v2.428l-33.859 3.556-8.223.73v-4.286z"
-              fill="#E4E8EF"
-            />
-            <path
-              d="m524.443 318.077 30.237-3.04 3.766-.901v2.427l-33.859 3.556-.144-2.042z"
-              fill="#000"
-              opacity="0.1"
-            />
-            <path
-              d="m515.857 318.522 8.586-.446.144 2.043-8.223.73-.507-2.327z"
-              fill="#000"
-              opacity="0.1"
-            />
-            <path
-              d="m518.166 350.758 42.747-5.677 3.665 1.457v2.773l-36.872 5.546h-8.665l-.875-4.099z"
-              fill="#E4E8EF"
-            />
-            <path
-              d="m527.706 353.103 36.872-6.565v2.773l-36.872 5.546v-1.754zm-9.028.049 9.028-.048v1.753h-8.665l-.363-1.705z"
-              fill="#000"
-              opacity="0.1"
-            />
-            <path
-              d="m520.709 385.888 46.889-8.743 4.151 2.44v1.929l-41.142 9.982-8.481.643-1.417-6.251z"
-              fill="#E4E8EF"
-            />
-            <path
-              d="m530.588 389.591 41.142-9.925v1.929l-41.142 9.981v-1.985z"
-              fill="#000"
-              opacity="0.1"
-            />
-            <path
-              d="m521.613 390.042 8.975-.45v1.986l-8.481.643-.494-2.179z"
-              fill="#000"
-              opacity="0.1"
-            />
-            <path
-              d="m509.725 206.667-3.793.844 13.7 218.104 4.002 1.474h3.162l-17.071-220.422z"
-              fill="#E4E8EF"
-            />
-            <path
-              d="m507.874 207.078 15.76 220.011h3.162l-17.072-220.422-1.85.411z"
-              fill="#000"
-              opacity="0.1"
-            />
-            <path
-              d="M520.716 201.268a12.747 12.747 0 0 0-2.182-2.433 4.558 4.558 0 0 0-2.263-.683 5.242 5.242 0 0 1-2.516-1.582c-.346-.354-.022-.559.637-.479.658.08 1.593.525 1.872.497.278-.028.257-.368-.09-.967a6.873 6.873 0 0 0-1.696-1.849c-.492-.314-1.826-.901-2.008-1.313-.181-.413-.094-.635.594-.478.711.117 1.407.31 2.076.577.461.183.924-.28 2.544.261.491.195.969.419 1.433.671.095.004.189.018.281.042.619.186 1.134 2.237 1.504 2.774a27.939 27.939 0 0 0 2.872 2.416l-3.058 2.546z"
-              fill="#FCB6AC"
-            />
-            <path
-              d="M553.26 223.615c-.387-1.969-1.131-3.895-1.149-5.901-.028-3.258 1.706-7.041-.573-9.447-.52-.548-1.217-.957-1.604-1.598a3.516 3.516 0 0 1-.402-1.802c-.038-3.8 2.056-7.658.801-11.259a3.819 3.819 0 0 0-1.436-2.003c-.725-.471-1.548-.561-2.437-.545-.802 0-1.647.09-2.477.105-.47 0-.937-.061-1.391-.183-.959-.272-1.774-.901-2.724-1.21a4.471 4.471 0 0 0-1.549-.214c-2.08-.068-3.982 1.316-5.462 2.657a20.493 20.493 0 0 1-2.337 1.7c.123-.087-2.889 1.981-1.756 2.003.81.024 1.592.296 2.242.78a6.059 6.059 0 0 0 .309 7.023 226.412 226.412 0 0 0-1.594-1.548c-1.66-1.632-3.979-3.821-5.069-4.419-1.793-.963-4.354-3.056-4.354-3.056s-3.328 1.858-2.303 4.437c.489.152.966.339 1.427.561 0 .343.067.682.195 1 1.053.332 2.05.821 2.957 1.449.103.143.198.29.285.443.443.774 1.821 2.183 3.505 3.75 1.183 1.185 2.741 2.604 4.292 3.969-.468.929-.96 1.858-1.047 2.787a3.562 3.562 0 0 1-.35-.161c-2.303-1.239-7.679-1.109-7.679-1.109s-4.48-2.341-5.375-7.638c0 0-.895-3.205-.641-4.066h-.016l.115-.025 1.074-1.947a.857.857 0 0 0-.008-.825.865.865 0 0 0-.698-.439c-5.239-.47-5.486 4.335-5.486 4.335h.046l-.015.04c.641 3.081 1.151 2.834 1.025 5.298l2.046 5.422s.127 1.858 3.84 4.313c3.712 2.456 7.936 6.286 7.936 6.286s-2.239 1.171-1.409 6.53c1.016 6.552-.511 15.897-.511 15.897v6.038l.285-.077c-.037.201-.071.415-.108.647a34.006 34.006 0 0 0-.177 9.169c.768 6.409 3.84 15.172 3.84 15.172s1.152 3.081 1.409 5.546c.04.488.151.967.328 1.424.577 1.353.882 2.806.898 4.276a30.113 30.113 0 0 0 1.972 10.81c1.298 3.294 1.781 5.226 1.923 6.353-.929 1.202-2.124 2.512-3.075 2.642-1.793.247-5.248.492-2.944 3.449.079.102.169.196.266.282-1.75.279-3.672.892-1.802 3.291 2.303 2.957 15.869 1.601 15.869 1.601s.087-1.644 0-3.449c.95-.065 1.548-.124 1.548-.124s.384-7.147-1.279-8.01a3.61 3.61 0 0 0-.898.216c-.179-.987-.309-2.217-.402-3.124l.659-.05v-.049h.041v-10.769s-.768-6.655-3.583-9.599a5.982 5.982 0 0 1-.929-1.239l-.037-.077c.018-.842.018-1.979 0-3.282l.04-.072a2.62 2.62 0 0 1 .356-.464l.04-.053s1.549-1.858 6.785-13.556c3.198-7.14 2.353-11.147 1.207-13.212-.241-.929-.746-3.01-1.378-6.574a25.734 25.734 0 0 1-.368-4.579c.793.198 1.61.29 2.428.272a8.237 8.237 0 0 0 3.715-.793c-.836-1.22-1.709-2.65-1.288-4.053.477-1.597 2.366-2.331 3.456-3.619 1.313-1.558 1.347-3.781.96-5.754z"
-              fill="url(#workers-hero_svg__b)"
-            />
-            <path
-              d="M520.828 196.015s-3.177 1.833-2.199 4.4c0 0 3.301.978 4.645 3.421 1.344 2.443 11.732 11.243 11.732 11.243l7.587-3.787s-2.636-3.517-10.971-5.976c0 0-4.914-5.264-6.626-6.245-1.713-.982-4.168-3.056-4.168-3.056z"
-              fill="#5776AE"
-            />
-            <path
-              d="M522.376 197.563s-3.177 1.834-2.198 4.4c0 0 3.3.979 4.644 3.422 1.344 2.443 11.733 11.243 11.733 11.243l7.586-3.787s-2.635-3.517-10.971-5.976c0 0-4.914-5.264-6.626-6.245-1.712-.982-4.168-3.057-4.168-3.057z"
-              fill="#000"
-              opacity="0.05"
-            />
-            <path
-              d="M540.626 300.252s.366 5.375.979 5.988c.613.613-5.499.979-5.499.979l.854-6.967h3.666z"
-              fill="#FFB9B9"
-            />
-            <path
-              d="M540.626 300.252s.366 5.375.979 5.988c.613.613-5.499.979-5.499.979l.854-6.967h3.666z"
-              fill="#000"
-              opacity="0.05"
-            />
-            <path
-              d="M541.973 304.408s-.855 0-3.911 1.588c0 0-2.077-.365-2.932-3.301 0 0-2.567 4.4-4.276 4.645-1.709.245-5.01.489-2.812 3.421 2.199 2.933 15.154 1.589 15.154 1.589s.362-7.088-1.223-7.942z"
-              fill="#9298AF"
-            />
-            <path
-              d="M541.973 304.408s-.855 0-3.911 1.588c0 0-2.077-.365-2.932-3.301 0 0-2.567 4.4-4.276 4.645-1.709.245-5.01.489-2.812 3.421 2.199 2.933 15.154 1.589 15.154 1.589s.362-7.088-1.223-7.942z"
-              fill="#333"
-              opacity="0.1"
-            />
-            <path
-              d="m540.137 308.562-.854 2.322-5.62-1.588.309-2.304.078-.557.213-1.549s4.766-1.223 4.766-.619a9.44 9.44 0 0 0 .309 1.489c.195.753.44 1.607.62 2.168.105.393.179.638.179.638z"
-              fill="#FFB9B9"
-            />
-            <path
-              d="M537.068 276.692a3.341 3.341 0 0 0 0 3.406c.241.441.536.85.88 1.217 2.687 2.932 3.421 9.53 3.421 9.53v10.63l-1.833.14-2.932.226-4.4-18.086s-2.567-13.197-1.344-15.52c1.223-2.322 2.322-16.863 2.322-16.863l1.016-1.049 2.406-2.493h6.967c.557.399 1.02.916 1.356 1.514 1.171 1.935 2.22 5.961-.988 13.392-5.01 11.609-6.477 13.442-6.477 13.442a2.772 2.772 0 0 0-.394.514z"
-              fill="#4E6896"
-            />
-            <path
-              d="M537.109 276.639a3.335 3.335 0 0 0 0 3.406c.24.441.536.85.879 1.217 2.688 2.932 3.422 9.531 3.422 9.531v10.63l-1.833.139-2.933.226-4.4-18.086s-2.567-13.197-1.344-15.519c1.224-2.323 2.323-16.863 2.323-16.863l1.015-1.05 2.406-2.493h6.967c.558.4 1.021.917 1.356 1.514 1.171 1.936 2.221 5.961-.987 13.392-5.01 11.609-6.478 13.442-6.478 13.442-.15.156-.282.328-.393.514z"
-              fill="#333"
-              opacity="0.1"
-            />
-            <path
-              d="m539.35 305.772-5.291.663.213-1.549s4.766-1.223 4.766-.619a9.53 9.53 0 0 0 .312 1.505z"
-              fill="#000"
-              opacity="0.1"
-            />
-            <path
-              d="M536.709 261.027s.31 9.62.353 15.665v3.406c.007.449-.026.897-.099 1.34-.365 1.1.366 3.543.366 3.543a35.273 35.273 0 0 1 2.198 15.153v5.376l-5.864.734s.978-.734-1.713-7.822a30.912 30.912 0 0 1-1.886-10.72 11.48 11.48 0 0 0-.857-4.242 5.255 5.255 0 0 1-.31-1.412c-.244-2.443-1.344-5.499-1.344-5.499s-2.932-8.67-3.666-15.03a35.026 35.026 0 0 1 .17-9.091c.108-.764.255-1.523.44-2.273 0 0 11.946-7.518 16.458-2.322a5.884 5.884 0 0 1 1.018 1.712c.248.617.441 1.254.576 1.905 1.403 6.889-5.84 9.577-5.84 9.577z"
-              fill="#4E6896"
-            />
-            <path
-              d="M536.347 207.505a6.233 6.233 0 1 0 0-12.466 6.233 6.233 0 0 0 0 12.466z"
-              fill="#FFB9B9"
-            />
-            <path
-              d="M532.925 205.179s2.567 7.209 0 10.999c-2.566 3.79 8.187 2.567 8.187 2.567l4.156-5.01s-4.889 0-5.134-8.556c-.245-8.555-7.209 0-7.209 0z"
-              fill="#FFB9B9"
-            />
-            <path
-              d="M545.268 250.761a15.97 15.97 0 0 1-2.722.682c-1.52.235-3.316.244-4.366-.682-.619-.548-2.167-.619-3.997-.439-3.88.371-9.129 1.817-10.132 2.102.108-.764.255-1.523.44-2.273 0 0 11.946-7.518 16.457-2.322h2.607c.558.4 1.021.916 1.357 1.514.226.973.356 1.418.356 1.418zm-5.131 57.801-.854 2.322-5.62-1.588.309-2.304c.966 2.137 2.614 2.428 2.614 2.428a19.908 19.908 0 0 1 3.362-1.474c.115.371.189.616.189.616z"
-              fill="#000"
-              opacity="0.1"
-            />
-            <path
-              d="M540.503 307.953s-.855 0-3.911 1.588c0 0-2.078-.365-2.933-3.301 0 0-2.566 4.4-4.276 4.645-1.709.244-5.01.489-2.811 3.421 2.198 2.933 15.154 1.589 15.154 1.589s.365-7.088-1.223-7.942z"
-              fill="#9298AF"
-            />
-            <path
-              d="M515.949 152.785h-60.18c-1.47 0-2.662.702-2.662 1.569v41.235c0 .867 1.192 1.569 2.662 1.569h60.18c1.47 0 2.661-.702 2.661-1.569v-41.235c0-.867-1.191-1.569-2.661-1.569z"
-              fill="#E4E8EF"
-            />
-            <path
-              d="M513.037 155.955h-54.356c-1.328 0-2.404.602-2.404 1.345v35.344c0 .743 1.076 1.345 2.404 1.345h54.356c1.328 0 2.404-.602 2.404-1.345V157.3c0-.743-1.076-1.345-2.404-1.345z"
-              fill="#fff"
-            />
-            <path
-              d="M503.117 162.294h-34.204a2.076 2.076 0 0 0-2.071 2.081v9.132c0 1.149.927 2.081 2.071 2.081h34.204a2.077 2.077 0 0 0 2.072-2.081v-9.132a2.077 2.077 0 0 0-2.072-2.081z"
-              fill="#7598D6"
-              opacity="0.2"
-            />
-            <path
-              d="M498.537 180.254h-25.356v3.169h25.356v-3.169z"
-              fill="#FF7067"
-            />
-            <path
-              d="M510.453 186.176h-48.894v2.712h48.894v-2.712z"
-              fill="#7598D6"
-              opacity="0.7"
-            />
-            <path
-              d="M516.281 203.468a12.718 12.718 0 0 1-.962-3.124 4.56 4.56 0 0 1 .581-2.292 5.243 5.243 0 0 0-.059-2.971c-.126-.479-.468-.306-.739.299-.271.606-.371 1.636-.539 1.86-.168.224-.448.031-.782-.574a6.864 6.864 0 0 1-.711-2.407c-.015-.584.169-2.029-.091-2.397-.26-.369-.495-.408-.715.263a10.023 10.023 0 0 0-.576 2.076c-.08.49-.716.648-1.087 2.315-.086.521-.14 1.046-.163 1.573a1.403 1.403 0 0 0-.109.263c-.16.626 1.333 2.125 1.602 2.719.28 1.22.478 2.458.592 3.705l3.758-1.308z"
-              fill="#FCB6AC"
-            />
-            <path
-              d="M540.382 215.2s-5.989-.978-7.577-2.198c0 0-1.223 2.322-3.422 1.099-2.198-1.223-7.332-1.099-7.332-1.099a11.093 11.093 0 0 1-5.134-7.577s-.854-3.177-.619-4.026c0 0-3.177-3.3-4.766 1.1.62 3.056 1.1 2.811.979 5.264l1.954 5.375s.121 1.833 3.666 4.276c3.545 2.443 7.577 6.233 7.577 6.233s-2.14 1.161-1.344 6.478c.972 6.502-.489 15.764-.489 15.764v5.988s12.221-3.542 14.296-1.712c2.074 1.83 7.087 0 7.087 0s-.619-2.078-1.467-7.088c-.849-5.01.121-9.908.121-9.908s3.176-8.432 4.644-11.853c1.468-3.422-1.099-8.051-3.666-9.776-2.567-1.725-3.521-.684-3.521-.684s4.512 3.245-.987 4.344z"
-              fill="#7598D6"
-            />
-            <path
-              d="M524.68 232.852s.975-.235 5.861-.969 13.442.978 13.442.978"
-              fill="#000"
-              opacity="0.05"
-            />
-            <path
-              d="M528.903 197.235c2.787.058 4.849 3.495 3.614 5.976-.542 1.09-1.592 2.049-1.483 3.26.049.551.343 1.05.47 1.589.585 2.477-2.378 4.796-1.7 7.242a5.243 5.243 0 0 0 1.059 1.774l5.147 6.484c.312.357.571.758.767 1.189.197.615.272 1.261.223 1.904-.024 3.097.177 6.419 2.004 8.931 2.195 3.015 6.669 4.099 9.998 2.418-.799-1.211-1.632-2.629-1.239-4.026.456-1.582 2.258-2.313 3.298-3.588 1.257-1.548 1.288-3.747.929-5.701-.359-1.954-1.081-3.864-1.096-5.852-.025-3.229 1.629-6.982-.548-9.367-.499-.545-1.161-.947-1.533-1.585a3.603 3.603 0 0 1-.384-1.79c-.034-3.765 1.963-7.595.765-11.165a3.785 3.785 0 0 0-1.372-1.988c-1.696-1.143-4.05-.034-6.013-.619-.929-.27-1.694-.895-2.601-1.202-2.446-.827-4.709.833-6.4 2.425a19.454 19.454 0 0 1-2.233 1.684c.121-.065-2.755 1.985-1.672 2.007z"
-              fill="#000"
-              opacity="0.1"
-            />
-            <path
-              d="M529.213 197.235c2.787.058 4.849 3.495 3.613 5.976-.541 1.09-1.591 2.049-1.483 3.26.05.551.344 1.05.471 1.589.585 2.477-2.378 4.796-1.7 7.242a5.211 5.211 0 0 0 1.059 1.774l5.146 6.484c.313.357.571.758.768 1.189.196.615.272 1.261.223 1.904-.025 3.097.176 6.419 2.003 8.931 2.196 3.015 6.67 4.099 9.999 2.418-.799-1.211-1.632-2.629-1.239-4.026.455-1.582 2.257-2.313 3.298-3.588 1.257-1.548 1.288-3.747.929-5.701-.36-1.954-1.081-3.864-1.096-5.852-.025-3.229 1.628-6.982-.549-9.367-.498-.545-1.161-.947-1.532-1.585a3.593 3.593 0 0 1-.384-1.79c-.034-3.765 1.963-7.595.765-11.165a3.79 3.79 0 0 0-1.372-1.988c-1.697-1.143-4.05-.034-6.013-.619-.929-.27-1.694-.895-2.601-1.202-2.446-.827-4.71.833-6.401 2.425a19.443 19.443 0 0 1-2.232 1.684c.121-.065-2.756 1.985-1.672 2.007z"
-              fill="#4E6896"
-            />
-            <path
-              d="M423.48 110.371s-3.149 1.025-7.604 7.839c-4.455 6.815-11.902 27.638-11.902 27.638h28.794s12.5-21.152 13.365-22.346a10.074 10.074 0 0 0 1.616-4.042l-3.365-3.957-20.904-5.132z"
-              fill="#4D73B8"
-            />
-            <path
-              d="M423.668 130.449c-.207-.433-.404-.874-.611-1.316-.78-1.645.414-5.922-1.269-6.223-1.522-.272-11.777 17.427-11.223 17.953.226.226 4.258-4.267 4.559-4.154 1.589.611 3.563-2.82 5.254-3.046a3.294 3.294 0 0 0 2.745-1.457"
-              fill="#F9D8CD"
-              opacity="0.61"
-            />
-            <path
-              d="M467.751 149.398a13.792 13.792 0 0 1 2.82 2.133c.514.698.837 1.518.94 2.378a5.643 5.643 0 0 0 1.88 2.557c.414.348.611 0 .47-.714-.141-.715-.705-1.664-.705-1.974 0-.31.376-.301 1.043 0a7.418 7.418 0 0 1 2.143 1.663c.376.499 1.119 1.88 1.57 2.04.451.16.686 0 .47-.677a11.212 11.212 0 0 0-.799-2.18c-.244-.48.216-1.016-.507-2.707a12.258 12.258 0 0 0-.837-1.476 1.42 1.42 0 0 0-.066-.301c-.254-.648-2.5-1.024-3.102-1.372a30.371 30.371 0 0 1-2.819-2.876l-2.501 3.506z"
-              fill="#AB7D7D"
-            />
-            <path
-              d="m414.739 120.147 14.014.686 17.746 2.077c5.104-8.854-6.185-13.77-8.337-13.995l-6.222-.94a27.901 27.901 0 0 0-9.466 2.885c-2.66 1.363-5.649 4.832-7.735 9.287z"
-              fill="#4E6896"
-            />
-            <path
-              d="M439.497 106.94s-.555 2.604-.686 3.337a2.089 2.089 0 0 1-2.049 1.71c-5.471 0-5.292-3.44-5.292-3.44 1.034-1.776 1.438-6.908 1.438-6.908m16.186 51.48a13.688 13.688 0 0 0 2.246 2.707 4.912 4.912 0 0 0 2.406.827 5.643 5.643 0 0 1 2.642 1.805c.357.395 0 .602-.705.489-.705-.113-1.692-.63-1.993-.611-.301.019-.291.385.056 1.043a7.42 7.42 0 0 0 1.749 2.059c.517.357 1.926 1.043 2.105 1.494.179.451.075.686-.658.489-.759-.155-1.5-.391-2.209-.705-.489-.216-1.005.263-2.726-.385-.519-.23-1.025-.49-1.513-.781a1.466 1.466 0 0 1-.301-.056c-.658-.226-1.128-2.453-1.504-3.045a29.935 29.935 0 0 0-2.989-2.717l3.394-2.613z"
-              fill="#AB7D7D"
-            />
-            <path
-              d="M418.781 123.352c-2.012-3.083 4.37-6.73 4.37-6.73l2.472 1.024c1.476-.742 4.023-1.879 4.023-1.879l1.335 3.637a3.114 3.114 0 0 1-.16 1.711c.094 2.087 3.863 13.544 4.023 13.714a157.38 157.38 0 0 1 14.767 18.657 5.486 5.486 0 0 1-1.382 1.88 8.48 8.48 0 0 1-1.814 1.279s-11.684-9.494-16.985-15.039c-4.935-5.255-8.638-15.171-10.649-18.254z"
-              fill="#4E6896"
-            />
-            <path
-              d="M446.199 104.346a7.623 7.623 0 0 1-3.459 3.609 6.574 6.574 0 0 1-5.245-.141 8.36 8.36 0 0 1-4.85-7.519 8.324 8.324 0 0 1 5.038-7.426c2.716-1.118 6.974-.62 9.033 1.692 2.058 2.313.723 7.351-.517 9.785z"
-              fill="#AB7D7D"
-            />
-            <path
-              d="M432.626 100.257a8.336 8.336 0 0 0 4.85 7.52 6.765 6.765 0 0 0 4.699.338 11.038 11.038 0 0 1-3.036-.573 8.466 8.466 0 0 1-4.991-7.52c0-3.167 2.82-6.25 5.743-7.463.303-.132.618-.236.94-.31a8.038 8.038 0 0 0-8.252 7.999l.047.009z"
-              fill="#AB7D7D"
-            />
-            <path
-              d="M447.364 97.823a6.476 6.476 0 0 1-4.916-3.506 3.276 3.276 0 0 1-2.089 2.05 3.268 3.268 0 0 1-2.892-.443 3.965 3.965 0 0 1-3.506 4.108 1.684 1.684 0 0 1 .111 1.498 1.666 1.666 0 0 1-1.136.983 2.23 2.23 0 0 1-2.416-1.569 3.37 3.37 0 0 1 .649-2.97 5.643 5.643 0 0 1-1.88-6.89 5.641 5.641 0 0 1 6.523-2.914 5.34 5.34 0 0 1 10.039-.188c-.075-.17 1.532-.103 1.654-.094a4.928 4.928 0 0 1 1.88.48c1.09.535.019 9.662-2.021 9.455z"
-              fill="#3E486E"
-            />
-            <path
-              d="M432.748 100.529c-.169-1.052.432-2.537 1.363-2.754a1.493 1.493 0 0 1 1.964 1.222c.17 1.053-.413 2.82-1.334 3.055a1.716 1.716 0 0 1-1.786-.855 1.708 1.708 0 0 1-.207-.668z"
-              fill="#AB7D7D"
-            />
-            <path
-              d="m446.781 114.836 9.983 16.778-5.151 5.32s-2.905-2.641-4.841-4.85a86.63 86.63 0 0 1-2.331-2.764 7.788 7.788 0 0 1-1.617-6.382c.194-1.325.528-2.627.997-3.882 1.926-3.816 2.96-4.22 2.96-4.22z"
-              fill="#4E6896"
-            />
-            <path
-              d="M456.763 131.614s10.34 10.208 14.701 15.387l-2.528 3.337s-14.24-8.29-19.692-16.383c-3.91-5.809 7.519-2.341 7.519-2.341zm-34.119-11.082s-3.215 7.068-6.58 6.166c-2.773-.733-1.307-6.533-1.307-6.533l3.76-3.402 4.127 3.769z"
-              fill="#4E6896"
-            />
-            <path
-              d="M445.738 114.976a30.409 30.409 0 0 1-2.463 15.039l-1.062-7.604a28.77 28.77 0 0 0 0-11.862c.451.133.882.33 1.278.583a4.409 4.409 0 0 1 2.247 3.844zm-11.871 6.834s-.527-12.078-7.323-12.642a3.825 3.825 0 0 0-2.528.94s5.875 1.729 6.852 11.392l2.999.31z"
-              fill="#5E7EBE"
-            />
-            <path
-              d="M436.273 94.373s2.275 4.324 12.05 5.301c.742.075 3.318-.498 1.109-2.754l-13.159-2.547z"
-              fill="#FF7067"
-            />
-            <path
-              d="M449.714 96.093c.724-2.359 2.077-9.202-5.029-12.219-10.546-4.512-14.306 1.974-15.678 7.52a.799.799 0 0 0-.714.592.677.677 0 0 0 .441.658 20.32 20.32 0 0 0 2.82.864c4.183 1.25 12.135 3.384 17.445 3.412a.511.511 0 0 0 .47 0c.743-.3.245-.827.245-.827z"
-              fill="#FF7067"
-            />
-            <path
-              d="M438.594 82.332s8.638 2.181 5.64 14.175c1.203.257 2.427.402 3.656.432 0 0 2.783-9.042-3.205-13.065 0 0-2.679-2.82-6.091-1.541z"
-              fill="#FF9892"
-            />
-          </g>
-          <defs>
-            <lineargradient
-              gradientUnits="userSpaceOnUse"
-              id="workers-hero_svg__a"
-              x1="-83174.9"
-              x2="-80305.1"
-              y1="160912"
-              y2="89492.9"
-            >
-              <stop
-                offset="0"
-                stop-color="gray"
-                stop-opacity="0.25"
-              />
-              <stop
-                offset="0.54"
-                stop-color="gray"
-                stop-opacity="0.12"
-              />
-              <stop
-                offset="1"
-                stop-color="gray"
-                stop-opacity="0.1"
-              />
-            </lineargradient>
-            <lineargradient
-              gradientUnits="userSpaceOnUse"
-              id="workers-hero_svg__b"
-              x1="44677.7"
-              x2="44677.7"
-              y1="103244"
-              y2="51679.6"
-            >
-              <stop
-                offset="0"
-                stop-color="gray"
-                stop-opacity="0.25"
-              />
-              <stop
-                offset="0.54"
-                stop-color="gray"
-                stop-opacity="0.12"
-              />
-              <stop
-                offset="1"
-                stop-color="gray"
-                stop-opacity="0.1"
-              />
-            </lineargradient>
-          </defs>
-        </svg>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json
index 828fa1d3c1..ab3abb76a9 100644
--- a/packages/react-ui/package.json
+++ b/packages/react-ui/package.json
@@ -8,8 +8,10 @@
   "description": "Composants ReactJS",
   "main": "lib/index.js",
   "files": [
-    "lib"
+    "lib",
+    "types.d.ts"
   ],
+  "types": "./types.d.ts",
   "scripts": {
     "build": "tsc",
     "build:dev": "swc ./src -d lib --strip-leading-paths",
diff --git a/packages/react-ui/src/ScreenReaderOnly/index.js b/packages/react-ui/src/ScreenReaderOnly/index.js
index 1915bbea58..8cf0108956 100644
--- a/packages/react-ui/src/ScreenReaderOnly/index.js
+++ b/packages/react-ui/src/ScreenReaderOnly/index.js
@@ -2,17 +2,24 @@ import PropTypes from "prop-types";
 import React from "react";
 import styled from "styled-components";
 
-export const ScreenReaderOnly = React.forwardRef(({ type, ...props }, ref) => {
-  return type === "inline" ? (
-    <SROnly as="span" {...props} ref={ref} />
-  ) : (
-    <SROnly {...props} ref={ref} />
-  );
-});
+export const ScreenReaderOnly = React.forwardRef(
+  ({ type, children, ...props }, ref) => {
+    return type === "inline" ? (
+      <SROnly as="span" {...props} ref={ref}>
+        {children}
+      </SROnly>
+    ) : (
+      <SROnly {...props} ref={ref}>
+        {children}
+      </SROnly>
+    );
+  }
+);
 
 ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
 ScreenReaderOnly.propTypes = {
+  children: PropTypes.node,
   type: PropTypes.oneOf(["block", "inline"]),
 };
 
diff --git a/packages/react-ui/types.d.ts b/packages/react-ui/types.d.ts
new file mode 100644
index 0000000000..2bb011bbc8
--- /dev/null
+++ b/packages/react-ui/types.d.ts
@@ -0,0 +1 @@
+declare module "@socialgouv/cdtn-ui";
diff --git a/yarn.lock b/yarn.lock
index 8cd08bab22..41877ef8c4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2164,6 +2164,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.24.5":
+  version: 7.24.7
+  resolution: "@babel/runtime@npm:7.24.7"
+  dependencies:
+    regenerator-runtime: ^0.14.0
+  checksum: d17f29eed6f848ac15cdf4202a910b741facfb0419a9d79e5c7fa37df6362fc3227f1cc2e248cc6db5e53ddffb4caa6686c488e6e80ce3d29c36a4e74c8734ea
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.18.10, @babel/template@npm:^7.20.7, @babel/template@npm:^7.21.9, @babel/template@npm:^7.3.3":
   version: 7.21.9
   resolution: "@babel/template@npm:7.21.9"
@@ -2356,7 +2365,6 @@ __metadata:
     "@types/cors": ^2.8.13
     "@types/debounce-promise": ^3.1.4
     "@types/jest": ^29.5.12
-    "@types/react-autosuggest": ^10.1.6
     "@ungap/url-search-params": ^0.2.2
     cors: ^2.8.5
     cypress: ^13.9.0
@@ -2364,6 +2372,7 @@ __metadata:
     cypress-iframe: ^1.0.1
     date-fns: ^2.22.1
     debounce-promise: ^3.1.2
+    downshift: ^9.0.6
     eslint: 8.57.0
     eslint-config-next: 14.1.0
     eslint-plugin-cypress: ^2.12.1
@@ -2390,7 +2399,6 @@ __metadata:
     prop-types: ^15.8.1
     publicodes: 1.0.0-beta.60
     react: ^18.2.0
-    react-autosuggest: 10.1.0
     react-dom: ^18.2.0
     react-final-form: ^6.5.3
     react-final-form-arrays: ^3.1.3
@@ -8372,15 +8380,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-autosuggest@npm:^10.1.6":
-  version: 10.1.6
-  resolution: "@types/react-autosuggest@npm:10.1.6"
-  dependencies:
-    "@types/react": "*"
-  checksum: 61a3dc9548607d4abef1463a35e7409540e5893ad7400e0a0fb3617f1a97967822f7ad0f7146824aa188648efe8db377549599db80d5d86c5b79cd0b19792227
-  languageName: node
-  linkType: hard
-
 "@types/react-dom@npm:<18.0.0":
   version: 17.0.20
   resolution: "@types/react-dom@npm:17.0.20"
@@ -11038,6 +11037,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"compute-scroll-into-view@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "compute-scroll-into-view@npm:3.1.0"
+  checksum: 224549d6dd1d40342230de5c6d69cac5c3ed5c2f6a4437310f959aadc8db1d20b03da44a6e0de14d9419c6f9130ce51ec99a91b11bde55d4640f10551c89c213
+  languageName: node
+  linkType: hard
+
 "concat-map@npm:0.0.1":
   version: 0.0.1
   resolution: "concat-map@npm:0.0.1"
@@ -12210,6 +12216,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"downshift@npm:^9.0.6":
+  version: 9.0.6
+  resolution: "downshift@npm:9.0.6"
+  dependencies:
+    "@babel/runtime": ^7.24.5
+    compute-scroll-into-view: ^3.1.0
+    prop-types: ^15.8.1
+    react-is: 18.2.0
+    tslib: ^2.6.2
+  peerDependencies:
+    react: ">=16.12.0"
+  checksum: 3b080426ffed5598df568ebace5d728dc92968bda5f9b8e2182f623c57ce16b4b7baebd7ea602530b40af18e72a7bf56c439606944a0dd1cd8eaadb8004d52fa
+  languageName: node
+  linkType: hard
+
 "duplexer@npm:^0.1.1, duplexer@npm:^0.1.2":
   version: 0.1.2
   resolution: "duplexer@npm:0.1.2"
@@ -12554,13 +12575,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es6-promise@npm:^4.2.8":
-  version: 4.2.8
-  resolution: "es6-promise@npm:4.2.8"
-  checksum: 95614a88873611cb9165a85d36afa7268af5c03a378b35ca7bda9508e1d4f1f6f19a788d4bc755b3fd37c8ebba40782018e02034564ff24c9d6fa37e959ad57d
-  languageName: node
-  linkType: hard
-
 "es6-symbol@npm:^3.1.1, es6-symbol@npm:^3.1.3":
   version: 3.1.3
   resolution: "es6-symbol@npm:3.1.3"
@@ -19575,13 +19589,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object-assign@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "object-assign@npm:3.0.0"
-  checksum: 56c66a77318aea95b11bd16a65c313e98786cea1db673a7fdd3bc92aced671b35f62a9819ad9cf7846921c773818329636cda5cd1b7c4fa0ce9908440e091dac
-  languageName: node
-  linkType: hard
-
 "object-assign@npm:^4, object-assign@npm:^4.0.1, object-assign@npm:^4.1.1":
   version: 4.1.1
   resolution: "object-assign@npm:4.1.1"
@@ -21268,21 +21275,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-autosuggest@npm:10.1.0":
-  version: 10.1.0
-  resolution: "react-autosuggest@npm:10.1.0"
-  dependencies:
-    es6-promise: ^4.2.8
-    prop-types: ^15.7.2
-    react-themeable: ^1.1.0
-    section-iterator: ^2.0.0
-    shallow-equal: ^1.2.1
-  peerDependencies:
-    react: ">=16.3.0"
-  checksum: 3526b02bb1938374c2a0d108a03666eae24cddd8bef7686e7f6271bb4c25ad34f8b09e84d1cc2e9206aff577a742c1f8481964e75442a9e080326676ad71f8ae
-  languageName: node
-  linkType: hard
-
 "react-clientside-effect@npm:^1.2.6":
   version: 1.2.6
   resolution: "react-clientside-effect@npm:1.2.6"
@@ -21470,6 +21462,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-is@npm:18.2.0, react-is@npm:^18.0.0":
+  version: 18.2.0
+  resolution: "react-is@npm:18.2.0"
+  checksum: e72d0ba81b5922759e4aff17e0252bd29988f9642ed817f56b25a3e217e13eea8a7f2322af99a06edb779da12d5d636e9fda473d620df9a3da0df2a74141d53e
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^16.13.1, react-is@npm:^16.7.0":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
@@ -21484,13 +21483,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^18.0.0":
-  version: 18.2.0
-  resolution: "react-is@npm:18.2.0"
-  checksum: e72d0ba81b5922759e4aff17e0252bd29988f9642ed817f56b25a3e217e13eea8a7f2322af99a06edb779da12d5d636e9fda473d620df9a3da0df2a74141d53e
-  languageName: node
-  linkType: hard
-
 "react-lifecycles-compat@npm:^3.0.0":
   version: 3.0.4
   resolution: "react-lifecycles-compat@npm:3.0.4"
@@ -21628,15 +21620,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-themeable@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "react-themeable@npm:1.1.0"
-  dependencies:
-    object-assign: ^3.0.0
-  checksum: 80d8fa67d15f3136ae8054bfbecc2f1a396b7cda4f10380e13e8f344b07543a55adfb5aca0cf741071e406d8115ff3ea8e361476a086ba5ad55a1feb9cb9ae7a
-  languageName: node
-  linkType: hard
-
 "react-uid@npm:^2.3.1":
   version: 2.3.3
   resolution: "react-uid@npm:2.3.3"
@@ -22453,13 +22436,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"section-iterator@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "section-iterator@npm:2.0.0"
-  checksum: d11ae54205baf1ccea5f847b3b5cd9394128ac1051b4ac236d145c9b386e5dd274371a63991e575e20373bacd1c287bfe6159ddf366cb21f30b123e185e6bc7d
-  languageName: node
-  linkType: hard
-
 "secure-json-parse@npm:^2.4.0":
   version: 2.7.0
   resolution: "secure-json-parse@npm:2.7.0"
@@ -22652,13 +22628,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"shallow-equal@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "shallow-equal@npm:1.2.1"
-  checksum: 4f1645cc516e7754c4438db687e1da439a5f29a7dba2ba90c5f88e5708aeb17bc4355ba45cad805b0e95dc898e37d8bf6d77d854919c7512f89939986cff8cd1
-  languageName: node
-  linkType: hard
-
 "shallowequal@npm:^1.1.0":
   version: 1.1.0
   resolution: "shallowequal@npm:1.1.0"
@@ -24472,6 +24441,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tslib@npm:^2.6.2":
+  version: 2.6.3
+  resolution: "tslib@npm:2.6.3"
+  checksum: 74fce0e100f1ebd95b8995fbbd0e6c91bdd8f4c35c00d4da62e285a3363aaa534de40a80db30ecfd388ed7c313c42d930ee0eaf108e8114214b180eec3dbe6f5
+  languageName: node
+  linkType: hard
+
 "tsutils@npm:^3.21.0":
   version: 3.21.0
   resolution: "tsutils@npm:3.21.0"