diff --git a/documentation/docs/guides-concepts/authentication/auth-pages/mui.tsx b/documentation/docs/guides-concepts/authentication/auth-pages/mui.tsx
index 709aee60bd72..7c9874119a50 100644
--- a/documentation/docs/guides-concepts/authentication/auth-pages/mui.tsx
+++ b/documentation/docs/guides-concepts/authentication/auth-pages/mui.tsx
@@ -18,6 +18,7 @@ export function MaterialUIAuth() {
         "@emotion/styled": "^11.8.1",
         "@mui/lab": "^5.0.0-alpha.85",
         "@mui/material": "^5.14.2",
+        "@mui/system": "latest",
         "@mui/x-data-grid": "^6.6.0",
       }}
       startRoute="/login"
diff --git a/documentation/docs/guides-concepts/forms/server-side-validation-mui.tsx b/documentation/docs/guides-concepts/forms/server-side-validation-mui.tsx
index f0d47253fca0..8579037ea7f8 100644
--- a/documentation/docs/guides-concepts/forms/server-side-validation-mui.tsx
+++ b/documentation/docs/guides-concepts/forms/server-side-validation-mui.tsx
@@ -16,6 +16,7 @@ export default function ServerSideValidationMui() {
         "@emotion/styled": "^11.8.1",
         "@mui/lab": "^5.0.0-alpha.85",
         "@mui/material": "^5.14.2",
+        "@mui/system": "latest",
         "@mui/x-data-grid": "^6.6.0",
         "react-router-dom": "latest",
         "react-router": "latest",
diff --git a/documentation/docs/guides-concepts/general-concepts/auth-pages/mui.tsx b/documentation/docs/guides-concepts/general-concepts/auth-pages/mui.tsx
index 709aee60bd72..7c9874119a50 100644
--- a/documentation/docs/guides-concepts/general-concepts/auth-pages/mui.tsx
+++ b/documentation/docs/guides-concepts/general-concepts/auth-pages/mui.tsx
@@ -18,6 +18,7 @@ export function MaterialUIAuth() {
         "@emotion/styled": "^11.8.1",
         "@mui/lab": "^5.0.0-alpha.85",
         "@mui/material": "^5.14.2",
+        "@mui/system": "latest",
         "@mui/x-data-grid": "^6.6.0",
       }}
       startRoute="/login"
diff --git a/documentation/docs/guides-concepts/general-concepts/layout/mui.tsx b/documentation/docs/guides-concepts/general-concepts/layout/mui.tsx
index b38b4c26c6c4..af369678799f 100644
--- a/documentation/docs/guides-concepts/general-concepts/layout/mui.tsx
+++ b/documentation/docs/guides-concepts/general-concepts/layout/mui.tsx
@@ -19,6 +19,7 @@ export function MaterialUILayout() {
         "@emotion/styled": "^11.8.1",
         "@mui/lab": "^5.0.0-alpha.85",
         "@mui/material": "^5.14.2",
+        "@mui/system": "latest",
         "@mui/x-data-grid": "^6.6.0",
       }}
       startRoute="/my-products"
diff --git a/documentation/docs/guides-concepts/notifications/notifications-mantine.tsx b/documentation/docs/guides-concepts/notifications/notifications-mantine.tsx
index 3bc68f7afc2c..f92f448b637e 100644
--- a/documentation/docs/guides-concepts/notifications/notifications-mantine.tsx
+++ b/documentation/docs/guides-concepts/notifications/notifications-mantine.tsx
@@ -1,7 +1,7 @@
 import { Sandpack } from "@site/src/components/sandpack";
 import React from "react";
 
-export default function NotificationMui() {
+export default function NotificationMantine() {
   return (
     <Sandpack
       height={460}
diff --git a/documentation/docs/guides-concepts/notifications/notifications-mui.tsx b/documentation/docs/guides-concepts/notifications/notifications-mui.tsx
index f3b0f23faedc..8205c407f419 100644
--- a/documentation/docs/guides-concepts/notifications/notifications-mui.tsx
+++ b/documentation/docs/guides-concepts/notifications/notifications-mui.tsx
@@ -13,6 +13,7 @@ export default function NotificationMui() {
         "@emotion/styled": "^11.8.1",
         "@mui/lab": "^5.0.0-alpha.85",
         "@mui/material": "^5.14.2",
+        "@mui/system": "latest",
         "@refinedev/mui": "latest",
       }}
       startRoute="/"
diff --git a/documentation/docs/guides-concepts/tables/example/chakra-ui.tsx b/documentation/docs/guides-concepts/tables/example/chakra-ui.tsx
index 73317c6265ef..8c0ba4e1aebf 100644
--- a/documentation/docs/guides-concepts/tables/example/chakra-ui.tsx
+++ b/documentation/docs/guides-concepts/tables/example/chakra-ui.tsx
@@ -1,7 +1,7 @@
 import { Sandpack } from "@site/src/components/sandpack";
 import React from "react";
 
-export default function BaseCoreTable() {
+export default function BaseChakraUITable() {
   return (
     <Sandpack
       dependencies={{
diff --git a/documentation/docs/guides-concepts/tables/example/mantine.tsx b/documentation/docs/guides-concepts/tables/example/mantine.tsx
index 6bf1a8332f2c..5826151f7a57 100644
--- a/documentation/docs/guides-concepts/tables/example/mantine.tsx
+++ b/documentation/docs/guides-concepts/tables/example/mantine.tsx
@@ -1,7 +1,7 @@
 import { Sandpack } from "@site/src/components/sandpack";
 import React from "react";
 
-export default function BaseCoreTable() {
+export default function BaseMantineTable() {
   return (
     <Sandpack
       dependencies={{
diff --git a/documentation/docs/guides-concepts/tables/example/material-ui.tsx b/documentation/docs/guides-concepts/tables/example/material-ui.tsx
index c3992af5cae0..3daeeed0f82c 100644
--- a/documentation/docs/guides-concepts/tables/example/material-ui.tsx
+++ b/documentation/docs/guides-concepts/tables/example/material-ui.tsx
@@ -10,6 +10,7 @@ export default function BaseMaterialUI() {
         "@refinedev/mui": "latest",
         "@mui/x-data-grid": "latest",
         "@mui/material": "latest",
+        "@mui/system": "latest",
       }}
       startRoute="/"
       files={{
diff --git a/documentation/docs/guides-concepts/tables/example/search-material-ui.tsx b/documentation/docs/guides-concepts/tables/example/search-material-ui.tsx
index cd40f8e33848..db0da3c20ae3 100644
--- a/documentation/docs/guides-concepts/tables/example/search-material-ui.tsx
+++ b/documentation/docs/guides-concepts/tables/example/search-material-ui.tsx
@@ -10,6 +10,7 @@ export default function BaseCoreTable() {
         "@refinedev/mui": "latest",
         "@mui/x-data-grid": "latest",
         "@mui/material": "latest",
+        "@mui/system": "latest",
       }}
       startRoute="/"
       files={{
diff --git a/documentation/docs/guides-concepts/tables/index.md b/documentation/docs/guides-concepts/tables/index.md
index 56f8e999f983..a37b02058c3c 100644
--- a/documentation/docs/guides-concepts/tables/index.md
+++ b/documentation/docs/guides-concepts/tables/index.md
@@ -5,9 +5,9 @@ title: Tables
 import BaseAntdTableExample from "./example/antd.tsx";
 import BaseTanStackTable from "./example/tanstack-table";
 import BaseCoreExample from "./example/core";
-import BaseMaterialUiTable from "./example/material-ui";
+import BaseMaterialUITable from "./example/material-ui";
 import BaseMantineTable from "./example/mantine";
-import BaseChakraUi from "./example/chakra-ui";
+import BaseChakraUITable from "./example/chakra-ui";
 import SearchAntdTableExample from "./example/search-antd.tsx";
 import SearchMaterialUI from "./example/search-material-ui.tsx";
 import Relationship from "./example/relationship";
@@ -57,7 +57,7 @@ The usage of the `useTable` hooks may slightly differ between UI libraries, howe
 
 <TabItem value="material-ui" label="Material UI">
 
-<BaseMaterialUiTable />
+<BaseMaterialUITable />
 
 [Check out Material UI's `useDataGrid` reference page to learn more about the usage and see it in action.](/docs/ui-integrations/material-ui/hooks/use-data-grid)
 
@@ -73,7 +73,7 @@ The usage of the `useTable` hooks may slightly differ between UI libraries, howe
 
 <TabItem value="chakra-ui" label={(<span><span className="block">Chakra UI</span><small className="block">TanStack Table</small></span>)}>
 
-<BaseChakraUi />
+<BaseChakraUITable />
 
 [Check out TanStack Table's `useTable` reference page to learn more about the usage and see it in action.](/docs/packages/list-of-packages#installation)
 
diff --git a/documentation/docs/ui-integrations/material-ui/introduction/previews/auth-page.tsx b/documentation/docs/ui-integrations/material-ui/introduction/previews/auth-page.tsx
index e950805a9678..8ac9d1da5e63 100644
--- a/documentation/docs/ui-integrations/material-ui/introduction/previews/auth-page.tsx
+++ b/documentation/docs/ui-integrations/material-ui/introduction/previews/auth-page.tsx
@@ -17,6 +17,7 @@ export default function AuthPage() {
         "@emotion/styled": "^11.8.1",
         "@mui/lab": "^5.0.0-alpha.85",
         "@mui/material": "^5.14.2",
+        "@mui/system": "latest",
         "@mui/x-data-grid": "^6.6.0",
         "react-router-dom": "latest",
         "react-router": "latest",
diff --git a/documentation/docs/ui-integrations/material-ui/introduction/previews/basic-views.tsx b/documentation/docs/ui-integrations/material-ui/introduction/previews/basic-views.tsx
index 7b0028dca0c7..46ffec8f3799 100644
--- a/documentation/docs/ui-integrations/material-ui/introduction/previews/basic-views.tsx
+++ b/documentation/docs/ui-integrations/material-ui/introduction/previews/basic-views.tsx
@@ -16,6 +16,7 @@ export default function BasicViews() {
         "@emotion/styled": "^11.8.1",
         "@mui/lab": "^5.0.0-alpha.85",
         "@mui/material": "^5.14.2",
+        "@mui/system": "latest",
         "@mui/x-data-grid": "^6.6.0",
         "react-router-dom": "latest",
         "react-router": "latest",
diff --git a/documentation/docs/ui-integrations/material-ui/introduction/previews/example.tsx b/documentation/docs/ui-integrations/material-ui/introduction/previews/example.tsx
index 8f3c2dd09150..38908c5e65d4 100644
--- a/documentation/docs/ui-integrations/material-ui/introduction/previews/example.tsx
+++ b/documentation/docs/ui-integrations/material-ui/introduction/previews/example.tsx
@@ -16,6 +16,7 @@ export default function Example() {
         "@emotion/styled": "^11.8.1",
         "@mui/lab": "^5.0.0-alpha.85",
         "@mui/material": "^5.14.2",
+        "@mui/system": "latest",
         "@mui/x-data-grid": "^6.6.0",
         "react-router-dom": "latest",
         "react-router": "latest",
diff --git a/documentation/docs/ui-integrations/material-ui/introduction/previews/layout-next-js.tsx b/documentation/docs/ui-integrations/material-ui/introduction/previews/layout-next-js.tsx
index 1dfbc7cf8eb8..bc783a70c55d 100644
--- a/documentation/docs/ui-integrations/material-ui/introduction/previews/layout-next-js.tsx
+++ b/documentation/docs/ui-integrations/material-ui/introduction/previews/layout-next-js.tsx
@@ -16,6 +16,7 @@ export default function LayoutNextjs() {
         "@emotion/styled": "^11.8.1",
         "@mui/lab": "^5.0.0-alpha.85",
         "@mui/material": "^5.14.2",
+        "@mui/system": "latest",
         "@mui/x-data-grid": "^6.6.0",
         "@refinedev/nextjs-router": "latest",
       }}
diff --git a/documentation/docs/ui-integrations/material-ui/introduction/previews/layout-react-router-dom.tsx b/documentation/docs/ui-integrations/material-ui/introduction/previews/layout-react-router-dom.tsx
index c7270ec327e3..6a09a3850216 100644
--- a/documentation/docs/ui-integrations/material-ui/introduction/previews/layout-react-router-dom.tsx
+++ b/documentation/docs/ui-integrations/material-ui/introduction/previews/layout-react-router-dom.tsx
@@ -18,6 +18,7 @@ export default function LayoutReactRouterDom() {
         "@emotion/styled": "^11.8.1",
         "@mui/lab": "^5.0.0-alpha.85",
         "@mui/material": "^5.14.2",
+        "@mui/system": "latest",
         "@mui/x-data-grid": "^6.6.0",
         "react-router-dom": "latest",
         "react-router": "latest",
diff --git a/documentation/docs/ui-integrations/material-ui/introduction/previews/layout-remix.tsx b/documentation/docs/ui-integrations/material-ui/introduction/previews/layout-remix.tsx
index 6138c779e749..a9d1abfc083a 100644
--- a/documentation/docs/ui-integrations/material-ui/introduction/previews/layout-remix.tsx
+++ b/documentation/docs/ui-integrations/material-ui/introduction/previews/layout-remix.tsx
@@ -16,6 +16,7 @@ export default function LayoutRemix() {
         "@emotion/styled": "^11.8.1",
         "@mui/lab": "^5.0.0-alpha.85",
         "@mui/material": "^5.14.2",
+        "@mui/system": "latest",
         "@mui/x-data-grid": "^6.6.0",
         "@refinedev/remix-router": "latest",
       }}
diff --git a/documentation/docs/ui-integrations/material-ui/introduction/previews/theming.tsx b/documentation/docs/ui-integrations/material-ui/introduction/previews/theming.tsx
index 1c6fe3d133ef..d4b5eca54c2e 100644
--- a/documentation/docs/ui-integrations/material-ui/introduction/previews/theming.tsx
+++ b/documentation/docs/ui-integrations/material-ui/introduction/previews/theming.tsx
@@ -18,6 +18,7 @@ export default function Usage() {
         "@emotion/styled": "^11.8.1",
         "@mui/lab": "^5.0.0-alpha.85",
         "@mui/material": "^5.14.2",
+        "@mui/system": "latest",
         "@mui/x-data-grid": "^6.6.0",
         "react-router-dom": "latest",
         "react-router": "latest",
diff --git a/documentation/docs/ui-integrations/material-ui/introduction/previews/usage-next-js.tsx b/documentation/docs/ui-integrations/material-ui/introduction/previews/usage-next-js.tsx
index fb8275370bf9..d5ea114345d6 100644
--- a/documentation/docs/ui-integrations/material-ui/introduction/previews/usage-next-js.tsx
+++ b/documentation/docs/ui-integrations/material-ui/introduction/previews/usage-next-js.tsx
@@ -16,6 +16,7 @@ export default function UsageNextjs() {
         "@emotion/styled": "^11.8.1",
         "@mui/lab": "^5.0.0-alpha.85",
         "@mui/material": "^5.14.2",
+        "@mui/system": "latest",
         "@mui/x-data-grid": "^6.6.0",
         "react-hook-form": "^7.30.0",
         "@refinedev/nextjs-router": "latest",
diff --git a/documentation/docs/ui-integrations/material-ui/introduction/previews/usage-react-router-dom.tsx b/documentation/docs/ui-integrations/material-ui/introduction/previews/usage-react-router-dom.tsx
index 0fd83f74611e..71bcc17123ce 100644
--- a/documentation/docs/ui-integrations/material-ui/introduction/previews/usage-react-router-dom.tsx
+++ b/documentation/docs/ui-integrations/material-ui/introduction/previews/usage-react-router-dom.tsx
@@ -16,6 +16,7 @@ export default function UsageReactRouterDom() {
         "@emotion/styled": "^11.8.1",
         "@mui/lab": "^5.0.0-alpha.85",
         "@mui/material": "^5.14.2",
+        "@mui/system": "latest",
         "@mui/x-data-grid": "^6.6.0",
         "react-hook-form": "^7.30.0",
         "react-router-dom": "latest",
diff --git a/documentation/docs/ui-integrations/material-ui/introduction/previews/usage-remix.tsx b/documentation/docs/ui-integrations/material-ui/introduction/previews/usage-remix.tsx
index de0464338eb3..6dc9fcb4885a 100644
--- a/documentation/docs/ui-integrations/material-ui/introduction/previews/usage-remix.tsx
+++ b/documentation/docs/ui-integrations/material-ui/introduction/previews/usage-remix.tsx
@@ -16,6 +16,7 @@ export default function UsageRemix() {
         "@emotion/styled": "^11.8.1",
         "@mui/lab": "^5.0.0-alpha.85",
         "@mui/material": "^5.14.2",
+        "@mui/system": "latest",
         "@mui/x-data-grid": "^6.6.0",
         "react-hook-form": "^7.30.0",
         "@refinedev/remix-router": "latest",
diff --git a/documentation/tutorial/ui-libraries/intro/material-ui/react-router/sandpack.tsx b/documentation/tutorial/ui-libraries/intro/material-ui/react-router/sandpack.tsx
index d1fd0766c006..13b7b4fc1c8f 100644
--- a/documentation/tutorial/ui-libraries/intro/material-ui/react-router/sandpack.tsx
+++ b/documentation/tutorial/ui-libraries/intro/material-ui/react-router/sandpack.tsx
@@ -239,6 +239,7 @@ export const dependencies = {
   "@mui/lab": "latest",
   "@mui/material": "latest",
   "@mui/x-data-grid": "latest",
+  "@mui/system": "latest",
   "@refinedev/mui": "latest",
   "@refinedev/react-hook-form": "latest",
   "react-hook-form": "latest",
diff --git a/packages/inferencer/src/inferencers/mui/__snapshots__/index.test.tsx.snap b/packages/inferencer/src/inferencers/mui/__snapshots__/index.test.tsx.snap
index e4d8a40d4930..e68ee8f27571 100644
--- a/packages/inferencer/src/inferencers/mui/__snapshots__/index.test.tsx.snap
+++ b/packages/inferencer/src/inferencers/mui/__snapshots__/index.test.tsx.snap
@@ -10131,7 +10131,7 @@ exports[`MuiInferencer should match the snapshot 2`] = `
             </div>
           </div>
           <div
-            class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1h51icj-MuiAutocomplete-root"
+            class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-clttge-MuiAutocomplete-root"
             name="category"
           >
             <div
@@ -10210,7 +10210,7 @@ exports[`MuiInferencer should match the snapshot 2`] = `
             </div>
           </div>
           <div
-            class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1h51icj-MuiAutocomplete-root"
+            class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-clttge-MuiAutocomplete-root"
             name="user"
           >
             <div
@@ -10433,7 +10433,7 @@ exports[`MuiInferencer should match the snapshot 2`] = `
             </div>
           </div>
           <div
-            class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1h51icj-MuiAutocomplete-root"
+            class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-clttge-MuiAutocomplete-root"
             name="tags"
           >
             <div
@@ -25231,7 +25231,7 @@ exports[`MuiInferencer should match the snapshot 3`] = `
             </div>
           </div>
           <div
-            class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-1h51icj-MuiAutocomplete-root"
+            class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-clttge-MuiAutocomplete-root"
             name="category"
           >
             <div
@@ -25332,7 +25332,7 @@ exports[`MuiInferencer should match the snapshot 3`] = `
             </div>
           </div>
           <div
-            class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-1h51icj-MuiAutocomplete-root"
+            class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-clttge-MuiAutocomplete-root"
             name="user"
           >
             <div
@@ -25577,7 +25577,7 @@ exports[`MuiInferencer should match the snapshot 3`] = `
             </div>
           </div>
           <div
-            class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-1h51icj-MuiAutocomplete-root"
+            class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-clttge-MuiAutocomplete-root"
             name="tags"
           >
             <div
diff --git a/packages/inferencer/src/inferencers/mui/__tests__/__snapshots__/create.test.tsx.snap b/packages/inferencer/src/inferencers/mui/__tests__/__snapshots__/create.test.tsx.snap
index 7eaa605f26e1..19410aefa77c 100644
--- a/packages/inferencer/src/inferencers/mui/__tests__/__snapshots__/create.test.tsx.snap
+++ b/packages/inferencer/src/inferencers/mui/__tests__/__snapshots__/create.test.tsx.snap
@@ -201,7 +201,7 @@ exports[`MuiCreateInferencer should match the snapshot 1`] = `
             </div>
           </div>
           <div
-            class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1h51icj-MuiAutocomplete-root"
+            class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-clttge-MuiAutocomplete-root"
             name="category"
           >
             <div
@@ -280,7 +280,7 @@ exports[`MuiCreateInferencer should match the snapshot 1`] = `
             </div>
           </div>
           <div
-            class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1h51icj-MuiAutocomplete-root"
+            class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-clttge-MuiAutocomplete-root"
             name="user"
           >
             <div
@@ -503,7 +503,7 @@ exports[`MuiCreateInferencer should match the snapshot 1`] = `
             </div>
           </div>
           <div
-            class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1h51icj-MuiAutocomplete-root"
+            class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-clttge-MuiAutocomplete-root"
             name="tags"
           >
             <div
diff --git a/packages/inferencer/src/inferencers/mui/__tests__/__snapshots__/edit.test.tsx.snap b/packages/inferencer/src/inferencers/mui/__tests__/__snapshots__/edit.test.tsx.snap
index ebeda269b6be..5c158c2ed346 100644
--- a/packages/inferencer/src/inferencers/mui/__tests__/__snapshots__/edit.test.tsx.snap
+++ b/packages/inferencer/src/inferencers/mui/__tests__/__snapshots__/edit.test.tsx.snap
@@ -307,7 +307,7 @@ exports[`MuiEditInferencer should match the snapshot 1`] = `
             </div>
           </div>
           <div
-            class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1h51icj-MuiAutocomplete-root"
+            class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-clttge-MuiAutocomplete-root"
             name="category"
           >
             <div
@@ -386,7 +386,7 @@ exports[`MuiEditInferencer should match the snapshot 1`] = `
             </div>
           </div>
           <div
-            class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1h51icj-MuiAutocomplete-root"
+            class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-clttge-MuiAutocomplete-root"
             name="user"
           >
             <div
@@ -609,7 +609,7 @@ exports[`MuiEditInferencer should match the snapshot 1`] = `
             </div>
           </div>
           <div
-            class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1h51icj-MuiAutocomplete-root"
+            class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-clttge-MuiAutocomplete-root"
             name="tags"
           >
             <div