From 3e8170dbe1094e193e3ed1ef578c415652e2c51b Mon Sep 17 00:00:00 2001
From: Quentin Le Caignec <quentin.lecaignec@smile.fr>
Date: Fri, 20 Oct 2023 09:35:58 +0200
Subject: [PATCH] fix: code review

---
 packages/react-front-kit-shared/src/theme.ts  | 11 +++-
 .../__snapshots__/Breadcrumbs.test.tsx.snap   |  2 +-
 .../CollapseButton.test.tsx.snap              |  4 +-
 .../DropdownButton.test.tsx.snap              |  2 +-
 .../Header/__snapshots__/Header.test.tsx.snap |  2 +-
 .../__snapshots__/HeaderSearch.test.tsx.snap  |  4 +-
 .../__snapshots__/Pagination.test.tsx.snap    | 14 ++---
 .../ResponsiveTabs.test.tsx.snap              | 26 +++++-----
 .../__snapshots__/SidebarMenu.test.tsx.snap   | 52 +++++++++----------
 .../FoldableColumnLayout.test.tsx.snap        |  4 +-
 .../Pages/DocumentDetails/DocumentDetails.tsx | 10 ----
 11 files changed, 65 insertions(+), 66 deletions(-)

diff --git a/packages/react-front-kit-shared/src/theme.ts b/packages/react-front-kit-shared/src/theme.ts
index 389bcef0..f6de92a3 100644
--- a/packages/react-front-kit-shared/src/theme.ts
+++ b/packages/react-front-kit-shared/src/theme.ts
@@ -2,7 +2,7 @@
 
 import type { MantineThemeOverride } from '@mantine/core';
 
-import { DEFAULT_THEME } from '@mantine/core';
+import { DEFAULT_THEME, rem } from '@mantine/core';
 
 export const baseTheme: MantineThemeOverride = {
   activeStyles: {
@@ -17,6 +17,15 @@ export const baseTheme: MantineThemeOverride = {
   },
   cursorType: 'pointer',
   defaultRadius: '1.5rem',
+  focusRingStyles: {
+    // Default orange for focus-ring on all elements and Input-based components
+    inputStyles: (theme) => ({
+      outline: `${rem(2)} solid ${theme.colors.orange[5]}`,
+    }),
+    styles: (theme) => ({
+      outline: `${rem(2)} solid ${theme.colors.orange[5]}`,
+    }),
+  },
   fontFamily: 'var(--rfk-font, Open Sans)',
   fontSizes: {
     lg: '18px',
diff --git a/packages/react-front-kit/src/Components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap b/packages/react-front-kit/src/Components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap
index 8aad7dc4..2a9bdef0 100644
--- a/packages/react-front-kit/src/Components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap
+++ b/packages/react-front-kit/src/Components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`Breadcrumbs matches snapshot 1`] = `
       test
     </a>
     <div
-      class="mantine-Text-root mantine-Breadcrumbs-separator mantine-omiwqm"
+      class="mantine-Text-root mantine-Breadcrumbs-separator mantine-j0vu4g"
     >
       <svg
         fill="none"
diff --git a/packages/react-front-kit/src/Components/CollapseButton/__snapshots__/CollapseButton.test.tsx.snap b/packages/react-front-kit/src/Components/CollapseButton/__snapshots__/CollapseButton.test.tsx.snap
index 982f652f..8008f62c 100644
--- a/packages/react-front-kit/src/Components/CollapseButton/__snapshots__/CollapseButton.test.tsx.snap
+++ b/packages/react-front-kit/src/Components/CollapseButton/__snapshots__/CollapseButton.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`CollapseButton matches snapshot 1`] = `
 <div>
   <div
     aria-expanded="false"
-    class="mantine-UnstyledButton-root mantine-Button-root mantine-jqjceh"
+    class="mantine-UnstyledButton-root mantine-Button-root mantine-1eo4e2y"
     data-button="true"
     data-testid="root"
     type="button"
@@ -25,7 +25,7 @@ exports[`CollapseButton matches snapshot 1`] = `
         class="mantine-Button-icon mantine-Button-rightIcon mantine-1ydydo3"
       >
         <button
-          class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-ov71kq"
+          class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-gj6ulq"
           data-testid="toggle"
           type="button"
         >
diff --git a/packages/react-front-kit/src/Components/DropdownButton/__snapshots__/DropdownButton.test.tsx.snap b/packages/react-front-kit/src/Components/DropdownButton/__snapshots__/DropdownButton.test.tsx.snap
index af808218..34bc8844 100644
--- a/packages/react-front-kit/src/Components/DropdownButton/__snapshots__/DropdownButton.test.tsx.snap
+++ b/packages/react-front-kit/src/Components/DropdownButton/__snapshots__/DropdownButton.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`DropdownButton matches snapshot 1`] = `
     aria-controls=":r0:-dropdown"
     aria-expanded="false"
     aria-haspopup="menu"
-    class="mantine-UnstyledButton-root mantine-Button-root mantine-yxv85n"
+    class="mantine-UnstyledButton-root mantine-Button-root mantine-s27q6v"
     data-button="true"
     data-testid="button"
     id=":r0:-target"
diff --git a/packages/react-front-kit/src/Components/Header/__snapshots__/Header.test.tsx.snap b/packages/react-front-kit/src/Components/Header/__snapshots__/Header.test.tsx.snap
index 4e63be4f..ef4200e9 100644
--- a/packages/react-front-kit/src/Components/Header/__snapshots__/Header.test.tsx.snap
+++ b/packages/react-front-kit/src/Components/Header/__snapshots__/Header.test.tsx.snap
@@ -34,7 +34,7 @@ exports[`Header matches snapshot 1`] = `
         class="mantine-1dcfulj"
       >
         <button
-          class="mantine-UnstyledButton-root mantine-Button-root mantine-103513z"
+          class="mantine-UnstyledButton-root mantine-Button-root mantine-1ckwbd"
           data-button="true"
           data-testid="search"
           type="button"
diff --git a/packages/react-front-kit/src/Components/HeaderSearch/__snapshots__/HeaderSearch.test.tsx.snap b/packages/react-front-kit/src/Components/HeaderSearch/__snapshots__/HeaderSearch.test.tsx.snap
index cf2af8bd..9caf6ea7 100644
--- a/packages/react-front-kit/src/Components/HeaderSearch/__snapshots__/HeaderSearch.test.tsx.snap
+++ b/packages/react-front-kit/src/Components/HeaderSearch/__snapshots__/HeaderSearch.test.tsx.snap
@@ -11,14 +11,14 @@ exports[`Header matches snapshot 1`] = `
       >
         <input
           aria-invalid="false"
-          class="mantine-Input-input mantine-sfetfq"
+          class="mantine-Input-input mantine-1y2d4pm"
         />
         <div
           class="mantine-ihurxy mantine-Input-rightSection"
         >
           <button
             aria-label="Clear"
-            class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-CloseButton-root mantine-1ub2lfw"
+            class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-CloseButton-root mantine-sbtbot"
             type="button"
           >
             <svg
diff --git a/packages/react-front-kit/src/Components/Pagination/__snapshots__/Pagination.test.tsx.snap b/packages/react-front-kit/src/Components/Pagination/__snapshots__/Pagination.test.tsx.snap
index 6ae64690..6b7710a9 100644
--- a/packages/react-front-kit/src/Components/Pagination/__snapshots__/Pagination.test.tsx.snap
+++ b/packages/react-front-kit/src/Components/Pagination/__snapshots__/Pagination.test.tsx.snap
@@ -29,7 +29,7 @@ exports[`Pagination matches snapshot 1`] = `
             aria-invalid="false"
             aria-label="Number of results per page"
             autocomplete="off"
-            class="mantine-Input-input mantine-Select-input mantine-1kaqzie"
+            class="mantine-Input-input mantine-Select-input mantine-1bcy86t"
             data-mantine-stop-propagation="false"
             data-testid="pagination-rowsPerPage"
             id="mantine-f4bipx4bi"
@@ -63,33 +63,33 @@ exports[`Pagination matches snapshot 1`] = `
       data-testid="pagination-page"
     >
       <button
-        class="mantine-UnstyledButton-root mantine-Pagination-control mantine-16h8s0u"
+        class="mantine-UnstyledButton-root mantine-Pagination-control mantine-n6qhx9"
         type="button"
       >
         1
       </button>
       <button
         aria-current="page"
-        class="mantine-UnstyledButton-root mantine-Pagination-control mantine-16h8s0u"
+        class="mantine-UnstyledButton-root mantine-Pagination-control mantine-n6qhx9"
         data-active="true"
         type="button"
       >
         2
       </button>
       <button
-        class="mantine-UnstyledButton-root mantine-Pagination-control mantine-16h8s0u"
+        class="mantine-UnstyledButton-root mantine-Pagination-control mantine-n6qhx9"
         type="button"
       >
         3
       </button>
       <button
-        class="mantine-UnstyledButton-root mantine-Pagination-control mantine-16h8s0u"
+        class="mantine-UnstyledButton-root mantine-Pagination-control mantine-n6qhx9"
         type="button"
       >
         4
       </button>
       <button
-        class="mantine-UnstyledButton-root mantine-Pagination-control mantine-16h8s0u"
+        class="mantine-UnstyledButton-root mantine-Pagination-control mantine-n6qhx9"
         type="button"
       >
         5
@@ -109,7 +109,7 @@ exports[`Pagination matches snapshot 1`] = `
         </svg>
       </div>
       <button
-        class="mantine-UnstyledButton-root mantine-Pagination-control mantine-16h8s0u"
+        class="mantine-UnstyledButton-root mantine-Pagination-control mantine-n6qhx9"
         type="button"
       >
         10
diff --git a/packages/react-front-kit/src/Components/ResponsiveTabs/__snapshots__/ResponsiveTabs.test.tsx.snap b/packages/react-front-kit/src/Components/ResponsiveTabs/__snapshots__/ResponsiveTabs.test.tsx.snap
index ed7a459b..84fa3780 100644
--- a/packages/react-front-kit/src/Components/ResponsiveTabs/__snapshots__/ResponsiveTabs.test.tsx.snap
+++ b/packages/react-front-kit/src/Components/ResponsiveTabs/__snapshots__/ResponsiveTabs.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
     >
       <button
         aria-selected="false"
-        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1d12h3a"
+        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-9ec9of"
         role="tab"
         tabindex="0"
         type="button"
@@ -26,7 +26,7 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
       </button>
       <button
         aria-selected="false"
-        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1d12h3a"
+        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-9ec9of"
         data-testid="test-tab"
         role="tab"
         tabindex="0"
@@ -40,7 +40,7 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
       </button>
       <button
         aria-selected="false"
-        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1d12h3a"
+        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-9ec9of"
         role="tab"
         tabindex="0"
         type="button"
@@ -53,7 +53,7 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
       </button>
       <button
         aria-selected="false"
-        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1d12h3a"
+        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-9ec9of"
         role="tab"
         tabindex="0"
         type="button"
@@ -66,7 +66,7 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
       </button>
       <button
         aria-selected="false"
-        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1d12h3a"
+        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-9ec9of"
         role="tab"
         tabindex="0"
         type="button"
@@ -79,7 +79,7 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
       </button>
       <button
         aria-selected="false"
-        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1d12h3a"
+        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-9ec9of"
         role="tab"
         tabindex="0"
         type="button"
@@ -101,7 +101,7 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
         aria-expanded="false"
         aria-haspopup="menu"
         aria-label="Overflow Button"
-        class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-1i00min"
+        class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-hmmmt0"
         id="responsive-tabs-overflow-button-target"
         type="button"
       >
@@ -139,7 +139,7 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
           >
             <button
               aria-selected="false"
-              class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1d12h3a"
+              class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-9ec9of"
               id="responsive-tabs-tab-1"
               role="tab"
               tabindex="0"
@@ -153,7 +153,7 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
             </button>
             <button
               aria-selected="false"
-              class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1d12h3a"
+              class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-9ec9of"
               data-testid="test-tab"
               id="responsive-tabs-tab-2"
               role="tab"
@@ -168,7 +168,7 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
             </button>
             <button
               aria-selected="false"
-              class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1d12h3a"
+              class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-9ec9of"
               id="responsive-tabs-tab-3"
               role="tab"
               tabindex="0"
@@ -182,7 +182,7 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
             </button>
             <button
               aria-selected="false"
-              class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1d12h3a"
+              class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-9ec9of"
               id="responsive-tabs-tab-4"
               role="tab"
               tabindex="0"
@@ -196,7 +196,7 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
             </button>
             <button
               aria-selected="false"
-              class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1d12h3a"
+              class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-9ec9of"
               id="responsive-tabs-tab-5"
               role="tab"
               tabindex="0"
@@ -210,7 +210,7 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
             </button>
             <button
               aria-selected="false"
-              class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1d12h3a"
+              class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-9ec9of"
               id="responsive-tabs-tab-6"
               role="tab"
               tabindex="0"
diff --git a/packages/react-front-kit/src/Components/SidebarMenu/__snapshots__/SidebarMenu.test.tsx.snap b/packages/react-front-kit/src/Components/SidebarMenu/__snapshots__/SidebarMenu.test.tsx.snap
index fc9c5cac..e017f72a 100644
--- a/packages/react-front-kit/src/Components/SidebarMenu/__snapshots__/SidebarMenu.test.tsx.snap
+++ b/packages/react-front-kit/src/Components/SidebarMenu/__snapshots__/SidebarMenu.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`Header matches snapshot 1`] = `
   >
     <div
       aria-expanded="false"
-      class="mantine-UnstyledButton-root mantine-Button-root mantine-q2kgt7"
+      class="mantine-UnstyledButton-root mantine-Button-root mantine-11gubhm"
       data-button="true"
       data-selected="false"
       data-testid="root"
@@ -20,7 +20,7 @@ exports[`Header matches snapshot 1`] = `
           class="mantine-Button-icon mantine-Button-leftIcon mantine-1jbrfp"
         >
           <div
-            class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-ytdhdl"
+            class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-1oyh8s0"
           >
             <svg
               fill="currentColor"
@@ -50,7 +50,7 @@ exports[`Header matches snapshot 1`] = `
           class="mantine-Button-icon mantine-Button-rightIcon mantine-1ydydo3"
         >
           <button
-            class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-ov71kq"
+            class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-gj6ulq"
             data-testid="toggle"
             type="button"
           >
@@ -80,7 +80,7 @@ exports[`Header matches snapshot 1`] = `
       >
         <div
           aria-expanded="false"
-          class="mantine-UnstyledButton-root mantine-Button-root mantine-1wyrseg"
+          class="mantine-UnstyledButton-root mantine-Button-root mantine-2t623x"
           data-button="true"
           data-selected="false"
           data-testid="root"
@@ -106,7 +106,7 @@ exports[`Header matches snapshot 1`] = `
     </div>
     <div
       aria-expanded="false"
-      class="mantine-UnstyledButton-root mantine-Button-root mantine-q2kgt7"
+      class="mantine-UnstyledButton-root mantine-Button-root mantine-11gubhm"
       data-button="true"
       data-selected="false"
       data-testid="root"
@@ -119,7 +119,7 @@ exports[`Header matches snapshot 1`] = `
           class="mantine-Button-icon mantine-Button-leftIcon mantine-1jbrfp"
         >
           <div
-            class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-ytdhdl"
+            class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-1oyh8s0"
           >
             <svg
               fill="currentColor"
@@ -149,7 +149,7 @@ exports[`Header matches snapshot 1`] = `
           class="mantine-Button-icon mantine-Button-rightIcon mantine-1ydydo3"
         >
           <button
-            class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-ov71kq"
+            class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-gj6ulq"
             data-testid="toggle"
             type="button"
           >
@@ -179,7 +179,7 @@ exports[`Header matches snapshot 1`] = `
       >
         <div
           aria-expanded="false"
-          class="mantine-UnstyledButton-root mantine-Button-root mantine-1wyrseg"
+          class="mantine-UnstyledButton-root mantine-Button-root mantine-2t623x"
           data-button="true"
           data-selected="false"
           data-testid="root"
@@ -205,7 +205,7 @@ exports[`Header matches snapshot 1`] = `
     </div>
     <div
       aria-expanded="false"
-      class="mantine-UnstyledButton-root mantine-Button-root mantine-q2kgt7"
+      class="mantine-UnstyledButton-root mantine-Button-root mantine-11gubhm"
       data-button="true"
       data-selected="false"
       data-testid="root"
@@ -218,7 +218,7 @@ exports[`Header matches snapshot 1`] = `
           class="mantine-Button-icon mantine-Button-leftIcon mantine-1jbrfp"
         >
           <div
-            class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-ytdhdl"
+            class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-1oyh8s0"
           >
             <svg
               fill="currentColor"
@@ -248,7 +248,7 @@ exports[`Header matches snapshot 1`] = `
           class="mantine-Button-icon mantine-Button-rightIcon mantine-1ydydo3"
         >
           <button
-            class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-ov71kq"
+            class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-gj6ulq"
             data-testid="toggle"
             type="button"
           >
@@ -278,7 +278,7 @@ exports[`Header matches snapshot 1`] = `
       >
         <div
           aria-expanded="false"
-          class="mantine-UnstyledButton-root mantine-Button-root mantine-1wyrseg"
+          class="mantine-UnstyledButton-root mantine-Button-root mantine-2t623x"
           data-button="true"
           data-selected="false"
           data-testid="root"
@@ -302,7 +302,7 @@ exports[`Header matches snapshot 1`] = `
         </div>
         <div
           aria-expanded="false"
-          class="mantine-UnstyledButton-root mantine-Button-root mantine-ay44ke"
+          class="mantine-UnstyledButton-root mantine-Button-root mantine-1bv8mw8"
           data-button="true"
           data-selected="false"
           data-testid="root"
@@ -326,7 +326,7 @@ exports[`Header matches snapshot 1`] = `
               class="mantine-Button-icon mantine-Button-rightIcon mantine-1ydydo3"
             >
               <button
-                class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-ov71kq"
+                class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-gj6ulq"
                 data-testid="toggle"
                 type="button"
               >
@@ -356,7 +356,7 @@ exports[`Header matches snapshot 1`] = `
           >
             <div
               aria-expanded="false"
-              class="mantine-UnstyledButton-root mantine-Button-root mantine-10gkoy7"
+              class="mantine-UnstyledButton-root mantine-Button-root mantine-8oefeo"
               data-button="true"
               data-selected="false"
               data-testid="root"
@@ -382,7 +382,7 @@ exports[`Header matches snapshot 1`] = `
         </div>
         <div
           aria-expanded="false"
-          class="mantine-UnstyledButton-root mantine-Button-root mantine-1wyrseg"
+          class="mantine-UnstyledButton-root mantine-Button-root mantine-2t623x"
           data-button="true"
           data-selected="false"
           data-testid="root"
@@ -408,7 +408,7 @@ exports[`Header matches snapshot 1`] = `
     </div>
     <div
       aria-expanded="false"
-      class="mantine-UnstyledButton-root mantine-Button-root mantine-1y9qs59"
+      class="mantine-UnstyledButton-root mantine-Button-root mantine-1rkmdf2"
       data-button="true"
       data-selected="false"
       data-testid="root"
@@ -421,7 +421,7 @@ exports[`Header matches snapshot 1`] = `
           class="mantine-Button-icon mantine-Button-leftIcon mantine-1jbrfp"
         >
           <div
-            class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-ytdhdl"
+            class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-1oyh8s0"
           >
             <svg
               fill="currentColor"
@@ -451,7 +451,7 @@ exports[`Header matches snapshot 1`] = `
     </div>
     <div
       aria-expanded="false"
-      class="mantine-UnstyledButton-root mantine-Button-root mantine-q2kgt7"
+      class="mantine-UnstyledButton-root mantine-Button-root mantine-11gubhm"
       data-button="true"
       data-selected="false"
       data-testid="root"
@@ -464,7 +464,7 @@ exports[`Header matches snapshot 1`] = `
           class="mantine-Button-icon mantine-Button-leftIcon mantine-1jbrfp"
         >
           <div
-            class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-ytdhdl"
+            class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-1oyh8s0"
           >
             <svg
               fill="currentColor"
@@ -494,7 +494,7 @@ exports[`Header matches snapshot 1`] = `
           class="mantine-Button-icon mantine-Button-rightIcon mantine-1ydydo3"
         >
           <button
-            class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-ov71kq"
+            class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-gj6ulq"
             data-testid="toggle"
             type="button"
           >
@@ -524,7 +524,7 @@ exports[`Header matches snapshot 1`] = `
       >
         <div
           aria-expanded="false"
-          class="mantine-UnstyledButton-root mantine-Button-root mantine-ay44ke"
+          class="mantine-UnstyledButton-root mantine-Button-root mantine-1bv8mw8"
           data-button="true"
           data-selected="false"
           data-testid="root"
@@ -548,7 +548,7 @@ exports[`Header matches snapshot 1`] = `
               class="mantine-Button-icon mantine-Button-rightIcon mantine-1ydydo3"
             >
               <button
-                class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-ov71kq"
+                class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-gj6ulq"
                 data-testid="toggle"
                 type="button"
               >
@@ -578,7 +578,7 @@ exports[`Header matches snapshot 1`] = `
           >
             <div
               aria-expanded="false"
-              class="mantine-UnstyledButton-root mantine-Button-root mantine-10gkoy7"
+              class="mantine-UnstyledButton-root mantine-Button-root mantine-8oefeo"
               data-button="true"
               data-selected="false"
               data-testid="root"
@@ -602,7 +602,7 @@ exports[`Header matches snapshot 1`] = `
             </div>
             <div
               aria-expanded="false"
-              class="mantine-UnstyledButton-root mantine-Button-root mantine-10gkoy7"
+              class="mantine-UnstyledButton-root mantine-Button-root mantine-8oefeo"
               data-button="true"
               data-selected="false"
               data-testid="root"
@@ -628,7 +628,7 @@ exports[`Header matches snapshot 1`] = `
         </div>
         <div
           aria-expanded="false"
-          class="mantine-UnstyledButton-root mantine-Button-root mantine-1wyrseg"
+          class="mantine-UnstyledButton-root mantine-Button-root mantine-2t623x"
           data-button="true"
           data-selected="false"
           data-testid="root"
diff --git a/packages/react-front-kit/src/Layouts/FoldableColumnLayout/__snapshots__/FoldableColumnLayout.test.tsx.snap b/packages/react-front-kit/src/Layouts/FoldableColumnLayout/__snapshots__/FoldableColumnLayout.test.tsx.snap
index eec1d4ed..9d9be0ea 100644
--- a/packages/react-front-kit/src/Layouts/FoldableColumnLayout/__snapshots__/FoldableColumnLayout.test.tsx.snap
+++ b/packages/react-front-kit/src/Layouts/FoldableColumnLayout/__snapshots__/FoldableColumnLayout.test.tsx.snap
@@ -33,7 +33,7 @@ exports[`FoldableColumnLayout matches snapshot 1`] = `
                     type="checkbox"
                   />
                   <label
-                    class="mantine-sxw4ip mantine-Switch-track"
+                    class="mantine-1i8ydp7 mantine-Switch-track"
                     for="sidebar-toggle"
                   >
                     <div
@@ -51,7 +51,7 @@ exports[`FoldableColumnLayout matches snapshot 1`] = `
                       for="sidebar-toggle"
                     >
                       <div
-                        class="mantine-Text-root mantine-awczux"
+                        class="mantine-Text-root mantine-1o8aepr"
                       >
                         Display sidebar
                       </div>
diff --git a/packages/react-front-kit/src/Pages/DocumentDetails/DocumentDetails.tsx b/packages/react-front-kit/src/Pages/DocumentDetails/DocumentDetails.tsx
index e014fad2..6421590a 100644
--- a/packages/react-front-kit/src/Pages/DocumentDetails/DocumentDetails.tsx
+++ b/packages/react-front-kit/src/Pages/DocumentDetails/DocumentDetails.tsx
@@ -14,7 +14,6 @@ import {
   Menu,
   Space,
   Tabs,
-  rem,
 } from '@mantine/core';
 import { createStyles } from '@mantine/styles';
 import { CaretLeft, Plus, Star } from '@phosphor-icons/react';
@@ -34,15 +33,6 @@ import {
 
 const theme = primaryTheme;
 theme.colorScheme = 'dark';
-theme.focusRingStyles = {
-  // Default orange for focus-ring on all elements and Input-based components
-  inputStyles: (theme) => ({
-    outline: `${rem(2)} solid ${theme.colors.orange[5]}`,
-  }),
-  styles: (theme) => ({
-    outline: `${rem(2)} solid ${theme.colors.orange[5]}`,
-  }),
-};
 
 const useStyles = createStyles((theme) => ({
   actionIcons: {