From 1719ed4ed17a4eddc3d9ff493e6b8f5dd0bbda51 Mon Sep 17 00:00:00 2001
From: Bharat Kashyap <bharatkashyap@outlook.com>
Date: Tue, 15 Oct 2024 15:35:51 +0530
Subject: [PATCH] [docs] Improve Toolpad Core docs (#43796)

---
 .../app-bar/DashboardLayoutBasic.js           |   2 +-
 .../app-bar/DashboardLayoutBasic.tsx          |   2 +-
 .../material/components/app-bar/app-bar.md    |   6 +-
 .../breadcrumbs/PageContainerBasic.js         |  22 +-
 .../breadcrumbs/PageContainerBasic.tsx        |  22 +-
 .../components/breadcrumbs/breadcrumbs.md     |   6 +-
 .../components/container/container.md         |   6 +-
 .../dialogs/ToolpadDialogsNoSnap.js           | 120 +++++++++++
 .../dialogs/ToolpadDialogsNoSnap.tsx          | 101 ++++++++++
 .../dialogs/ToolpadDialogsNoSnap.tsx.preview  |   3 +
 .../material/components/dialogs/dialogs.md    |  46 ++++-
 .../material/components/drawers/drawers.md    |   6 +-
 .../snackbars/ToolpadNotificationsNoSnap.js   |  43 ++++
 .../snackbars/ToolpadNotificationsNoSnap.tsx  |  43 ++++
 .../ToolpadNotificationsNoSnap.tsx.preview    |   3 +
 .../components/snackbars/snackbars.md         |   8 +-
 .../getting-started/templates/templates.md    |   4 +-
 .../home/ToolpadCoreShowcaseDemo.tsx          |   2 +-
 pnpm-lock.yaml                                | 190 +++++++++---------
 19 files changed, 479 insertions(+), 156 deletions(-)
 create mode 100644 docs/data/material/components/dialogs/ToolpadDialogsNoSnap.js
 create mode 100644 docs/data/material/components/dialogs/ToolpadDialogsNoSnap.tsx
 create mode 100644 docs/data/material/components/dialogs/ToolpadDialogsNoSnap.tsx.preview
 create mode 100644 docs/data/material/components/snackbars/ToolpadNotificationsNoSnap.js
 create mode 100644 docs/data/material/components/snackbars/ToolpadNotificationsNoSnap.tsx
 create mode 100644 docs/data/material/components/snackbars/ToolpadNotificationsNoSnap.tsx.preview

diff --git a/docs/data/material/components/app-bar/DashboardLayoutBasic.js b/docs/data/material/components/app-bar/DashboardLayoutBasic.js
index 5e999fa08b0322..2c8f565c766594 100644
--- a/docs/data/material/components/app-bar/DashboardLayoutBasic.js
+++ b/docs/data/material/components/app-bar/DashboardLayoutBasic.js
@@ -97,7 +97,7 @@ export default function DashboardLayoutBasic(props) {
   const router = useDemoRouter('/dashboard');
 
   // Remove this const when copying and pasting into your project.
-  const demoWindow = window !== undefined ? window() : undefined;
+  const demoWindow = window ? window() : undefined;
 
   return (
     <AppProvider
diff --git a/docs/data/material/components/app-bar/DashboardLayoutBasic.tsx b/docs/data/material/components/app-bar/DashboardLayoutBasic.tsx
index 4a896f77c99b51..8adbc7aa4cac4d 100644
--- a/docs/data/material/components/app-bar/DashboardLayoutBasic.tsx
+++ b/docs/data/material/components/app-bar/DashboardLayoutBasic.tsx
@@ -97,7 +97,7 @@ export default function DashboardLayoutBasic(props: any) {
   const router = useDemoRouter('/dashboard');
 
   // Remove this const when copying and pasting into your project.
-  const demoWindow = window !== undefined ? window() : undefined;
+  const demoWindow = window ? window() : undefined;
 
   return (
     <AppProvider
diff --git a/docs/data/material/components/app-bar/app-bar.md b/docs/data/material/components/app-bar/app-bar.md
index be622aedf2d67a..97b9e7845e5c22 100644
--- a/docs/data/material/components/app-bar/app-bar.md
+++ b/docs/data/material/components/app-bar/app-bar.md
@@ -154,10 +154,10 @@ You can override this behavior by setting the `enableColorOnDark` prop to `true`
 
 {{"demo": "EnableColorOnDarkAppBar.js", "bg": true}}
 
-## Experimental APIs
+## Toolpad (Beta)
 
-### DashboardLayout
+### Dashboard Layout
 
 The [DashboardLayout](https://mui.com/toolpad/core/react-dashboard-layout/) component from `@toolpad/core` is the starting point for dashboarding applications. It takes care of application layout, theming, navigation, and more. An example usage of this component:
 
-{{"demo": "DashboardLayoutBasic.js", "height": 400, "iframe": true, "hideToolbar": true}}
+{{"demo": "DashboardLayoutBasic.js", "height": 400, "iframe": true, "bg": "inline", "defaultExpanded": false}}
diff --git a/docs/data/material/components/breadcrumbs/PageContainerBasic.js b/docs/data/material/components/breadcrumbs/PageContainerBasic.js
index 28fc5af6f1abf6..693efa94bf8973 100644
--- a/docs/data/material/components/breadcrumbs/PageContainerBasic.js
+++ b/docs/data/material/components/breadcrumbs/PageContainerBasic.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { extendTheme, styled } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import DashboardIcon from '@mui/icons-material/Dashboard';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { PageContainer, PageContainerToolbar } from '@toolpad/core/PageContainer';
@@ -18,20 +18,6 @@ const NAVIGATION = [
   },
 ];
 
-const demoTheme = extendTheme({
-  colorSchemes: { light: true, dark: true },
-  colorSchemeSelector: 'class',
-  breakpoints: {
-    values: {
-      xs: 0,
-      sm: 600,
-      md: 600,
-      lg: 1200,
-      xl: 1536,
-    },
-  },
-});
-
 function useDemoRouter(initialPath) {
   const [pathname, setPathname] = React.useState(initialPath);
 
@@ -81,15 +67,15 @@ function PageToolbar() {
 export default function PageContainerBasic(props) {
   const { window } = props;
   const router = useDemoRouter('/orders');
-
+  const theme = useTheme();
   // Remove this const when copying and pasting into your project.
-  const demoWindow = window !== undefined ? window() : undefined;
+  const demoWindow = window ? window() : undefined;
 
   return (
     <AppProvider
       navigation={NAVIGATION}
       router={router}
-      theme={demoTheme}
+      theme={theme}
       window={demoWindow}
       branding={{
         title: 'ACME Inc.',
diff --git a/docs/data/material/components/breadcrumbs/PageContainerBasic.tsx b/docs/data/material/components/breadcrumbs/PageContainerBasic.tsx
index 328d3dc7b8f8cb..e59b6dfbc6e7f7 100644
--- a/docs/data/material/components/breadcrumbs/PageContainerBasic.tsx
+++ b/docs/data/material/components/breadcrumbs/PageContainerBasic.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { extendTheme, styled } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import DashboardIcon from '@mui/icons-material/Dashboard';
 import { AppProvider, Navigation, Router } from '@toolpad/core/AppProvider';
 import { PageContainer, PageContainerToolbar } from '@toolpad/core/PageContainer';
@@ -18,20 +18,6 @@ const NAVIGATION: Navigation = [
   },
 ];
 
-const demoTheme = extendTheme({
-  colorSchemes: { light: true, dark: true },
-  colorSchemeSelector: 'class',
-  breakpoints: {
-    values: {
-      xs: 0,
-      sm: 600,
-      md: 600,
-      lg: 1200,
-      xl: 1536,
-    },
-  },
-});
-
 function useDemoRouter(initialPath: string): Router {
   const [pathname, setPathname] = React.useState(initialPath);
 
@@ -81,15 +67,15 @@ function PageToolbar() {
 export default function PageContainerBasic(props: any) {
   const { window } = props;
   const router = useDemoRouter('/orders');
-
+  const theme = useTheme();
   // Remove this const when copying and pasting into your project.
-  const demoWindow = window !== undefined ? window() : undefined;
+  const demoWindow = window ? window() : undefined;
 
   return (
     <AppProvider
       navigation={NAVIGATION}
       router={router}
-      theme={demoTheme}
+      theme={theme}
       window={demoWindow}
       branding={{
         title: 'ACME Inc.',
diff --git a/docs/data/material/components/breadcrumbs/breadcrumbs.md b/docs/data/material/components/breadcrumbs/breadcrumbs.md
index dea04ba065698f..141d4ea35c8b6c 100644
--- a/docs/data/material/components/breadcrumbs/breadcrumbs.md
+++ b/docs/data/material/components/breadcrumbs/breadcrumbs.md
@@ -66,10 +66,10 @@ The accessibility of this component relies on:
 - To prevent screen reader announcement of the visual separators between links, they are hidden with `aria-hidden`.
 - A nav element labeled with `aria-label` identifies the structure as a breadcrumb trail and makes it a navigation landmark so that it is easy to locate.
 
-## Experimental APIs
+## Toolpad (Beta)
 
 ### Page Container
 
-The [PageContainer](https://mui.com/toolpad/core/react-page-container/) component in `@toolpad/core` is the ideal wrapper for the content of your dashboard. It makes the Material UI Container navigation aware and extends it with page title, breadcrumbs, actions, and more.
+The [PageContainer](https://mui.com/toolpad/core/react-page-container/) component in `@toolpad/core` is the ideal wrapper for the content of your dashboard. It makes the Material UI Container navigation-aware and extends it with page title, breadcrumbs, actions, and more.
 
-{{"demo": "./PageContainerBasic.js", "height": 400, "hideToolbar": true}}
+{{"demo": "PageContainerBasic.js", "height": 400, "bg": "inline", "defaultExpanded": false}}
diff --git a/docs/data/material/components/container/container.md b/docs/data/material/components/container/container.md
index 33fc6f267572c7..40719883633f6e 100644
--- a/docs/data/material/components/container/container.md
+++ b/docs/data/material/components/container/container.md
@@ -35,10 +35,10 @@ The max-width matches the min-width of the current breakpoint.
 <Container fixed>
 ```
 
-## Experimental APIs
+## Toolpad (Beta)
 
 ### Page Container
 
-The [PageContainer](https://mui.com/toolpad/core/react-page-container/) component in `@toolpad/core` is the ideal wrapper for the content of your dashboard. It makes the Material UI Container navigation aware and extends it with page title, breadcrumbs, actions, and more.
+The [PageContainer](https://mui.com/toolpad/core/react-page-container/) component in `@toolpad/core` is the ideal wrapper for the content of your dashboard. It makes the Material UI Container navigation-aware and extends it with page title, breadcrumbs, actions, and more.
 
-{{"demo": "../breadcrumbs/PageContainerBasic.js", "height": 400, "hideToolbar": true}}
+{{"demo": "../breadcrumbs/PageContainerBasic.js", "height": 400, "bg": "inline", "defaultExpanded": false}}
diff --git a/docs/data/material/components/dialogs/ToolpadDialogsNoSnap.js b/docs/data/material/components/dialogs/ToolpadDialogsNoSnap.js
new file mode 100644
index 00000000000000..c51820532be8de
--- /dev/null
+++ b/docs/data/material/components/dialogs/ToolpadDialogsNoSnap.js
@@ -0,0 +1,120 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { DialogsProvider, useDialogs } from '@toolpad/core/useDialogs';
+import Button from '@mui/material/Button';
+import LoadingButton from '@mui/lab/LoadingButton';
+import Dialog from '@mui/material/Dialog';
+import Alert from '@mui/material/Alert';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+
+function MyCustomDialog({ open, onClose, payload }) {
+  return (
+    <Dialog fullWidth open={open} onClose={() => onClose()}>
+      <DialogTitle>Custom Error Handler</DialogTitle>
+      <DialogContent>
+        <Alert severity="error">
+          {`An error occurred while deleting item "${payload.id}":`}
+          <pre>{payload.error}</pre>
+        </Alert>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={() => onClose()}>Close me</Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+MyCustomDialog.propTypes = {
+  /**
+   * A function to call when the dialog should be closed. If the dialog has a return
+   * value, it should be passed as an argument to this function. You should use the promise
+   * that is returned to show a loading state while the dialog is performing async actions
+   * on close.
+   * @param result The result to return from the dialog.
+   * @returns A promise that resolves when the dialog can be fully closed.
+   */
+  onClose: PropTypes.func.isRequired,
+  /**
+   * Whether the dialog is open.
+   */
+  open: PropTypes.bool.isRequired,
+  /**
+   * The payload that was passed when the dialog was opened.
+   */
+  payload: PropTypes.shape({
+    error: PropTypes.string,
+    id: PropTypes.string,
+  }).isRequired,
+};
+
+const mockApiDelete = async (id) => {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      if (!id) {
+        reject(new Error('ID is required'));
+      } else if (parseInt(id, 10) % 2 === 0) {
+        console.log('id', parseInt(id, 10));
+        resolve(true);
+      } else if (parseInt(id, 10) % 2 === 1) {
+        reject(new Error('Can not delete odd numbered elements'));
+      } else if (Number.isNaN(parseInt(id, 10))) {
+        reject(new Error('ID must be a number'));
+      } else {
+        reject(new Error('Unknown error'));
+      }
+    }, 1000);
+  });
+};
+
+function DemoContent() {
+  const dialogs = useDialogs();
+  const [isDeleting, setIsDeleting] = React.useState(false);
+
+  const handleDelete = async () => {
+    const id = await dialogs.prompt('Enter the ID to delete', {
+      okText: 'Delete',
+      cancelText: 'Cancel',
+    });
+
+    if (id) {
+      const deleteConfirmed = await dialogs.confirm(
+        `Are you sure you want to delete "${id}"?`,
+      );
+      if (deleteConfirmed) {
+        try {
+          setIsDeleting(true);
+          await mockApiDelete(id);
+          dialogs.alert('Deleted!');
+        } catch (error) {
+          const message = error instanceof Error ? error.message : 'Unknown error';
+          await dialogs.open(MyCustomDialog, { id, error: message });
+        } finally {
+          setIsDeleting(false);
+        }
+      }
+    }
+  };
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <div style={{ display: 'flex', gap: 16 }}>
+        <LoadingButton
+          variant="contained"
+          loading={isDeleting}
+          onClick={handleDelete}
+        >
+          Delete
+        </LoadingButton>
+      </div>
+    </div>
+  );
+}
+
+export default function ToolpadDialogsNoSnap() {
+  return (
+    <DialogsProvider>
+      <DemoContent />
+    </DialogsProvider>
+  );
+}
diff --git a/docs/data/material/components/dialogs/ToolpadDialogsNoSnap.tsx b/docs/data/material/components/dialogs/ToolpadDialogsNoSnap.tsx
new file mode 100644
index 00000000000000..1fd85d043d9c2f
--- /dev/null
+++ b/docs/data/material/components/dialogs/ToolpadDialogsNoSnap.tsx
@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { DialogsProvider, useDialogs, DialogProps } from '@toolpad/core/useDialogs';
+import Button from '@mui/material/Button';
+import LoadingButton from '@mui/lab/LoadingButton';
+import Dialog from '@mui/material/Dialog';
+import Alert from '@mui/material/Alert';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+
+interface DeleteError {
+  id: string | null;
+  error: string | null;
+}
+
+function MyCustomDialog({ open, onClose, payload }: DialogProps<DeleteError>) {
+  return (
+    <Dialog fullWidth open={open} onClose={() => onClose()}>
+      <DialogTitle>Custom Error Handler</DialogTitle>
+      <DialogContent>
+        <Alert severity="error">
+          {`An error occurred while deleting item "${payload.id}":`}
+          <pre>{payload.error}</pre>
+        </Alert>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={() => onClose()}>Close me</Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+const mockApiDelete = async (id: string | null) => {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      if (!id) {
+        reject(new Error('ID is required'));
+      } else if (parseInt(id, 10) % 2 === 0) {
+        console.log('id', parseInt(id, 10));
+        resolve(true);
+      } else if (parseInt(id, 10) % 2 === 1) {
+        reject(new Error('Can not delete odd numbered elements'));
+      } else if (Number.isNaN(parseInt(id, 10))) {
+        reject(new Error('ID must be a number'));
+      } else {
+        reject(new Error('Unknown error'));
+      }
+    }, 1000);
+  });
+};
+
+function DemoContent() {
+  const dialogs = useDialogs();
+  const [isDeleting, setIsDeleting] = React.useState(false);
+
+  const handleDelete = async () => {
+    const id = await dialogs.prompt('Enter the ID to delete', {
+      okText: 'Delete',
+      cancelText: 'Cancel',
+    });
+
+    if (id) {
+      const deleteConfirmed = await dialogs.confirm(
+        `Are you sure you want to delete "${id}"?`,
+      );
+      if (deleteConfirmed) {
+        try {
+          setIsDeleting(true);
+          await mockApiDelete(id);
+          dialogs.alert('Deleted!');
+        } catch (error) {
+          const message = error instanceof Error ? error.message : 'Unknown error';
+          await dialogs.open(MyCustomDialog, { id, error: message });
+        } finally {
+          setIsDeleting(false);
+        }
+      }
+    }
+  };
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <div style={{ display: 'flex', gap: 16 }}>
+        <LoadingButton
+          variant="contained"
+          loading={isDeleting}
+          onClick={handleDelete}
+        >
+          Delete
+        </LoadingButton>
+      </div>
+    </div>
+  );
+}
+
+export default function ToolpadDialogsNoSnap() {
+  return (
+    <DialogsProvider>
+      <DemoContent />
+    </DialogsProvider>
+  );
+}
diff --git a/docs/data/material/components/dialogs/ToolpadDialogsNoSnap.tsx.preview b/docs/data/material/components/dialogs/ToolpadDialogsNoSnap.tsx.preview
new file mode 100644
index 00000000000000..a552fd4edf0f98
--- /dev/null
+++ b/docs/data/material/components/dialogs/ToolpadDialogsNoSnap.tsx.preview
@@ -0,0 +1,3 @@
+<DialogsProvider>
+  <DemoContent />
+</DialogsProvider>
\ No newline at end of file
diff --git a/docs/data/material/components/dialogs/dialogs.md b/docs/data/material/components/dialogs/dialogs.md
index 7862599b674ccd..c12c0b7a4306ec 100644
--- a/docs/data/material/components/dialogs/dialogs.md
+++ b/docs/data/material/components/dialogs/dialogs.md
@@ -168,8 +168,44 @@ The package [`material-ui-confirm`](https://github.com/jonatanklosko/material-ui
 
 Follow the [Modal accessibility section](/material-ui/react-modal/#accessibility).
 
-## Experimental APIs
-
-### Imperative API
-
-You can create and manipulate dialogs imperatively with the [`useDialog`](https://mui.com/toolpad/core/react-use-dialogs/) API in `@toolpad/core`. This API provides state management for opening and closing dialogs and for passing data to the dialog and back. It allows for stacking multiple dialogs. It also provides themed alternatives for `window.alert`, `window.confirm` and `window.prompt`.
+## Toolpad (Beta)
+
+### useDialogs
+
+You can create and manipulate dialogs imperatively with the [`useDialogs()`](https://mui.com/toolpad/core/react-use-dialogs/) API in `@toolpad/core`. This hook handles
+
+- state management for opening and closing dialogs
+- passing data to dialogs and receiving results back from them
+- stacking multiple dialogs
+- themed, asynchronous versions of `window.alert()`, `window.confirm()` and `window.prompt()`
+
+The following example demonstrates some of these features:
+
+{{"demo": "ToolpadDialogsNoSnap.js", "defaultCodeOpen": false}}
+
+```tsx
+const handleDelete = async () => {
+  const id = await dialogs.prompt('Enter the ID to delete', {
+    okText: 'Delete',
+    cancelText: 'Cancel',
+  });
+
+  if (id) {
+    const deleteConfirmed = await dialogs.confirm(
+      `Are you sure you want to delete "${id}"?`,
+    );
+    if (deleteConfirmed) {
+      try {
+        setIsDeleting(true);
+        await mockApiDelete(id);
+        dialogs.alert('Deleted!');
+      } catch (error) {
+        const message = error instanceof Error ? error.message : 'Unknown error';
+        await dialogs.open(MyCustomDialog, { id, error: message });
+      } finally {
+        setIsDeleting(false);
+      }
+    }
+  }
+};
+```
diff --git a/docs/data/material/components/drawers/drawers.md b/docs/data/material/components/drawers/drawers.md
index 7abe4cdab41354..20af480e863f3d 100644
--- a/docs/data/material/components/drawers/drawers.md
+++ b/docs/data/material/components/drawers/drawers.md
@@ -136,10 +136,10 @@ Apps focused on productivity that require balance across the screen.
 
 {{"demo": "ClippedDrawer.js", "iframe": true}}
 
-## Experimental APIs
+## Toolpad (Beta)
 
-### DashboardLayout
+### Dashboard Layout
 
 The [DashboardLayout](https://mui.com/toolpad/core/react-dashboard-layout/) component from `@toolpad/core` is the starting point for dashboarding applications. It takes care of application layout, theming, navigation, and more. An example usage of this component:
 
-{{"demo": "../app-bar/DashboardLayoutBasic.js", "height": 400, "iframe": true, "hideToolbar": true}}
+{{"demo": "../app-bar/DashboardLayoutBasic.js", "height": 400, "iframe": true, "bg": "inline", "defaultExpanded": false}}
diff --git a/docs/data/material/components/snackbars/ToolpadNotificationsNoSnap.js b/docs/data/material/components/snackbars/ToolpadNotificationsNoSnap.js
new file mode 100644
index 00000000000000..fc7700914150e4
--- /dev/null
+++ b/docs/data/material/components/snackbars/ToolpadNotificationsNoSnap.js
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import {
+  useNotifications,
+  NotificationsProvider,
+} from '@toolpad/core/useNotifications';
+import Button from '@mui/material/Button';
+
+function NotifyButton() {
+  const notifications = useNotifications();
+  const [online, setOnline] = React.useState(true);
+  const prevOnline = React.useRef(online);
+  React.useEffect(() => {
+    if (prevOnline.current === online) {
+      return () => {};
+    }
+    prevOnline.current = online;
+
+    // preview-start
+    const key = online
+      ? notifications.show('You are now online', {
+          severity: 'success',
+          autoHideDuration: 3000,
+        })
+      : notifications.show('You are now offline', {
+          severity: 'error',
+        });
+
+    return () => {
+      notifications.close(key);
+    };
+    // preview-end
+  }, [notifications, online]);
+
+  return <Button onClick={() => setOnline((prev) => !prev)}>Notify</Button>;
+}
+
+export default function ToolpadNotificationsNoSnap() {
+  return (
+    <NotificationsProvider>
+      <NotifyButton />
+    </NotificationsProvider>
+  );
+}
diff --git a/docs/data/material/components/snackbars/ToolpadNotificationsNoSnap.tsx b/docs/data/material/components/snackbars/ToolpadNotificationsNoSnap.tsx
new file mode 100644
index 00000000000000..fc7700914150e4
--- /dev/null
+++ b/docs/data/material/components/snackbars/ToolpadNotificationsNoSnap.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import {
+  useNotifications,
+  NotificationsProvider,
+} from '@toolpad/core/useNotifications';
+import Button from '@mui/material/Button';
+
+function NotifyButton() {
+  const notifications = useNotifications();
+  const [online, setOnline] = React.useState(true);
+  const prevOnline = React.useRef(online);
+  React.useEffect(() => {
+    if (prevOnline.current === online) {
+      return () => {};
+    }
+    prevOnline.current = online;
+
+    // preview-start
+    const key = online
+      ? notifications.show('You are now online', {
+          severity: 'success',
+          autoHideDuration: 3000,
+        })
+      : notifications.show('You are now offline', {
+          severity: 'error',
+        });
+
+    return () => {
+      notifications.close(key);
+    };
+    // preview-end
+  }, [notifications, online]);
+
+  return <Button onClick={() => setOnline((prev) => !prev)}>Notify</Button>;
+}
+
+export default function ToolpadNotificationsNoSnap() {
+  return (
+    <NotificationsProvider>
+      <NotifyButton />
+    </NotificationsProvider>
+  );
+}
diff --git a/docs/data/material/components/snackbars/ToolpadNotificationsNoSnap.tsx.preview b/docs/data/material/components/snackbars/ToolpadNotificationsNoSnap.tsx.preview
new file mode 100644
index 00000000000000..a0bef6df003508
--- /dev/null
+++ b/docs/data/material/components/snackbars/ToolpadNotificationsNoSnap.tsx.preview
@@ -0,0 +1,3 @@
+<NotificationsProvider>
+  <NotifyButton />
+</NotificationsProvider>
\ No newline at end of file
diff --git a/docs/data/material/components/snackbars/snackbars.md b/docs/data/material/components/snackbars/snackbars.md
index 1da7dc613216f8..ce239ac4e0884a 100644
--- a/docs/data/material/components/snackbars/snackbars.md
+++ b/docs/data/material/components/snackbars/snackbars.md
@@ -141,8 +141,10 @@ The Snackbar component is composed of a root `<div>` that houses interior elemen
 </div>
 ```
 
-## Experimental APIs
+## Experimental APIs - Toolpad
 
-### Imperative API
+### useNotifications
 
-You can create and manipulate notifications imperatively with the [`useNotifications`](https://mui.com/toolpad/core/react-use-notifications/) API in `@toolpad/core`. This API provides state management for opening and closing snackbars. It also allows for queueing multiple notifications at once.
+You can create and manipulate notifications imperatively with the [`useNotifications()`](https://mui.com/toolpad/core/react-use-notifications/) API in `@toolpad/core`. This API provides state management for opening and closing snackbars. It also allows for queueing multiple notifications at once.
+
+{{"demo": "ToolpadNotificationsNoSnap.js", "defaultCodeOpen": false}}
diff --git a/docs/data/material/getting-started/templates/templates.md b/docs/data/material/getting-started/templates/templates.md
index 1a5c489e7e0133..e10309f884352a 100644
--- a/docs/data/material/getting-started/templates/templates.md
+++ b/docs/data/material/getting-started/templates/templates.md
@@ -40,6 +40,6 @@ Looking for something more? You can find complete templates and themes in the <a
 
 ## Toolpad Core (beta)
 
-[Toolpad Core](https://mui.com/toolpad/core/introduction/) is a framework designed to build dashboards and internal tools. It leverages the existing suite of components offered by Material UI and ties them together to help you create applications quickly.
+[Toolpad Core](https://mui.com/toolpad/core/introduction/) is a set of components designed to build dashboards and internal tools. It leverages the existing suite of components offered by Material UI and ties them together to help you create applications quickly.
 
-{{"demo": "../../components/app-bar/DashboardLayoutBasic.js", "height": 400, "iframe": true, "hideToolbar": true}}
+{{"demo": "../../components/app-bar/DashboardLayoutBasic.js", "height": 400, "iframe": true, "defaultExpanded": false, "bg": "inline"}}
diff --git a/docs/src/components/home/ToolpadCoreShowcaseDemo.tsx b/docs/src/components/home/ToolpadCoreShowcaseDemo.tsx
index 21c05b0e570e47..b2bec06d10d100 100644
--- a/docs/src/components/home/ToolpadCoreShowcaseDemo.tsx
+++ b/docs/src/components/home/ToolpadCoreShowcaseDemo.tsx
@@ -82,7 +82,7 @@ function DashboardLayoutBasic(props: DemoProps) {
     };
   }, [pathname]);
 
-  const demoWindow = window !== undefined ? window() : undefined;
+  const demoWindow = window ? window() : undefined;
 
   return (
     <AppProvider navigation={NAVIGATION} router={router} window={demoWindow}>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4f4724b54cfc4f..e8e06efe44ae4c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -101,7 +101,7 @@ importers:
         version: link:packages/mui-utils/build
       '@next/eslint-plugin-next':
         specifier: ^14.2.14
-        version: 14.2.14
+        version: 14.2.15
       '@octokit/rest':
         specifier: ^21.0.2
         version: 21.0.2
@@ -125,7 +125,7 @@ importers:
         version: 10.0.8
       '@types/node':
         specifier: ^20.16.10
-        version: 20.16.10
+        version: 20.16.11
       '@types/react':
         specifier: ^18.3.11
         version: 18.3.11
@@ -363,7 +363,7 @@ importers:
         version: 0.0.24(@types/react@18.3.11)(next@14.2.15(@babel/core@7.25.8)(@opentelemetry/api@1.8.0)(@playwright/test@1.47.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
       '@types/node':
         specifier: ^20.16.10
-        version: 20.16.10
+        version: 20.16.11
       '@types/react':
         specifier: ^18.3.11
         version: 18.3.11
@@ -430,7 +430,7 @@ importers:
         version: 7.25.7(@babel/core@7.25.8)
       '@pigment-css/vite-plugin':
         specifier: 0.0.24
-        version: 0.0.24(@types/react@18.3.11)(react@18.3.1)(vite@5.4.8(@types/node@20.16.10)(terser@5.29.2))
+        version: 0.0.24(@types/react@18.3.11)(react@18.3.1)(vite@5.4.8(@types/node@20.16.11)(terser@5.29.2))
       '@types/react':
         specifier: ^18.3.11
         version: 18.3.11
@@ -442,7 +442,7 @@ importers:
         version: 1.6.38
       '@vitejs/plugin-react':
         specifier: ^4.3.2
-        version: 4.3.2(vite@5.4.8(@types/node@20.16.10)(terser@5.29.2))
+        version: 4.3.2(vite@5.4.8(@types/node@20.16.11)(terser@5.29.2))
       postcss:
         specifier: ^8.4.47
         version: 8.4.47
@@ -451,13 +451,13 @@ importers:
         version: 1.0.1
       vite:
         specifier: 5.4.8
-        version: 5.4.8(@types/node@20.16.10)(terser@5.29.2)
+        version: 5.4.8(@types/node@20.16.11)(terser@5.29.2)
       vite-plugin-node-polyfills:
         specifier: 0.22.0
-        version: 0.22.0(rollup@4.21.1)(vite@5.4.8(@types/node@20.16.10)(terser@5.29.2))
+        version: 0.22.0(rollup@4.21.1)(vite@5.4.8(@types/node@20.16.11)(terser@5.29.2))
       vite-plugin-pages:
         specifier: ^0.32.3
-        version: 0.32.3(vite@5.4.8(@types/node@20.16.10)(terser@5.29.2))
+        version: 0.32.3(vite@5.4.8(@types/node@20.16.11)(terser@5.29.2))
 
   benchmark:
     dependencies:
@@ -652,7 +652,7 @@ importers:
         version: 9.7.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@toolpad/core':
         specifier: ^0.7.0
-        version: 0.7.0(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@types/react@18.3.11)(react@18.3.1))(@mui/icons-material@packages+mui-icons-material+build)(@mui/material-pigment-css@6.1.3(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@types/react@18.3.11)(react@18.3.1))(@types/react@18.3.11)(react@18.3.1))(@mui/material@packages+mui-material+build)(@types/node@20.16.10)(@types/react@18.3.11)(happy-dom@12.10.3)(jsdom@24.0.0)(next@14.2.15(@babel/core@7.25.8)(@opentelemetry/api@1.8.0)(@playwright/test@1.47.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(terser@5.29.2)(vite@5.4.8(@types/node@20.16.10)(terser@5.29.2))
+        version: 0.7.0(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@types/react@18.3.11)(react@18.3.1))(@mui/icons-material@packages+mui-icons-material+build)(@mui/material-pigment-css@6.1.3(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@types/react@18.3.11)(react@18.3.1))(@types/react@18.3.11)(react@18.3.1))(@mui/material@packages+mui-material+build)(@types/node@20.16.11)(@types/react@18.3.11)(happy-dom@12.10.3)(jsdom@24.0.0)(next@14.2.15(@babel/core@7.25.8)(@opentelemetry/api@1.8.0)(@playwright/test@1.47.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(terser@5.29.2)(vite@5.4.8(@types/node@20.16.11)(terser@5.29.2))
       autoprefixer:
         specifier: ^10.4.20
         version: 10.4.20(postcss@8.4.47)
@@ -857,7 +857,7 @@ importers:
         version: 0.2.2
       '@types/node':
         specifier: ^20.16.10
-        version: 20.16.10
+        version: 20.16.11
       '@types/prop-types':
         specifier: ^15.7.13
         version: 15.7.13
@@ -995,7 +995,7 @@ importers:
         version: 4.17.10
       '@types/node':
         specifier: ^20.16.10
-        version: 20.16.10
+        version: 20.16.11
       '@types/react':
         specifier: ^18.3.11
         version: 18.3.11
@@ -1180,7 +1180,7 @@ importers:
         version: 10.0.8
       '@types/node':
         specifier: ^20.16.10
-        version: 20.16.10
+        version: 20.16.11
       '@types/react-docgen':
         specifier: workspace:*
         version: link:../react-docgen-types
@@ -1217,7 +1217,7 @@ importers:
         version: 10.0.8
       '@types/node':
         specifier: ^20.16.10
-        version: 20.16.10
+        version: 20.16.11
       '@types/sinon':
         specifier: ^17.0.3
         version: 17.0.3
@@ -1439,7 +1439,7 @@ importers:
         version: 0.0.20
       '@types/node':
         specifier: ^20.16.10
-        version: 20.16.10
+        version: 20.16.11
       '@types/prop-types':
         specifier: ^15.7.13
         version: 15.7.13
@@ -2161,7 +2161,7 @@ importers:
         version: 10.0.8
       '@types/node':
         specifier: ^20.16.10
-        version: 20.16.10
+        version: 20.16.11
       '@types/react':
         specifier: ^18.3.11
         version: 18.3.11
@@ -2214,7 +2214,7 @@ importers:
         version: 10.0.8
       '@types/node':
         specifier: ^20.16.10
-        version: 20.16.10
+        version: 20.16.11
 
   packages/waterfall: {}
 
@@ -4472,8 +4472,8 @@ packages:
   '@next/env@14.2.15':
     resolution: {integrity: sha512-S1qaj25Wru2dUpcIZMjxeMVSwkt8BK4dmWHHiBuRstcIyOsMapqT4A4jSB6onvqeygkSSmOkyny9VVx8JIGamQ==}
 
-  '@next/eslint-plugin-next@14.2.14':
-    resolution: {integrity: sha512-kV+OsZ56xhj0rnTn6HegyTGkoa16Mxjrpk7pjWumyB2P8JVQb8S9qtkjy/ye0GnTr4JWtWG4x/2qN40lKZ3iVQ==}
+  '@next/eslint-plugin-next@14.2.15':
+    resolution: {integrity: sha512-pKU0iqKRBlFB/ocOI1Ip2CkKePZpYpnw5bEItEkuZ/Nr9FQP1+p7VDWr4VfOdff4i9bFmrOaeaU1bFEyAcxiMQ==}
 
   '@next/swc-darwin-arm64@14.2.15':
     resolution: {integrity: sha512-Rvh7KU9hOUBnZ9TJ28n2Oa7dD9cvDBKua9IKx7cfQQ0GoYUwg9ig31O2oMwH3wm+pE3IkAQ67ZobPfEgurPZIA==}
@@ -5203,14 +5203,14 @@ packages:
   '@sinonjs/fake-timers@11.2.2':
     resolution: {integrity: sha512-G2piCSxQ7oWOxwGSAyFHfPIsyeJGXYtc6mFbnFA+kRXkiEnTl8c/8jul2S329iFBnDI9HGoeWWAZvuvOkZccgw==}
 
-  '@sinonjs/fake-timers@11.3.1':
-    resolution: {integrity: sha512-EVJO7nW5M/F5Tur0Rf2z/QoMo+1Ia963RiMtapiQrEWvY0iBUvADo8Beegwjpnle5BHkyHuoxSTW3jF43H1XRA==}
+  '@sinonjs/fake-timers@13.0.2':
+    resolution: {integrity: sha512-4Bb+oqXZTSTZ1q27Izly9lv8B9dlV61CROxPiVtywwzv5SnytJqhvYe6FclHYuXml4cd1VHPo1zd5PmTeJozvA==}
 
   '@sinonjs/samsam@8.0.0':
     resolution: {integrity: sha512-Bp8KUVlLp8ibJZrnvq2foVhP0IVX2CIprMJPK0vqGqgrDa0OHVKeZyBykqskkrdxV6yKBPmGasO8LVjAKR3Gew==}
 
-  '@sinonjs/text-encoding@0.7.2':
-    resolution: {integrity: sha512-sXXKG+uL9IrKqViTtao2Ws6dy0znu9sOaP1di/jKGW1M6VssO8vlpXCQcpZ+jisQ1tTFAC5Jo/EOzFbggBagFQ==}
+  '@sinonjs/text-encoding@0.7.3':
+    resolution: {integrity: sha512-DE427ROAphMQzU4ENbliGYrBSYPXF+TtLg9S8vzeA+OF4ZKzoDdzfL8sxuMUGS/lgRhM6j1URSk9ghf7Xo1tyA==}
 
   '@slack/bolt@3.22.0':
     resolution: {integrity: sha512-iKDqGPEJDnrVwxSVlFW6OKTkijd7s4qLBeSufoBsTM0reTyfdp/5izIQVkxNfzjHi3o6qjdYbRXkYad5HBsBog==}
@@ -5232,8 +5232,8 @@ packages:
     resolution: {integrity: sha512-G+im7OP7jVqHhiNSdHgv2VVrnN5U7KY845/5EZimZkrD4ZmtV0P3BiWkgeJhPtdLuM7C7i6+M6h6Bh+S4OOalA==}
     engines: {node: '>=12.13.0', npm: '>=6.12.0'}
 
-  '@slack/types@2.13.1':
-    resolution: {integrity: sha512-YVtJCVtDcjOPKsvOedIThb7YmKNCcSoZN0mUSQqD2fc2ZyI59gOLCF4rYGfw/0C0agzFxAmb7hV5tbMGrgK0Tg==}
+  '@slack/types@2.13.0':
+    resolution: {integrity: sha512-OAQVtKYIgBVNRmgIoiTjorGPTlgfcfstU3XYYCBA+czlB9aGcKb9MQc+6Jovi4gq3S98yP/GPBZsJSI/2mHKDQ==}
     engines: {node: '>= 12.13.0', npm: '>= 6.12.0'}
 
   '@slack/web-api@6.13.0':
@@ -5547,8 +5547,8 @@ packages:
   '@types/ms@0.7.34':
     resolution: {integrity: sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==}
 
-  '@types/node@20.16.10':
-    resolution: {integrity: sha512-vQUKgWTjEIRFCvK6CyriPH3MZYiYlNy0fKiEYHWbcoWLEgs4opurGGKlebrTLqdSMIbXImH6XExNiIyNUv3WpA==}
+  '@types/node@20.16.11':
+    resolution: {integrity: sha512-y+cTCACu92FyA5fgQSAI8A1H429g7aSK2HsO7K4XYUWc4dY5IUz55JSDIYT6/VsOLfGy8vmvQYC2hfb0iF16Uw==}
 
   '@types/normalize-package-data@2.4.1':
     resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
@@ -9952,8 +9952,8 @@ packages:
       sass:
         optional: true
 
-  nise@6.0.0:
-    resolution: {integrity: sha512-K8ePqo9BFvN31HXwEtTNGzgrPpmvgciDsFz8aztFjt4LqKO/JeFD8tBOeuDiCMXrIl/m1YvfH8auSpxfaD09wg==}
+  nise@6.1.1:
+    resolution: {integrity: sha512-aMSAzLVY7LyeM60gvBS423nBmIPP+Wy7St7hsb+8/fc1HmeoHJfLO8CKse4u3BtOZvQLJghYPI2i/1WZrEj5/g==}
 
   no-case@3.0.4:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
@@ -14456,7 +14456,7 @@ snapshots:
 
   '@fast-csv/format@4.3.5':
     dependencies:
-      '@types/node': 20.16.10
+      '@types/node': 20.16.11
       lodash.escaperegexp: 4.1.2
       lodash.isboolean: 3.0.3
       lodash.isequal: 4.5.0
@@ -14465,7 +14465,7 @@ snapshots:
 
   '@fast-csv/parse@4.3.6':
     dependencies:
-      '@types/node': 20.16.10
+      '@types/node': 20.16.11
       lodash.escaperegexp: 4.1.2
       lodash.groupby: 4.6.0
       lodash.isfunction: 3.0.9
@@ -14655,14 +14655,14 @@ snapshots:
     dependencies:
       '@jest/fake-timers': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 20.16.10
+      '@types/node': 20.16.11
       jest-mock: 29.7.0
 
   '@jest/fake-timers@29.7.0':
     dependencies:
       '@jest/types': 29.6.3
       '@sinonjs/fake-timers': 10.3.0
-      '@types/node': 20.16.10
+      '@types/node': 20.16.11
       jest-message-util: 29.7.0
       jest-mock: 29.7.0
       jest-util: 29.7.0
@@ -14675,7 +14675,7 @@ snapshots:
     dependencies:
       '@types/istanbul-lib-coverage': 2.0.6
       '@types/istanbul-reports': 3.0.4
-      '@types/node': 20.16.10
+      '@types/node': 20.16.11
       '@types/yargs': 15.0.19
       chalk: 4.1.2
 
@@ -14684,7 +14684,7 @@ snapshots:
       '@jest/schemas': 29.6.3
       '@types/istanbul-lib-coverage': 2.0.6
       '@types/istanbul-reports': 3.0.4
-      '@types/node': 20.16.10
+      '@types/node': 20.16.11
       '@types/yargs': 17.0.33
       chalk: 4.1.2
 
@@ -15314,7 +15314,7 @@ snapshots:
 
   '@next/env@14.2.15': {}
 
-  '@next/eslint-plugin-next@14.2.14':
+  '@next/eslint-plugin-next@14.2.15':
     dependencies:
       glob: 10.3.10
 
@@ -15827,7 +15827,7 @@ snapshots:
       - react
       - supports-color
 
-  '@pigment-css/vite-plugin@0.0.24(@types/react@18.3.11)(react@18.3.1)(vite@5.4.8(@types/node@20.16.10)(terser@5.29.2))':
+  '@pigment-css/vite-plugin@0.0.24(@types/react@18.3.11)(react@18.3.1)(vite@5.4.8(@types/node@20.16.11)(terser@5.29.2))':
     dependencies:
       '@babel/core': 7.25.8
       '@babel/preset-typescript': 7.25.7(@babel/core@7.25.8)
@@ -15835,7 +15835,7 @@ snapshots:
       '@wyw-in-js/shared': 0.5.4
       '@wyw-in-js/transform': 0.5.4
       babel-plugin-define-var: 0.1.0
-      vite: 5.4.8(@types/node@20.16.10)(terser@5.29.2)
+      vite: 5.4.8(@types/node@20.16.11)(terser@5.29.2)
     transitivePeerDependencies:
       - '@types/react'
       - react
@@ -16350,7 +16350,7 @@ snapshots:
     dependencies:
       '@sinonjs/commons': 3.0.1
 
-  '@sinonjs/fake-timers@11.3.1':
+  '@sinonjs/fake-timers@13.0.2':
     dependencies:
       '@sinonjs/commons': 3.0.1
 
@@ -16360,14 +16360,14 @@ snapshots:
       lodash.get: 4.4.2
       type-detect: 4.1.0
 
-  '@sinonjs/text-encoding@0.7.2': {}
+  '@sinonjs/text-encoding@0.7.3': {}
 
   '@slack/bolt@3.22.0':
     dependencies:
       '@slack/logger': 4.0.0
       '@slack/oauth': 2.6.3
       '@slack/socket-mode': 1.3.6
-      '@slack/types': 2.13.1
+      '@slack/types': 2.13.0
       '@slack/web-api': 6.13.0
       '@types/express': 4.17.17
       '@types/promise.allsettled': 1.0.3
@@ -16386,18 +16386,18 @@ snapshots:
 
   '@slack/logger@3.0.0':
     dependencies:
-      '@types/node': 20.16.10
+      '@types/node': 20.16.11
 
   '@slack/logger@4.0.0':
     dependencies:
-      '@types/node': 20.16.10
+      '@types/node': 20.16.11
 
   '@slack/oauth@2.6.3':
     dependencies:
       '@slack/logger': 3.0.0
       '@slack/web-api': 6.13.0
       '@types/jsonwebtoken': 8.5.9
-      '@types/node': 20.16.10
+      '@types/node': 20.16.11
       jsonwebtoken: 9.0.0
       lodash.isstring: 4.0.1
     transitivePeerDependencies:
@@ -16407,7 +16407,7 @@ snapshots:
     dependencies:
       '@slack/logger': 3.0.0
       '@slack/web-api': 6.13.0
-      '@types/node': 20.16.10
+      '@types/node': 20.16.11
       '@types/ws': 7.4.7
       eventemitter3: 5.0.1
       finity: 0.5.4
@@ -16417,14 +16417,14 @@ snapshots:
       - debug
       - utf-8-validate
 
-  '@slack/types@2.13.1': {}
+  '@slack/types@2.13.0': {}
 
   '@slack/web-api@6.13.0':
     dependencies:
       '@slack/logger': 3.0.0
-      '@slack/types': 2.13.1
+      '@slack/types': 2.13.0
       '@types/is-stream': 1.1.0
-      '@types/node': 20.16.10
+      '@types/node': 20.16.11
       axios: 1.7.4(debug@4.3.6)
       eventemitter3: 3.1.2
       form-data: 2.5.1
@@ -16573,15 +16573,15 @@ snapshots:
       '@theme-ui/css': 0.16.2(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))
       react: 18.3.1
 
-  '@toolpad/core@0.7.0(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@types/react@18.3.11)(react@18.3.1))(@mui/icons-material@packages+mui-icons-material+build)(@mui/material-pigment-css@6.1.3(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@types/react@18.3.11)(react@18.3.1))(@types/react@18.3.11)(react@18.3.1))(@mui/material@packages+mui-material+build)(@types/node@20.16.10)(@types/react@18.3.11)(happy-dom@12.10.3)(jsdom@24.0.0)(next@14.2.15(@babel/core@7.25.8)(@opentelemetry/api@1.8.0)(@playwright/test@1.47.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(terser@5.29.2)(vite@5.4.8(@types/node@20.16.10)(terser@5.29.2))':
+  '@toolpad/core@0.7.0(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@types/react@18.3.11)(react@18.3.1))(@mui/icons-material@packages+mui-icons-material+build)(@mui/material-pigment-css@6.1.3(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@types/react@18.3.11)(react@18.3.1))(@types/react@18.3.11)(react@18.3.1))(@mui/material@packages+mui-material+build)(@types/node@20.16.11)(@types/react@18.3.11)(happy-dom@12.10.3)(jsdom@24.0.0)(next@14.2.15(@babel/core@7.25.8)(@opentelemetry/api@1.8.0)(@playwright/test@1.47.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(terser@5.29.2)(vite@5.4.8(@types/node@20.16.11)(terser@5.29.2))':
     dependencies:
       '@babel/runtime': 7.25.7
       '@mui/icons-material': link:packages/mui-icons-material/build
       '@mui/lab': 6.0.0-beta.10(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@types/react@18.3.11)(react@18.3.1))(@mui/material-pigment-css@6.1.3(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@types/react@18.3.11)(react@18.3.1))(@types/react@18.3.11)(react@18.3.1))(@mui/material@packages+mui-material+build)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/material': link:packages/mui-material/build
       '@mui/utils': 6.1.1(@types/react@18.3.11)(react@18.3.1)
-      '@toolpad/utils': 0.7.0(@types/node@20.16.10)(happy-dom@12.10.3)(jsdom@24.0.0)(react@18.3.1)(terser@5.29.2)
-      '@vitejs/plugin-react': 4.3.1(vite@5.4.8(@types/node@20.16.10)(terser@5.29.2))
+      '@toolpad/utils': 0.7.0(@types/node@20.16.11)(happy-dom@12.10.3)(jsdom@24.0.0)(react@18.3.1)(terser@5.29.2)
+      '@vitejs/plugin-react': 4.3.1(vite@5.4.8(@types/node@20.16.11)(terser@5.29.2))
       client-only: 0.0.1
       invariant: 2.2.4
       path-to-regexp: 6.3.0
@@ -16612,14 +16612,14 @@ snapshots:
       - terser
       - vite
 
-  '@toolpad/utils@0.7.0(@types/node@20.16.10)(happy-dom@12.10.3)(jsdom@24.0.0)(react@18.3.1)(terser@5.29.2)':
+  '@toolpad/utils@0.7.0(@types/node@20.16.11)(happy-dom@12.10.3)(jsdom@24.0.0)(react@18.3.1)(terser@5.29.2)':
     dependencies:
       invariant: 2.2.4
       prettier: 3.3.3
       react: 18.3.1
       react-is: 18.3.1
       title: 3.5.3
-      vitest: 2.1.1(@types/node@20.16.10)(happy-dom@12.10.3)(jsdom@24.0.0)(terser@5.29.2)
+      vitest: 2.1.1(@types/node@20.16.11)(happy-dom@12.10.3)(jsdom@24.0.0)(terser@5.29.2)
       yaml: 2.5.1
       yaml-diff-patch: 2.0.0
     transitivePeerDependencies:
@@ -16687,7 +16687,7 @@ snapshots:
   '@types/body-parser@1.19.2':
     dependencies:
       '@types/connect': 3.4.35
-      '@types/node': 20.16.10
+      '@types/node': 20.16.11
 
   '@types/chai-dom@1.11.3':
     dependencies:
@@ -16699,7 +16699,7 @@ snapshots:
 
   '@types/connect@3.4.35':
     dependencies:
-      '@types/node': 20.16.10
+      '@types/node': 20.16.11
 
   '@types/cookie@0.4.1': {}
 
@@ -16742,7 +16742,7 @@ snapshots:
 
   '@types/express-serve-static-core@4.17.35':
     dependencies:
-      '@types/node': 20.16.10
+      '@types/node': 20.16.11
       '@types/qs': 6.9.7
       '@types/range-parser': 1.2.4
       '@types/send': 0.17.1
@@ -16759,7 +16759,7 @@ snapshots:
   '@types/fs-extra@11.0.4':
     dependencies:
       '@types/jsonfile': 6.1.1
-      '@types/node': 20.16.10
+      '@types/node': 20.16.11
 
   '@types/gtag.js@0.0.20': {}
 
@@ -16774,7 +16774,7 @@ snapshots:
 
   '@types/is-stream@1.1.0':
     dependencies:
-      '@types/node': 20.16.10
+      '@types/node': 20.16.11
 
   '@types/istanbul-lib-coverage@2.0.6': {}
 
@@ -16799,11 +16799,11 @@ snapshots:
 
   '@types/jsonfile@6.1.1':
     dependencies:
-      '@types/node': 20.16.10
+      '@types/node': 20.16.11
 
   '@types/jsonwebtoken@8.5.9':
     dependencies:
-      '@types/node': 20.16.10
+      '@types/node': 20.16.11
 
   '@types/lodash.mergewith@4.6.7':
     dependencies:
@@ -16827,7 +16827,7 @@ snapshots:
 
   '@types/ms@0.7.34': {}
 
-  '@types/node@20.16.10':
+  '@types/node@20.16.11':
     dependencies:
       undici-types: 6.19.8
 
@@ -16883,13 +16883,13 @@ snapshots:
   '@types/send@0.17.1':
     dependencies:
       '@types/mime': 1.3.2
-      '@types/node': 20.16.10
+      '@types/node': 20.16.11
 
   '@types/serve-static@1.15.2':
     dependencies:
       '@types/http-errors': 2.0.1
       '@types/mime': 3.0.1
-      '@types/node': 20.16.10
+      '@types/node': 20.16.11
 
   '@types/sinon@17.0.3':
     dependencies:
@@ -16919,7 +16919,7 @@ snapshots:
 
   '@types/ws@7.4.7':
     dependencies:
-      '@types/node': 20.16.10
+      '@types/node': 20.16.11
 
   '@types/yargs-parser@21.0.3': {}
 
@@ -17014,25 +17014,25 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
-  '@vitejs/plugin-react@4.3.1(vite@5.4.8(@types/node@20.16.10)(terser@5.29.2))':
+  '@vitejs/plugin-react@4.3.1(vite@5.4.8(@types/node@20.16.11)(terser@5.29.2))':
     dependencies:
       '@babel/core': 7.25.8
       '@babel/plugin-transform-react-jsx-self': 7.25.7(@babel/core@7.25.8)
       '@babel/plugin-transform-react-jsx-source': 7.25.7(@babel/core@7.25.8)
       '@types/babel__core': 7.20.5
       react-refresh: 0.14.2
-      vite: 5.4.8(@types/node@20.16.10)(terser@5.29.2)
+      vite: 5.4.8(@types/node@20.16.11)(terser@5.29.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-react@4.3.2(vite@5.4.8(@types/node@20.16.10)(terser@5.29.2))':
+  '@vitejs/plugin-react@4.3.2(vite@5.4.8(@types/node@20.16.11)(terser@5.29.2))':
     dependencies:
       '@babel/core': 7.25.8
       '@babel/plugin-transform-react-jsx-self': 7.25.7(@babel/core@7.25.8)
       '@babel/plugin-transform-react-jsx-source': 7.25.7(@babel/core@7.25.8)
       '@types/babel__core': 7.20.5
       react-refresh: 0.14.2
-      vite: 5.4.8(@types/node@20.16.10)(terser@5.29.2)
+      vite: 5.4.8(@types/node@20.16.11)(terser@5.29.2)
     transitivePeerDependencies:
       - supports-color
 
@@ -17043,13 +17043,13 @@ snapshots:
       chai: 5.1.1
       tinyrainbow: 1.2.0
 
-  '@vitest/mocker@2.1.1(@vitest/spy@2.1.1)(vite@5.4.8(@types/node@20.16.10)(terser@5.29.2))':
+  '@vitest/mocker@2.1.1(@vitest/spy@2.1.1)(vite@5.4.8(@types/node@20.16.11)(terser@5.29.2))':
     dependencies:
       '@vitest/spy': 2.1.1
       estree-walker: 3.0.3
       magic-string: 0.30.11
     optionalDependencies:
-      vite: 5.4.8(@types/node@20.16.10)(terser@5.29.2)
+      vite: 5.4.8(@types/node@20.16.11)(terser@5.29.2)
 
   '@vitest/pretty-format@2.1.1':
     dependencies:
@@ -18108,7 +18108,7 @@ snapshots:
 
   chrome-launcher@0.15.2:
     dependencies:
-      '@types/node': 20.16.10
+      '@types/node': 20.16.11
       escape-string-regexp: 4.0.0
       is-wsl: 2.2.0
       lighthouse-logger: 1.4.2
@@ -18119,7 +18119,7 @@ snapshots:
 
   chromium-edge-launcher@1.0.0:
     dependencies:
-      '@types/node': 20.16.10
+      '@types/node': 20.16.11
       escape-string-regexp: 4.0.0
       is-wsl: 2.2.0
       lighthouse-logger: 1.4.2
@@ -19064,7 +19064,7 @@ snapshots:
     dependencies:
       '@types/cookie': 0.4.1
       '@types/cors': 2.8.12
-      '@types/node': 20.16.10
+      '@types/node': 20.16.11
       accepts: 1.3.8
       base64id: 2.0.0
       cookie: 0.4.2
@@ -20919,7 +20919,7 @@ snapshots:
       '@jest/environment': 29.7.0
       '@jest/fake-timers': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 20.16.10
+      '@types/node': 20.16.11
       jest-mock: 29.7.0
       jest-util: 29.7.0
 
@@ -20940,13 +20940,13 @@ snapshots:
   jest-mock@29.7.0:
     dependencies:
       '@jest/types': 29.6.3
-      '@types/node': 20.16.10
+      '@types/node': 20.16.11
       jest-util: 29.7.0
 
   jest-util@29.7.0:
     dependencies:
       '@jest/types': 29.6.3
-      '@types/node': 20.16.10
+      '@types/node': 20.16.11
       chalk: 4.1.2
       ci-info: 3.9.0
       graceful-fs: 4.2.11
@@ -20963,13 +20963,13 @@ snapshots:
 
   jest-worker@27.5.1:
     dependencies:
-      '@types/node': 20.16.10
+      '@types/node': 20.16.11
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
   jest-worker@29.7.0:
     dependencies:
-      '@types/node': 20.16.10
+      '@types/node': 20.16.11
       jest-util: 29.7.0
       merge-stream: 2.0.0
       supports-color: 8.1.1
@@ -22418,13 +22418,13 @@ snapshots:
       - '@babel/core'
       - babel-plugin-macros
 
-  nise@6.0.0:
+  nise@6.1.1:
     dependencies:
       '@sinonjs/commons': 3.0.1
-      '@sinonjs/fake-timers': 11.3.1
-      '@sinonjs/text-encoding': 0.7.2
+      '@sinonjs/fake-timers': 13.0.2
+      '@sinonjs/text-encoding': 0.7.3
       just-extend: 6.2.0
-      path-to-regexp: 6.3.0
+      path-to-regexp: 8.1.0
 
   no-case@3.0.4:
     dependencies:
@@ -24386,7 +24386,7 @@ snapshots:
       '@sinonjs/fake-timers': 11.2.2
       '@sinonjs/samsam': 8.0.0
       diff: 5.2.0
-      nise: 6.0.0
+      nise: 6.1.1
       supports-color: 7.2.0
 
   sirv@2.0.3:
@@ -25388,12 +25388,12 @@ snapshots:
       '@types/unist': 3.0.2
       vfile-message: 4.0.2
 
-  vite-node@2.1.1(@types/node@20.16.10)(terser@5.29.2):
+  vite-node@2.1.1(@types/node@20.16.11)(terser@5.29.2):
     dependencies:
       cac: 6.7.14
       debug: 4.3.6(supports-color@8.1.1)
       pathe: 1.1.2
-      vite: 5.4.8(@types/node@20.16.10)(terser@5.29.2)
+      vite: 5.4.8(@types/node@20.16.11)(terser@5.29.2)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -25405,15 +25405,15 @@ snapshots:
       - supports-color
       - terser
 
-  vite-plugin-node-polyfills@0.22.0(rollup@4.21.1)(vite@5.4.8(@types/node@20.16.10)(terser@5.29.2)):
+  vite-plugin-node-polyfills@0.22.0(rollup@4.21.1)(vite@5.4.8(@types/node@20.16.11)(terser@5.29.2)):
     dependencies:
       '@rollup/plugin-inject': 5.0.5(rollup@4.21.1)
       node-stdlib-browser: 1.2.0
-      vite: 5.4.8(@types/node@20.16.10)(terser@5.29.2)
+      vite: 5.4.8(@types/node@20.16.11)(terser@5.29.2)
     transitivePeerDependencies:
       - rollup
 
-  vite-plugin-pages@0.32.3(vite@5.4.8(@types/node@20.16.10)(terser@5.29.2)):
+  vite-plugin-pages@0.32.3(vite@5.4.8(@types/node@20.16.11)(terser@5.29.2)):
     dependencies:
       '@types/debug': 4.1.12
       debug: 4.3.6(supports-color@8.1.1)
@@ -25423,25 +25423,25 @@ snapshots:
       json5: 2.2.3
       local-pkg: 0.5.0
       picocolors: 1.1.0
-      vite: 5.4.8(@types/node@20.16.10)(terser@5.29.2)
+      vite: 5.4.8(@types/node@20.16.11)(terser@5.29.2)
       yaml: 2.5.1
     transitivePeerDependencies:
       - supports-color
 
-  vite@5.4.8(@types/node@20.16.10)(terser@5.29.2):
+  vite@5.4.8(@types/node@20.16.11)(terser@5.29.2):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.47
       rollup: 4.21.1
     optionalDependencies:
-      '@types/node': 20.16.10
+      '@types/node': 20.16.11
       fsevents: 2.3.3
       terser: 5.29.2
 
-  vitest@2.1.1(@types/node@20.16.10)(happy-dom@12.10.3)(jsdom@24.0.0)(terser@5.29.2):
+  vitest@2.1.1(@types/node@20.16.11)(happy-dom@12.10.3)(jsdom@24.0.0)(terser@5.29.2):
     dependencies:
       '@vitest/expect': 2.1.1
-      '@vitest/mocker': 2.1.1(@vitest/spy@2.1.1)(vite@5.4.8(@types/node@20.16.10)(terser@5.29.2))
+      '@vitest/mocker': 2.1.1(@vitest/spy@2.1.1)(vite@5.4.8(@types/node@20.16.11)(terser@5.29.2))
       '@vitest/pretty-format': 2.1.1
       '@vitest/runner': 2.1.1
       '@vitest/snapshot': 2.1.1
@@ -25456,11 +25456,11 @@ snapshots:
       tinyexec: 0.3.0
       tinypool: 1.0.0
       tinyrainbow: 1.2.0
-      vite: 5.4.8(@types/node@20.16.10)(terser@5.29.2)
-      vite-node: 2.1.1(@types/node@20.16.10)(terser@5.29.2)
+      vite: 5.4.8(@types/node@20.16.11)(terser@5.29.2)
+      vite-node: 2.1.1(@types/node@20.16.11)(terser@5.29.2)
       why-is-node-running: 2.3.0
     optionalDependencies:
-      '@types/node': 20.16.10
+      '@types/node': 20.16.11
       happy-dom: 12.10.3
       jsdom: 24.0.0
     transitivePeerDependencies: