@iowas/toolpad 1.0.5 → 1.0.6

package/dist/core.mjs

@@ -1,4 +1,2850 @@
-export { Account, AccountPopoverFooter, AccountPopoverHeader, AccountPreview, AlertDialog, ConfirmDialog, DashboardHeader, DashboardLayout, DashboardSidebarPageItem, PageContainer, PageHeader, PageHeaderToolbar, PromptDialog, SignInButton, SignOutButton, ThemeSwitcher, ToolbarActions, useActivePage, useDialogs, useNotifications } from './chunk-ZXM3V5SD.mjs';
-export { AppProvider, AuthenticationContext, DialogsProvider, LocalizationContext, LocalizationProvider, NotificationsProvider, SessionContext, en_default as en, useLocalStorageState, useLocaleText, useStorageState, useStorageStateServer } from './chunk-LUTZBKSG.mjs';
-import './chunk-F6JD4MSY.mjs';
-import './chunk-3JWXE2JW.mjs';
+'use client';
+import * as React26 from 'react';
+import PropTypes11 from 'prop-types';
+import Popover from '@mui/material/Popover';
+import Divider from '@mui/material/Divider';
+import Stack from '@mui/material/Stack';
+import Button2 from '@mui/material/Button';
+import { styled as styled$1, useTheme, createTheme, ThemeProvider, useColorScheme } from '@mui/material/styles';
+import { styled, useTheme as useTheme$1, Button, IconButton, Snackbar, Badge, Alert, SnackbarContent, useMediaQuery } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import useSlotProps from '@mui/utils/useSlotProps';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react-is';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import TextField from '@mui/material/TextField';
+import DialogContentText from '@mui/material/DialogContentText';
+import invariant2 from 'invariant';
+import useEventCallback from '@mui/utils/useEventCallback';
+import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';
+import CssBaseline from '@mui/material/CssBaseline';
+import LogoutIcon from '@mui/icons-material/Logout';
+import Avatar from '@mui/material/Avatar';
+import Typography from '@mui/material/Typography';
+import Tooltip from '@mui/material/Tooltip';
+import IconButton2 from '@mui/material/IconButton';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import Box4 from '@mui/material/Box';
+import useMediaQuery2 from '@mui/material/useMediaQuery';
+import Drawer from '@mui/material/Drawer';
+import Toolbar2 from '@mui/material/Toolbar';
+import MuiAppBar from '@mui/material/AppBar';
+import MenuIcon from '@mui/icons-material/Menu';
+import MenuOpenIcon from '@mui/icons-material/MenuOpen';
+import DarkModeIcon from '@mui/icons-material/DarkMode';
+import LightModeIcon from '@mui/icons-material/LightMode';
+import List from '@mui/material/List';
+import ListSubheader from '@mui/material/ListSubheader';
+import { pathToRegexp } from 'path-to-regexp';
+import Collapse from '@mui/material/Collapse';
+import Grow from '@mui/material/Grow';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import Paper from '@mui/material/Paper';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import Container from '@mui/material/Container';
+import Breadcrumbs from '@mui/material/Breadcrumbs';
+import Link4 from '@mui/material/Link';
+import NextLink from 'next/link.js';
+import { usePathname, useSearchParams, useRouter } from 'next/navigation.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var NotificationsContext = React26.createContext(null);
+
+// src/toolpad-core/useNotifications/useNotifications.tsx
+var serverNotifications = {
+  show: () => {
+    throw new Error("Not supported on server side");
+  },
+  close: () => {
+    throw new Error("Not supported on server side");
+  }
+};
+function useNotifications() {
+  const context = React26.useContext(NotificationsContext);
+  if (context) {
+    return context;
+  }
+  return serverNotifications;
+}
+
+// src/toolpad-core/locales/getLocalization.ts
+var getLocalization = (translations) => {
+  return {
+    components: {
+      MuiLocalizationProvider: {
+        defaultProps: {
+          localeText: __spreadValues({}, translations)
+        }
+      }
+    }
+  };
+};
+
+// src/toolpad-core/locales/en.tsx
+var enLabels = {
+  // Account
+  accountSignInLabel: "Sign In",
+  accountSignOutLabel: "Sign Out",
+  // AccountPreview
+  accountPreviewTitle: "Account",
+  accountPreviewIconButtonLabel: "Current User",
+  // SignInPage
+  signInTitle: (brandingTitle) => brandingTitle ? `Sign in to ${brandingTitle}` : "Sign in",
+  signInSubtitle: "Welcome user, please sign in to continue",
+  signInRememberMe: "Remember Me",
+  providerSignInTitle: (provider) => `Sign in with ${provider}`,
+  // Common authentication labels
+  email: "Email",
+  password: "Password",
+  username: "Username",
+  passkey: "Passkey",
+  // Common action labels
+  save: "Save",
+  cancel: "Cancel",
+  ok: "Ok",
+  or: "Or",
+  to: "To",
+  with: "With",
+  close: "Close",
+  delete: "Delete",
+  alert: "Alert",
+  confirm: "Confirm",
+  loading: "Loading...",
+  // CRUD
+  createNewButtonLabel: "Create new",
+  reloadButtonLabel: "Reload data",
+  createLabel: "Create",
+  createSuccessMessage: "Item created successfully.",
+  createErrorMessage: "Failed to create item. Reason:",
+  editLabel: "Edit",
+  editSuccessMessage: "Item edited successfully.",
+  editErrorMessage: "Failed to edit item. Reason:",
+  deleteLabel: "Delete",
+  deleteConfirmTitle: "Delete item?",
+  deleteConfirmMessage: "Do you wish to delete this item?",
+  deleteConfirmLabel: "Delete",
+  deleteCancelLabel: "Cancel",
+  deleteSuccessMessage: "Item deleted successfully.",
+  deleteErrorMessage: "Failed to delete item. Reason:",
+  deletedItemMessage: "This item has been deleted."
+};
+var en_default = getLocalization(enLabels);
+var LocalizationContext = React26.createContext({});
+var LocalizationProvider = function LocalizationProvider2(props) {
+  var _a, _b, _c;
+  const { localeText: propsLocaleText, children } = props;
+  const theme = useTheme();
+  const themeLocaleText = (_c = (_b = (_a = theme == null ? void 0 : theme.components) == null ? void 0 : _a.MuiLocalizationProvider) == null ? void 0 : _b.defaultProps) == null ? void 0 : _c.localeText;
+  const defaultLocaleText3 = en_default.components.MuiLocalizationProvider.defaultProps.localeText;
+  const localeText = React26.useMemo(
+    () => __spreadValues(__spreadValues(__spreadValues({}, defaultLocaleText3), themeLocaleText), propsLocaleText),
+    [defaultLocaleText3, themeLocaleText, propsLocaleText]
+  );
+  return /* @__PURE__ */ jsx(LocalizationContext.Provider, { value: localeText, children });
+};
+LocalizationProvider.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes11.node,
+  /**
+   * Locale for components texts
+   */
+  localeText: PropTypes11.object
+};
+function useLocaleText() {
+  return React26.useContext(LocalizationContext);
+}
+function useNonNullableContext(context, name) {
+  const maybeContext = React26.useContext(context);
+  if (maybeContext === null || maybeContext === void 0) {
+    throw new Error(`context "${name}" was used without a Provider`);
+  }
+  return maybeContext;
+}
+var RootPropsContext = React26.createContext(null);
+var defaultLocaleText = {
+  close: "Close"
+};
+function Notification({ notificationKey, open, message, options, badge }) {
+  var _a, _b, _c;
+  const globalLocaleText = useLocaleText();
+  const localeText = __spreadValues(__spreadValues({}, defaultLocaleText), globalLocaleText);
+  const { close } = useNonNullableContext(NotificationsContext);
+  const { severity, actionText, onAction, autoHideDuration } = options;
+  const handleClose = React26.useCallback(
+    (event, reason) => {
+      if (reason === "clickaway") {
+        return;
+      }
+      close(notificationKey);
+    },
+    [notificationKey, close]
+  );
+  const action = /* @__PURE__ */ jsxs(React26.Fragment, { children: [
+    onAction ? /* @__PURE__ */ jsx(Button, { color: "inherit", size: "small", onClick: onAction, children: actionText != null ? actionText : "Action" }) : null,
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size: "small",
+        "aria-label": localeText == null ? void 0 : localeText.close,
+        title: localeText == null ? void 0 : localeText.close,
+        color: "inherit",
+        onClick: handleClose,
+        children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" })
+      }
+    )
+  ] });
+  const props = React26.useContext(RootPropsContext);
+  const SnackbarComponent = (_b = (_a = props == null ? void 0 : props.slots) == null ? void 0 : _a.snackbar) != null ? _b : Snackbar;
+  const snackbarSlotProps = useSlotProps({
+    elementType: SnackbarComponent,
+    ownerState: props,
+    externalSlotProps: (_c = props == null ? void 0 : props.slotProps) == null ? void 0 : _c.snackbar,
+    additionalProps: {
+      open,
+      autoHideDuration,
+      onClose: handleClose,
+      action
+    }
+  });
+  return /* @__PURE__ */ jsx(SnackbarComponent, __spreadProps(__spreadValues({}, snackbarSlotProps), { children: /* @__PURE__ */ jsx(Badge, { badgeContent: badge, color: "primary", sx: { width: "100%" }, children: severity ? /* @__PURE__ */ jsx(Alert, { severity, sx: { width: "100%" }, action, children: message }) : /* @__PURE__ */ jsx(SnackbarContent, { message, action }) }) }), notificationKey);
+}
+function Notifications({ state }) {
+  var _a;
+  const currentNotification = (_a = state.queue[0]) != null ? _a : null;
+  return currentNotification ? /* @__PURE__ */ jsx(
+    Notification,
+    __spreadProps(__spreadValues({}, currentNotification), {
+      badge: state.queue.length > 1 ? String(state.queue.length) : null
+    })
+  ) : null;
+}
+var nextId = 0;
+var generateId = () => {
+  const id = nextId;
+  nextId += 1;
+  return id;
+};
+function NotificationsProvider(props) {
+  const { children } = props;
+  const [state, setState] = React26.useState({ queue: [] });
+  const show = React26.useCallback((message, options = {}) => {
+    var _a;
+    const notificationKey = (_a = options.key) != null ? _a : `::toolpad-internal::notification::${generateId()}`;
+    setState((prev) => {
+      if (prev.queue.some((n) => n.notificationKey === notificationKey)) {
+        return prev;
+      }
+      return __spreadProps(__spreadValues({}, prev), {
+        queue: [...prev.queue, { message, options, notificationKey, open: true }]
+      });
+    });
+    return notificationKey;
+  }, []);
+  const close = React26.useCallback((key) => {
+    setState((prev) => __spreadProps(__spreadValues({}, prev), {
+      queue: prev.queue.filter((n) => n.notificationKey !== key)
+    }));
+  }, []);
+  const contextValue = React26.useMemo(() => ({ show, close }), [show, close]);
+  return /* @__PURE__ */ jsx(RootPropsContext.Provider, { value: props, children: /* @__PURE__ */ jsxs(NotificationsContext.Provider, { value: contextValue, children: [
+    children,
+    /* @__PURE__ */ jsx(Notifications, { state })
+  ] }) });
+}
+var DialogsContext = React26.createContext(null);
+var BrandingContext = React26.createContext(null);
+var NavigationContext = React26.createContext([]);
+var PaletteModeContext = React26.createContext({
+  paletteMode: "light",
+  setPaletteMode: () => {
+  },
+  isDualTheme: false
+});
+var RouterContext = React26.createContext(null);
+var DashboardSidebarPageItemContext = React26.createContext(null);
+var WindowContext = React26.createContext(void 0);
+var defaultLocaleText2 = {
+  alert: "Alert",
+  confirm: "Confirm",
+  cancel: "Cancel",
+  ok: "Ok"
+};
+function useDialogLoadingButton(onClose) {
+  const [loading, setLoading] = React26.useState(false);
+  const handleClick = async () => {
+    try {
+      setLoading(true);
+      await onClose();
+    } finally {
+      setLoading(false);
+    }
+  };
+  return {
+    onClick: handleClick,
+    loading
+  };
+}
+function AlertDialog({ open, payload, onClose }) {
+  var _a, _b;
+  const appWindowContext = React26.useContext(WindowContext);
+  const globalLocaleText = useLocaleText();
+  const localeText = __spreadValues(__spreadValues({}, defaultLocaleText2), globalLocaleText);
+  const okButtonProps = useDialogLoadingButton(() => onClose());
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      maxWidth: "xs",
+      fullWidth: true,
+      open,
+      onClose: () => onClose(),
+      container: appWindowContext == null ? void 0 : appWindowContext.document.body,
+      children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: (_a = payload.title) != null ? _a : localeText.alert }),
+        /* @__PURE__ */ jsx(DialogContent, { children: payload.msg }),
+        /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(Button2, __spreadProps(__spreadValues({ disabled: !open }, okButtonProps), { children: (_b = payload.okText) != null ? _b : localeText.ok })) })
+      ]
+    }
+  );
+}
+function ConfirmDialog({ open, payload, onClose }) {
+  var _a, _b, _c;
+  const appWindowContext = React26.useContext(WindowContext);
+  const globalLocaleText = useLocaleText();
+  const localeText = __spreadValues(__spreadValues({}, defaultLocaleText2), globalLocaleText);
+  const cancelButtonProps = useDialogLoadingButton(() => onClose(false));
+  const okButtonProps = useDialogLoadingButton(() => onClose(true));
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      maxWidth: "xs",
+      fullWidth: true,
+      open,
+      onClose: () => onClose(false),
+      container: appWindowContext == null ? void 0 : appWindowContext.document.body,
+      children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: (_a = payload.title) != null ? _a : localeText.confirm }),
+        /* @__PURE__ */ jsx(DialogContent, { children: payload.msg }),
+        /* @__PURE__ */ jsxs(DialogActions, { children: [
+          /* @__PURE__ */ jsx(Button2, __spreadProps(__spreadValues({ autoFocus: true, disabled: !open }, cancelButtonProps), { children: (_b = payload.cancelText) != null ? _b : localeText.cancel })),
+          /* @__PURE__ */ jsx(Button2, __spreadProps(__spreadValues({ color: payload.severity, disabled: !open }, okButtonProps), { children: (_c = payload.okText) != null ? _c : localeText.ok }))
+        ] })
+      ]
+    }
+  );
+}
+function PromptDialog({ open, payload, onClose }) {
+  var _a, _b, _c;
+  const appWindowContext = React26.useContext(WindowContext);
+  const globalLocaleText = useLocaleText();
+  const localeText = __spreadValues(__spreadValues({}, defaultLocaleText2), globalLocaleText);
+  const [input, setInput] = React26.useState("");
+  const cancelButtonProps = useDialogLoadingButton(() => onClose(null));
+  const [loading, setLoading] = React26.useState(false);
+  const name = "input";
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      maxWidth: "xs",
+      fullWidth: true,
+      open,
+      onClose: () => onClose(null),
+      PaperProps: {
+        component: "form",
+        onSubmit: async (event) => {
+          var _a2;
+          event.preventDefault();
+          try {
+            setLoading(true);
+            const formData = new FormData(event.currentTarget);
+            const value = (_a2 = formData.get(name)) != null ? _a2 : "";
+            invariant2(typeof value === "string", "Value must come from a text input");
+            await onClose(value);
+          } finally {
+            setLoading(false);
+          }
+        }
+      },
+      container: appWindowContext == null ? void 0 : appWindowContext.document.body,
+      children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: (_a = payload.title) != null ? _a : localeText.confirm }),
+        /* @__PURE__ */ jsxs(DialogContent, { children: [
+          /* @__PURE__ */ jsxs(DialogContentText, { children: [
+            payload.msg,
+            " "
+          ] }),
+          /* @__PURE__ */ jsx(
+            TextField,
+            {
+              autoFocus: true,
+              required: true,
+              margin: "dense",
+              id: "name",
+              name,
+              type: "text",
+              fullWidth: true,
+              variant: "standard",
+              value: input,
+              onChange: (event) => setInput(event.target.value)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(DialogActions, { children: [
+          /* @__PURE__ */ jsx(Button2, __spreadProps(__spreadValues({ disabled: !open }, cancelButtonProps), { children: (_b = payload.cancelText) != null ? _b : localeText.cancel })),
+          /* @__PURE__ */ jsx(Button2, { disabled: !open, loading, type: "submit", children: (_c = payload.okText) != null ? _c : localeText.ok })
+        ] })
+      ]
+    }
+  );
+}
+function useDialogs() {
+  const { open, close } = useNonNullableContext(DialogsContext);
+  const alert = useEventCallback(
+    (msg, _a = {}) => {
+      var _b = _a, { onClose } = _b, options = __objRest(_b, ["onClose"]);
+      return open(AlertDialog, __spreadProps(__spreadValues({}, options), { msg }), { onClose });
+    }
+  );
+  const confirm = useEventCallback(
+    (msg, _c = {}) => {
+      var _d = _c, { onClose } = _d, options = __objRest(_d, ["onClose"]);
+      return open(ConfirmDialog, __spreadProps(__spreadValues({}, options), { msg }), { onClose });
+    }
+  );
+  const prompt = useEventCallback(
+    (msg, _e = {}) => {
+      var _f = _e, { onClose } = _f, options = __objRest(_f, ["onClose"]);
+      return open(PromptDialog, __spreadProps(__spreadValues({}, options), { msg }), { onClose });
+    }
+  );
+  return React26.useMemo(
+    () => ({
+      alert,
+      confirm,
+      prompt,
+      open,
+      close
+    }),
+    [alert, close, confirm, open, prompt]
+  );
+}
+function DialogsProvider(props) {
+  const { children, unmountAfter = 1e3 } = props;
+  const [stack, setStack] = React26.useState([]);
+  const keyPrefix = React26.useId();
+  const nextId2 = React26.useRef(0);
+  const dialogMetadata = React26.useRef(/* @__PURE__ */ new WeakMap());
+  const requestDialog = useEventCallback(function open(Component, payload, options = {}) {
+    const { onClose = async () => {
+    } } = options;
+    let resolve;
+    const promise = new Promise((resolveImpl) => {
+      resolve = resolveImpl;
+    });
+    invariant2(resolve, "resolve not set");
+    const key = `${keyPrefix}-${nextId2.current}`;
+    nextId2.current += 1;
+    const newEntry = {
+      key,
+      open: true,
+      promise,
+      Component,
+      payload,
+      onClose,
+      resolve
+    };
+    dialogMetadata.current.set(promise, newEntry);
+    setStack((prevStack) => [...prevStack, newEntry]);
+    return promise;
+  });
+  const closeDialogUi = useEventCallback(function closeDialogUi2(dialog) {
+    setStack(
+      (prevStack) => prevStack.map((entry) => entry.promise === dialog ? __spreadProps(__spreadValues({}, entry), { open: false }) : entry)
+    );
+    setTimeout(() => {
+      setStack((prevStack) => prevStack.filter((entry) => entry.promise !== dialog));
+    }, unmountAfter);
+  });
+  const closeDialog = useEventCallback(async function closeDialog2(dialog, result) {
+    const entryToClose = dialogMetadata.current.get(dialog);
+    invariant2(entryToClose, "dialog not found");
+    try {
+      await entryToClose.onClose(result);
+    } finally {
+      entryToClose.resolve(result);
+      closeDialogUi(dialog);
+    }
+    return dialog;
+  });
+  const contextValue = React26.useMemo(
+    () => ({ open: requestDialog, close: closeDialog }),
+    [requestDialog, closeDialog]
+  );
+  return /* @__PURE__ */ jsxs(DialogsContext.Provider, { value: contextValue, children: [
+    children,
+    stack.map(({ key, open, Component, payload, promise }) => /* @__PURE__ */ jsx(
+      Component,
+      {
+        payload,
+        open,
+        onClose: async (result) => {
+          await closeDialog(promise, result);
+        }
+      },
+      key
+    ))
+  ] });
+}
+
+// src/toolpad-core/persistence/codec.tsx
+var CODEC_STRING = {
+  parse: (value) => value,
+  stringify: (value) => value
+};
+
+// src/toolpad-core/persistence/useStorageState.tsx
+var currentTabChangeListeners = /* @__PURE__ */ new Map();
+function onCurrentTabStorageChange(key, handler) {
+  let listeners = currentTabChangeListeners.get(key);
+  if (!listeners) {
+    listeners = /* @__PURE__ */ new Set();
+    currentTabChangeListeners.set(key, listeners);
+  }
+  listeners.add(handler);
+}
+function offCurrentTabStorageChange(key, handler) {
+  const listeners = currentTabChangeListeners.get(key);
+  if (!listeners) {
+    return;
+  }
+  listeners.delete(handler);
+  if (listeners.size === 0) {
+    currentTabChangeListeners.delete(key);
+  }
+}
+function emitCurrentTabStorageChange(key) {
+  const listeners = currentTabChangeListeners.get(key);
+  if (listeners) {
+    listeners.forEach((listener) => listener());
+  }
+}
+if (typeof window !== "undefined") {
+  const origSetItem = window.localStorage.setItem;
+  window.localStorage.setItem = function setItem(key, value) {
+    const result = origSetItem.call(this, key, value);
+    emitCurrentTabStorageChange(key);
+    return result;
+  };
+}
+function subscribe(area, key, callback) {
+  if (!key) {
+    return () => {
+    };
+  }
+  const storageHandler = (event) => {
+    if (event.storageArea === area && event.key === key) {
+      callback();
+    }
+  };
+  window.addEventListener("storage", storageHandler);
+  onCurrentTabStorageChange(key, callback);
+  return () => {
+    window.removeEventListener("storage", storageHandler);
+    offCurrentTabStorageChange(key, callback);
+  };
+}
+function getSnapshot(area, key) {
+  if (!key) {
+    return null;
+  }
+  try {
+    return area.getItem(key);
+  } catch (e) {
+    return null;
+  }
+}
+function setValue(area, key, value) {
+  if (!key) {
+    return;
+  }
+  try {
+    if (value === null) {
+      area.removeItem(key);
+    } else {
+      area.setItem(key, String(value));
+    }
+  } catch (e) {
+    return;
+  }
+  emitCurrentTabStorageChange(key);
+}
+var serverValue = [null, () => {
+}];
+function useStorageStateServer() {
+  return serverValue;
+}
+function encode(codec, value) {
+  return value === null ? null : codec.stringify(value);
+}
+function decode(codec, value) {
+  return value === null ? null : codec.parse(value);
+}
+var getKeyServerSnapshot = () => null;
+function useStorageState(area, key, initializer = null, options) {
+  var _a;
+  const codec = (_a = options == null ? void 0 : options.codec) != null ? _a : CODEC_STRING;
+  const [initialValue] = React26.useState(initializer);
+  const encodedInitialValue = React26.useMemo(
+    () => encode(codec, initialValue),
+    [codec, initialValue]
+  );
+  const subscribeKey = React26.useCallback(
+    (callback) => subscribe(area, key, callback),
+    [area, key]
+  );
+  const getKeySnapshot = React26.useCallback(
+    () => {
+      var _a2;
+      return (_a2 = getSnapshot(area, key)) != null ? _a2 : encodedInitialValue;
+    },
+    [area, encodedInitialValue, key]
+  );
+  const encodedStoredValue = React26.useSyncExternalStore(
+    subscribeKey,
+    getKeySnapshot,
+    getKeyServerSnapshot
+  );
+  const storedValue = React26.useMemo(
+    () => decode(codec, encodedStoredValue),
+    [codec, encodedStoredValue]
+  );
+  const setStoredValue = React26.useCallback(
+    (value) => {
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      const encodedValueToStore = encode(codec, valueToStore);
+      setValue(area, key, encodedValueToStore);
+    },
+    [area, codec, storedValue, key]
+  );
+  const [nonStoredValue, setNonStoredValue] = React26.useState(initialValue);
+  if (!key) {
+    return [nonStoredValue, setNonStoredValue];
+  }
+  return [storedValue, setStoredValue];
+}
+
+// src/toolpad-core/useLocalStorageState/useLocalStorageState.tsx
+var useLocalStorageStateBrowser = (...args) => useStorageState(window.localStorage, ...args);
+var useLocalStorageState = typeof window === "undefined" ? useStorageStateServer : useLocalStorageStateBrowser;
+var COLOR_SCHEME_STORAGE_KEY = "toolpad-color-scheme";
+var MODE_STORAGE_KEY = "toolpad-mode";
+function usePreferredMode(window2) {
+  const prefersDarkMode = useMediaQuery(
+    "(prefers-color-scheme: dark)",
+    window2 && {
+      matchMedia: window2.matchMedia
+    }
+  );
+  return prefersDarkMode ? "dark" : "light";
+}
+function isCssVarsTheme(theme) {
+  return "vars" in theme;
+}
+function LegacyThemeProvider(props) {
+  const { children, theme, window: appWindow } = props;
+  invariant2(!isCssVarsTheme(theme), "This provider only accepts legacy themes.");
+  const isDualTheme = "light" in theme || "dark" in theme;
+  const preferredMode = usePreferredMode(appWindow);
+  const [userMode, setUserMode] = useLocalStorageState(MODE_STORAGE_KEY, "system");
+  const paletteMode = !userMode || userMode === "system" ? preferredMode : userMode;
+  const dualAwareTheme = React26.useMemo(
+    () => {
+      var _a;
+      return isDualTheme ? (_a = theme[paletteMode === "dark" ? "dark" : "light"]) != null ? _a : theme[paletteMode === "dark" ? "light" : "dark"] : theme;
+    },
+    [isDualTheme, paletteMode, theme]
+  );
+  const paletteModeContextValue = React26.useMemo(
+    () => ({
+      paletteMode,
+      setPaletteMode: setUserMode,
+      isDualTheme
+    }),
+    [isDualTheme, paletteMode, setUserMode]
+  );
+  return /* @__PURE__ */ jsx(ThemeProvider, { theme: dualAwareTheme, children: /* @__PURE__ */ jsxs(PaletteModeContext.Provider, { value: paletteModeContextValue, children: [
+    /* @__PURE__ */ jsx(CssBaseline, { enableColorScheme: true }),
+    children
+  ] }) });
+}
+function CssVarsPaletteModeProvider(props) {
+  const { children, window: appWindow } = props;
+  const preferredMode = usePreferredMode(appWindow);
+  const { mode, setMode, allColorSchemes } = useColorScheme();
+  const paletteModeContextValue = React26.useMemo(() => {
+    return {
+      paletteMode: !mode || mode === "system" ? preferredMode : mode,
+      setPaletteMode: setMode,
+      isDualTheme: allColorSchemes.length > 1
+    };
+  }, [allColorSchemes, mode, preferredMode, setMode]);
+  return /* @__PURE__ */ jsx(PaletteModeContext.Provider, { value: paletteModeContextValue, children });
+}
+function CssVarsThemeProvider(props) {
+  const { children, theme, window: appWindow, nonce } = props;
+  invariant2(isCssVarsTheme(theme), "This provider only accepts CSS vars themes.");
+  return /* @__PURE__ */ jsxs(
+    ThemeProvider,
+    {
+      theme,
+      documentNode: appWindow == null ? void 0 : appWindow.document,
+      colorSchemeNode: appWindow == null ? void 0 : appWindow.document.documentElement,
+      disableNestedContext: true,
+      colorSchemeStorageKey: COLOR_SCHEME_STORAGE_KEY,
+      modeStorageKey: MODE_STORAGE_KEY,
+      children: [
+        /* @__PURE__ */ jsx(
+          InitColorSchemeScript,
+          {
+            attribute: theme.colorSchemeSelector,
+            colorSchemeStorageKey: COLOR_SCHEME_STORAGE_KEY,
+            modeStorageKey: MODE_STORAGE_KEY,
+            nonce
+          }
+        ),
+        /* @__PURE__ */ jsxs(CssVarsPaletteModeProvider, { window: appWindow, children: [
+          /* @__PURE__ */ jsx(CssBaseline, { enableColorScheme: true }),
+          children
+        ] })
+      ]
+    }
+  );
+}
+function AppThemeProvider(props) {
+  const _a = props, { children, theme } = _a, rest = __objRest(_a, ["children", "theme"]);
+  const useCssVarsProvider = isCssVarsTheme(theme);
+  return useCssVarsProvider ? /* @__PURE__ */ jsx(CssVarsThemeProvider, __spreadProps(__spreadValues({ theme }, rest), { children })) : /* @__PURE__ */ jsx(LegacyThemeProvider, __spreadProps(__spreadValues({ theme }, rest), { children }));
+}
+var AuthenticationContext = React26.createContext(null);
+var SessionContext = React26.createContext(null);
+function createDefaultTheme() {
+  return createTheme({
+    cssVariables: {
+      colorSchemeSelector: "data-toolpad-color-scheme"
+    },
+    colorSchemes: { dark: true }
+  });
+}
+function AppProvider(props) {
+  const {
+    children,
+    theme = createDefaultTheme(),
+    branding = null,
+    navigation = [],
+    localeText,
+    router = null,
+    authentication = null,
+    session = null,
+    window: appWindow,
+    nonce
+  } = props;
+  return /* @__PURE__ */ jsx(WindowContext.Provider, { value: appWindow, children: /* @__PURE__ */ jsx(AuthenticationContext.Provider, { value: authentication, children: /* @__PURE__ */ jsx(SessionContext.Provider, { value: session, children: /* @__PURE__ */ jsx(RouterContext.Provider, { value: router, children: /* @__PURE__ */ jsx(AppThemeProvider, { theme, window: appWindow, nonce, children: /* @__PURE__ */ jsx(LocalizationProvider, { localeText, children: /* @__PURE__ */ jsx(NotificationsProvider, { children: /* @__PURE__ */ jsx(DialogsProvider, { children: /* @__PURE__ */ jsx(BrandingContext.Provider, { value: branding, children: /* @__PURE__ */ jsx(NavigationContext.Provider, { value: navigation, children }) }) }) }) }) }) }) }) }) });
+}
+AppProvider.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Authentication methods.
+   * @default null
+   */
+  authentication: PropTypes11.shape({
+    signIn: PropTypes11.func.isRequired,
+    signOut: PropTypes11.func.isRequired
+  }),
+  /**
+   * Branding options for the app.
+   * @default null
+   */
+  branding: PropTypes11.shape({
+    homeUrl: PropTypes11.string,
+    logo: PropTypes11.node,
+    title: PropTypes11.string
+  }),
+  /**
+   * The content of the app provider.
+   */
+  children: PropTypes11.node,
+  /**
+   * Locale text for components
+   */
+  localeText: PropTypes11.object,
+  /**
+   * Navigation definition for the app. [Find out more](https://mui.com/toolpad/core/react-app-provider/#navigation).
+   * @default []
+   */
+  navigation: PropTypes11.arrayOf(
+    PropTypes11.oneOfType([
+      PropTypes11.shape({
+        action: PropTypes11.node,
+        children: PropTypes11.arrayOf(
+          PropTypes11.oneOfType([
+            PropTypes11.object,
+            PropTypes11.shape({
+              kind: PropTypes11.oneOf(["header"]).isRequired,
+              title: PropTypes11.string.isRequired
+            }),
+            PropTypes11.shape({
+              kind: PropTypes11.oneOf(["divider"]).isRequired
+            })
+          ]).isRequired
+        ),
+        icon: PropTypes11.node,
+        kind: PropTypes11.oneOf(["page"]),
+        pattern: PropTypes11.string,
+        segment: PropTypes11.string,
+        title: PropTypes11.string
+      }),
+      PropTypes11.shape({
+        kind: PropTypes11.oneOf(["header"]).isRequired,
+        title: PropTypes11.string.isRequired
+      }),
+      PropTypes11.shape({
+        kind: PropTypes11.oneOf(["divider"]).isRequired
+      })
+    ]).isRequired
+  ),
+  /**
+   * The nonce to be used for inline scripts.
+   */
+  nonce: PropTypes11.string,
+  /**
+   * Router implementation used inside Toolpad components.
+   * @default null
+   */
+  router: PropTypes11.shape({
+    Link: PropTypes11.elementType,
+    navigate: PropTypes11.func.isRequired,
+    pathname: PropTypes11.string.isRequired,
+    searchParams: PropTypes11.instanceOf(URLSearchParams).isRequired
+  }),
+  /**
+   * Session info about the current user.
+   * @default null
+   */
+  session: PropTypes11.shape({
+    user: PropTypes11.shape({
+      email: PropTypes11.string,
+      id: PropTypes11.string,
+      image: PropTypes11.string,
+      name: PropTypes11.string
+    })
+  }),
+  /**
+   * [Theme or themes](https://mui.com/toolpad/core/react-app-provider/#theming) to be used by the app in light/dark mode. A [CSS variables theme](https://mui.com/material-ui/customization/css-theme-variables/overview/) is recommended.
+   * @default createDefaultTheme()
+   */
+  theme: PropTypes11.object,
+  /**
+   * The window where the application is rendered.
+   * This is needed when rendering the app inside an iframe, for example.
+   * @default window
+   */
+  window: PropTypes11.object
+};
+var AccountLocaleContext = React26.createContext(null);
+function SignInButton(props) {
+  const authentication = React26.useContext(AuthenticationContext);
+  const globalLocaleText = useLocaleText();
+  const accountLocaleText = React26.useContext(AccountLocaleContext);
+  const localeText = __spreadValues(__spreadValues({}, globalLocaleText), accountLocaleText);
+  return /* @__PURE__ */ jsx(
+    Button2,
+    __spreadProps(__spreadValues({
+      disableElevation: true,
+      variant: "contained",
+      size: "small",
+      onClick: authentication == null ? void 0 : authentication.signIn,
+      sx: {
+        textTransform: "capitalize",
+        filter: "opacity(0.9)",
+        width: "50%",
+        margin: (theme) => `${theme.spacing(1)} auto`,
+        transition: "filter 0.2s ease-in",
+        "&:hover": {
+          filter: "opacity(1)"
+        }
+      }
+    }, props), {
+      children: localeText == null ? void 0 : localeText.accountSignInLabel
+    })
+  );
+}
+SignInButton.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: PropTypes11.node
+};
+function SignOutButton(props) {
+  const authentication = React26.useContext(AuthenticationContext);
+  const globalLocaleText = useLocaleText();
+  const accountLocaleText = React26.useContext(AccountLocaleContext);
+  const localeText = __spreadValues(__spreadValues({}, globalLocaleText), accountLocaleText);
+  return /* @__PURE__ */ jsx(
+    Button2,
+    __spreadProps(__spreadValues({
+      disabled: !authentication,
+      variant: "outlined",
+      size: "small",
+      disableElevation: true,
+      onClick: authentication == null ? void 0 : authentication.signOut,
+      sx: {
+        textTransform: "capitalize",
+        fontWeight: "normal",
+        filter: "opacity(0.9)",
+        transition: "filter 0.2s ease-in",
+        "&:hover": {
+          filter: "opacity(1)"
+        }
+      },
+      startIcon: /* @__PURE__ */ jsx(LogoutIcon, {})
+    }, props), {
+      children: localeText == null ? void 0 : localeText.accountSignOutLabel
+    })
+  );
+}
+SignOutButton.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: PropTypes11.node
+};
+function AccountPreview(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const { slots, variant = "condensed", slotProps, open, handleClick, sx } = props;
+  const session = React26.useContext(SessionContext);
+  const globalLocaleText = useLocaleText();
+  const accountLocaleText = React26.useContext(AccountLocaleContext);
+  const localeText = __spreadValues(__spreadValues({}, globalLocaleText), accountLocaleText);
+  if (!session || !session.user) {
+    return null;
+  }
+  const avatarContent = (slots == null ? void 0 : slots.avatar) ? /* @__PURE__ */ jsx(slots.avatar, {}) : /* @__PURE__ */ jsx(
+    Avatar,
+    __spreadValues({
+      src: ((_a = session.user) == null ? void 0 : _a.image) || "",
+      alt: ((_b = session.user) == null ? void 0 : _b.name) || ((_c = session.user) == null ? void 0 : _c.email) || "",
+      sx: { height: variant === "expanded" ? 48 : 32, width: variant === "expanded" ? 48 : 32 }
+    }, slotProps == null ? void 0 : slotProps.avatar)
+  );
+  if (variant === "expanded") {
+    return /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: __spreadValues({ py: 1, px: 2, gap: 2 }, sx), children: [
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "flex-start", spacing: 2, overflow: "hidden", children: [
+        avatarContent,
+        /* @__PURE__ */ jsxs(Stack, { direction: "column", justifyContent: "space-evenly", overflow: "hidden", children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "body2", fontWeight: "bolder", noWrap: true, children: (_d = session.user) == null ? void 0 : _d.name }),
+          /* @__PURE__ */ jsx(Typography, { variant: "caption", noWrap: true, children: (_e = session.user) == null ? void 0 : _e.email })
+        ] })
+      ] }),
+      handleClick && ((slots == null ? void 0 : slots.moreIconButton) ? /* @__PURE__ */ jsx(slots.moreIconButton, {}) : /* @__PURE__ */ jsx(
+        IconButton2,
+        __spreadProps(__spreadValues({
+          size: "small",
+          onClick: handleClick
+        }, slotProps == null ? void 0 : slotProps.moreIconButton), {
+          sx: __spreadValues({ alignSelf: "center" }, (_f = slotProps == null ? void 0 : slotProps.moreIconButton) == null ? void 0 : _f.sx),
+          children: /* @__PURE__ */ jsx(MoreVertIcon, { fontSize: "small" })
+        })
+      ))
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Tooltip, { title: (_g = session.user.name) != null ? _g : accountLocaleText == null ? void 0 : accountLocaleText.accountPreviewTitle, children: (slots == null ? void 0 : slots.avatarIconButton) ? /* @__PURE__ */ jsx(slots.avatarIconButton, __spreadValues({}, slotProps == null ? void 0 : slotProps.avatarIconButton)) : /* @__PURE__ */ jsx(Stack, { sx: __spreadValues({ py: 0.5 }, sx), children: /* @__PURE__ */ jsx(
+    IconButton2,
+    __spreadProps(__spreadValues({
+      onClick: handleClick,
+      "aria-label": localeText == null ? void 0 : localeText.accountPreviewIconButtonLabel,
+      size: "small",
+      "aria-controls": open ? "account-menu" : void 0,
+      "aria-haspopup": "true",
+      "aria-expanded": open ? "true" : void 0
+    }, slotProps == null ? void 0 : slotProps.avatarIconButton), {
+      sx: __spreadValues({ width: "fit-content", margin: "0 auto" }, (_h = slotProps == null ? void 0 : slotProps.avatarIconButton) == null ? void 0 : _h.sx),
+      children: avatarContent
+    })
+  ) }) });
+}
+AccountPreview.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The handler used when the preview is expanded
+   */
+  handleClick: PropTypes11.func,
+  /**
+   * The state of the Account popover
+   * @default false
+   */
+  open: PropTypes11.bool,
+  /**
+   * The props used for each slot inside.
+   */
+  slotProps: PropTypes11.shape({
+    avatar: PropTypes11.object,
+    avatarIconButton: PropTypes11.object,
+    moreIconButton: PropTypes11.object
+  }),
+  /**
+   * The components used for each slot inside.
+   */
+  slots: PropTypes11.shape({
+    avatar: PropTypes11.elementType,
+    avatarIconButton: PropTypes11.elementType,
+    moreIconButton: PropTypes11.elementType
+  }),
+  /**
+   * The prop used to customize the styling of the preview
+   */
+  sx: PropTypes11.oneOfType([
+    PropTypes11.arrayOf(PropTypes11.oneOfType([PropTypes11.func, PropTypes11.object, PropTypes11.bool])),
+    PropTypes11.func,
+    PropTypes11.object
+  ]),
+  /**
+   * The type of account details to display.
+   * @property {'condensed'} condensed - Shows only the user's avatar.
+   * @property {'expanded'} expanded - Displays the user's avatar, name, and email if available.
+   * @default 'condensed'
+   */
+  variant: PropTypes11.oneOf(["condensed", "expanded"])
+};
+function AccountPopoverHeader(props) {
+  const _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
+  return /* @__PURE__ */ jsx(Stack, __spreadProps(__spreadValues({}, rest), { children }));
+}
+AccountPopoverHeader.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: PropTypes11.node
+};
+function AccountPopoverFooter(props) {
+  const _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
+  return /* @__PURE__ */ jsx(
+    Box4,
+    __spreadProps(__spreadValues({}, rest), {
+      sx: __spreadValues({ display: "flex", flexDirection: "row", p: 1, justifyContent: "flex-end" }, rest.sx),
+      children
+    })
+  );
+}
+AccountPopoverFooter.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes11.node,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes11.oneOfType([
+    PropTypes11.arrayOf(PropTypes11.oneOfType([PropTypes11.func, PropTypes11.object, PropTypes11.bool])),
+    PropTypes11.func,
+    PropTypes11.object
+  ])
+};
+var defaultAccountLocaleText = {
+  accountPreviewIconButtonLabel: "Current User",
+  accountPreviewTitle: "Account",
+  accountSignInLabel: "Sign in",
+  accountSignOutLabel: "Sign out"
+};
+function Account(props) {
+  var _a;
+  const { localeText: propsLocaleText } = props;
+  const globalLocaleText = useLocaleText();
+  const localeText = React26.useMemo(
+    () => __spreadValues(__spreadValues(__spreadValues({}, defaultAccountLocaleText), globalLocaleText), propsLocaleText),
+    [globalLocaleText, propsLocaleText]
+  );
+  const { slots, slotProps } = props;
+  const [anchorEl, setAnchorEl] = React26.useState(null);
+  const session = React26.useContext(SessionContext);
+  const authentication = React26.useContext(AuthenticationContext);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  if (!authentication) {
+    return null;
+  }
+  let accountContent = null;
+  if (!(session == null ? void 0 : session.user)) {
+    accountContent = (slots == null ? void 0 : slots.signInButton) ? /* @__PURE__ */ jsx(slots.signInButton, { onClick: authentication.signIn }) : /* @__PURE__ */ jsx(SignInButton, __spreadValues({}, slotProps == null ? void 0 : slotProps.signInButton));
+  } else {
+    accountContent = /* @__PURE__ */ jsxs(React26.Fragment, { children: [
+      (slots == null ? void 0 : slots.preview) ? /* @__PURE__ */ jsx(slots.preview, { handleClick, open }) : /* @__PURE__ */ jsx(
+        AccountPreview,
+        __spreadValues({
+          variant: "condensed",
+          handleClick,
+          open
+        }, slotProps == null ? void 0 : slotProps.preview)
+      ),
+      (slots == null ? void 0 : slots.popover) ? /* @__PURE__ */ jsx(
+        slots.popover,
+        __spreadValues({
+          open,
+          onClick: handleClick,
+          onClose: handleClose
+        }, slotProps == null ? void 0 : slotProps.popover)
+      ) : /* @__PURE__ */ jsx(
+        Popover,
+        __spreadProps(__spreadValues({
+          anchorEl,
+          id: "account-menu",
+          open,
+          onClose: handleClose,
+          onClick: handleClose,
+          transformOrigin: { horizontal: "right", vertical: "top" },
+          anchorOrigin: { horizontal: "right", vertical: "bottom" }
+        }, slotProps == null ? void 0 : slotProps.popover), {
+          slotProps: __spreadValues({
+            paper: {
+              elevation: 0,
+              sx: {
+                overflow: "visible",
+                filter: (theme) => `drop-shadow(0px 2px 8px ${theme.palette.mode === "dark" ? "rgba(255,255,255,0.10)" : "rgba(0,0,0,0.32)"})`,
+                mt: 1,
+                "&::before": {
+                  content: '""',
+                  display: "block",
+                  position: "absolute",
+                  top: 0,
+                  right: 14,
+                  width: 10,
+                  height: 10,
+                  bgcolor: "background.paper",
+                  transform: "translateY(-50%) rotate(45deg)",
+                  zIndex: 0
+                }
+              }
+            }
+          }, (_a = slotProps == null ? void 0 : slotProps.popover) == null ? void 0 : _a.slotProps),
+          children: (slots == null ? void 0 : slots.popoverContent) ? /* @__PURE__ */ jsx(slots.popoverContent, __spreadValues({}, slotProps == null ? void 0 : slotProps.popoverContent)) : /* @__PURE__ */ jsxs(Stack, __spreadProps(__spreadValues({ direction: "column" }, slotProps == null ? void 0 : slotProps.popoverContent), { children: [
+            /* @__PURE__ */ jsx(AccountPopoverHeader, { children: /* @__PURE__ */ jsx(AccountPreview, { variant: "expanded" }) }),
+            /* @__PURE__ */ jsx(Divider, {}),
+            /* @__PURE__ */ jsx(AccountPopoverFooter, { children: /* @__PURE__ */ jsx(SignOutButton, __spreadValues({}, slotProps == null ? void 0 : slotProps.signOutButton)) })
+          ] }))
+        })
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx(AccountLocaleContext.Provider, { value: localeText, children: accountContent });
+}
+Account.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The labels for the account component.
+   */
+  localeText: PropTypes11.object,
+  /**
+   * The props used for each slot inside.
+   */
+  slotProps: PropTypes11.shape({
+    popover: PropTypes11.object,
+    popoverContent: PropTypes11.object,
+    preview: PropTypes11.shape({
+      handleClick: PropTypes11.func,
+      open: PropTypes11.bool,
+      slotProps: PropTypes11.shape({
+        avatar: PropTypes11.object,
+        avatarIconButton: PropTypes11.object,
+        moreIconButton: PropTypes11.object
+      }),
+      slots: PropTypes11.shape({
+        avatar: PropTypes11.elementType,
+        avatarIconButton: PropTypes11.elementType,
+        moreIconButton: PropTypes11.elementType
+      }),
+      sx: PropTypes11.oneOfType([
+        PropTypes11.arrayOf(PropTypes11.oneOfType([PropTypes11.func, PropTypes11.object, PropTypes11.bool])),
+        PropTypes11.func,
+        PropTypes11.object
+      ]),
+      variant: PropTypes11.oneOf(["condensed", "expanded"])
+    }),
+    signInButton: PropTypes11.object,
+    signOutButton: PropTypes11.object
+  }),
+  /**
+   * The components used for each slot inside.
+   */
+  slots: PropTypes11.shape({
+    popover: PropTypes11.elementType,
+    popoverContent: PropTypes11.elementType,
+    preview: PropTypes11.elementType,
+    signInButton: PropTypes11.elementType,
+    signOutButton: PropTypes11.elementType
+  })
+};
+var DefaultLink = React26.forwardRef(function Link(props, ref) {
+  const _a = props, { children, href, onClick, history: history2 } = _a, rest = __objRest(_a, ["children", "href", "onClick", "history"]);
+  const routerContext = React26.useContext(RouterContext);
+  const handleLinkClick = React26.useMemo(() => {
+    if (!routerContext) {
+      return onClick;
+    }
+    return (event) => {
+      event.preventDefault();
+      const url = new URL(event.currentTarget.href);
+      routerContext.navigate(url.pathname, { history: history2 });
+      onClick == null ? void 0 : onClick(event);
+    };
+  }, [routerContext, onClick, history2]);
+  return /* @__PURE__ */ jsx("a", __spreadProps(__spreadValues({ ref, href }, rest), { onClick: handleLinkClick, children }));
+});
+var Link2 = React26.forwardRef(function Link3(props, ref) {
+  var _a;
+  const routerContext = React26.useContext(RouterContext);
+  const LinkComponent = (_a = routerContext == null ? void 0 : routerContext.Link) != null ? _a : DefaultLink;
+  return /* @__PURE__ */ jsx(LinkComponent, __spreadProps(__spreadValues({ ref }, props), { children: props.children }));
+});
+function ToolpadLogo({ size = 40 }) {
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsxs("g", { mask: "url(#a)", children: [
+      /* @__PURE__ */ jsx("path", { d: "M22.74 27.73v-7.6l6.64-3.79v7.6l-6.64 3.79Z", fill: "#007FFF" }),
+      /* @__PURE__ */ jsx("path", { d: "M16.1 23.93v-7.59l6.64 3.8v7.59l-6.65-3.8Z", fill: "#39F" }),
+      /* @__PURE__ */ jsx("path", { d: "m16.1 16.34 6.64-3.8 6.64 3.8-6.64 3.8-6.65-3.8Z", fill: "#A5D8FF" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "mask",
+      {
+        id: "b",
+        style: {
+          maskType: "alpha"
+        },
+        maskUnits: "userSpaceOnUse",
+        x: "8",
+        y: "17",
+        width: "14",
+        height: "15",
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M8.5 22.3c0-1.05.56-2 1.46-2.53l3.75-2.14c.89-.5 1.98-.5 2.87 0l3.75 2.14a2.9 2.9 0 0 1 1.46 2.52v4.23c0 1.04-.56 2-1.46 2.52l-3.75 2.14c-.89.5-1.98.5-2.87 0l-3.75-2.14a2.9 2.9 0 0 1-1.46-2.52v-4.23Z",
+            fill: "#D7DCE1"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs("g", { mask: "url(#b)", children: [
+      /* @__PURE__ */ jsx("path", { d: "M15.14 32v-7.6l6.65-3.8v7.6L15.14 32Z", fill: "#007FFF" }),
+      /* @__PURE__ */ jsx("path", { d: "M8.5 28.2v-7.6l6.64 3.8V32L8.5 28.2Z", fill: "#39F" }),
+      /* @__PURE__ */ jsx("path", { d: "m8.5 20.6 6.64-3.79 6.65 3.8-6.65 3.8-6.64-3.8Z", fill: "#A5D8FF" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "mask",
+      {
+        id: "c",
+        style: {
+          maskType: "alpha"
+        },
+        maskUnits: "userSpaceOnUse",
+        x: "8",
+        y: "4",
+        width: "22",
+        height: "20",
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M24.17 4.82a2.9 2.9 0 0 0-2.87 0L9.97 11.22a2.9 2.9 0 0 0-1.47 2.53v4.22c0 1.04.56 2 1.46 2.52l3.75 2.14c.89.5 1.98.5 2.87 0l11.33-6.42a2.9 2.9 0 0 0 1.47-2.52V9.48c0-1.04-.56-2-1.46-2.52l-3.75-2.14Z",
+            fill: "#D7DCE1"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs("g", { mask: "url(#c)", children: [
+      /* @__PURE__ */ jsx("path", { d: "M15.14 23.46v-7.6L29.38 7.8v7.59l-14.24 8.07Z", fill: "#007FFF" }),
+      /* @__PURE__ */ jsx("path", { d: "M8.5 19.66v-7.6l6.64 3.8v7.6l-6.64-3.8Z", fill: "#39F" }),
+      /* @__PURE__ */ jsx("path", { d: "M8.5 12.07 22.74 4l6.64 3.8-14.24 8.06-6.64-3.8Z", fill: "#A5D8FF" })
+    ] })
+  ] });
+}
+function useApplicationTitle() {
+  var _a;
+  const branding = React26.useContext(BrandingContext);
+  return (_a = branding == null ? void 0 : branding.title) != null ? _a : "Toolpad";
+}
+var LogoContainer = styled("div")({
+  position: "relative",
+  height: 40,
+  display: "flex",
+  alignItems: "center",
+  "& img": {
+    maxHeight: 40
+  }
+});
+function AppTitle(props) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const theme = useTheme$1();
+  const defaultTitle = useApplicationTitle();
+  const title = (_b = (_a = props == null ? void 0 : props.branding) == null ? void 0 : _a.title) != null ? _b : defaultTitle;
+  return /* @__PURE__ */ jsx(Link2, { href: (_d = (_c = props == null ? void 0 : props.branding) == null ? void 0 : _c.homeUrl) != null ? _d : "/", style: { textDecoration: "none" }, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", children: [
+    /* @__PURE__ */ jsx(LogoContainer, { children: (_f = (_e = props == null ? void 0 : props.branding) == null ? void 0 : _e.logo) != null ? _f : /* @__PURE__ */ jsx(ToolpadLogo, { size: 40 }) }),
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "h6",
+        sx: {
+          color: ((_g = theme.vars) != null ? _g : theme).palette.primary.main,
+          fontWeight: "700",
+          ml: 1,
+          whiteSpace: "nowrap",
+          lineHeight: 1
+        },
+        children: title
+      }
+    )
+  ] }) });
+}
+function subscribe2() {
+  return () => {
+  };
+}
+function getSnapshot2() {
+  return false;
+}
+function getServerSnapshot() {
+  return true;
+}
+function useSsr() {
+  return React26.useSyncExternalStore(subscribe2, getSnapshot2, getServerSnapshot);
+}
+function ThemeSwitcher() {
+  var _a;
+  const isSsr = useSsr();
+  const theme = useTheme$1();
+  const { paletteMode, setPaletteMode, isDualTheme } = React26.useContext(PaletteModeContext);
+  const toggleMode = React26.useCallback(() => {
+    setPaletteMode(paletteMode === "dark" ? "light" : "dark");
+  }, [paletteMode, setPaletteMode]);
+  return isDualTheme ? /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      title: isSsr ? "Switch mode" : `${paletteMode === "dark" ? "Light" : "Dark"} mode`,
+      enterDelay: 1e3,
+      children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        IconButton2,
+        {
+          "aria-label": isSsr ? "Switch theme mode" : `Switch to ${paletteMode === "dark" ? "light" : "dark"} mode`,
+          onClick: toggleMode,
+          sx: {
+            color: ((_a = theme.vars) != null ? _a : theme).palette.primary.dark
+          },
+          children: theme.getColorSchemeSelector ? /* @__PURE__ */ jsxs(React26.Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              DarkModeIcon,
+              {
+                sx: {
+                  display: "inline",
+                  [theme.getColorSchemeSelector("dark")]: {
+                    display: "none"
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              LightModeIcon,
+              {
+                sx: {
+                  display: "none",
+                  [theme.getColorSchemeSelector("dark")]: {
+                    display: "inline"
+                  }
+                }
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx(React26.Fragment, { children: isSsr || paletteMode !== "dark" ? /* @__PURE__ */ jsx(DarkModeIcon, {}) : /* @__PURE__ */ jsx(LightModeIcon, {}) })
+        }
+      ) })
+    }
+  ) : null;
+}
+function ToolbarActions() {
+  return /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", children: [
+    /* @__PURE__ */ jsx(ThemeSwitcher, {}),
+    /* @__PURE__ */ jsx(Account, {})
+  ] });
+}
+var AppBar = styled$1(MuiAppBar)(({ theme }) => {
+  var _a;
+  return {
+    borderWidth: 0,
+    borderBottomWidth: 1,
+    borderStyle: "solid",
+    borderColor: ((_a = theme.vars) != null ? _a : theme).palette.divider,
+    boxShadow: "none",
+    zIndex: theme.zIndex.drawer + 1
+  };
+});
+function DashboardHeader(props) {
+  var _a, _b;
+  const {
+    branding: brandingProp,
+    menuOpen,
+    onToggleMenu,
+    hideMenuButton,
+    slots,
+    slotProps
+  } = props;
+  const brandingContext = React26.useContext(BrandingContext);
+  const branding = __spreadValues(__spreadValues({}, brandingContext), brandingProp);
+  const handleMenuOpen = React26.useCallback(() => {
+    onToggleMenu(!menuOpen);
+  }, [menuOpen, onToggleMenu]);
+  const getMenuIcon = React26.useCallback(
+    (isExpanded) => {
+      const expandMenuActionText = "Expand";
+      const collapseMenuActionText = "Collapse";
+      return /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          title: `${isExpanded ? collapseMenuActionText : expandMenuActionText} menu`,
+          enterDelay: 1e3,
+          children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+            IconButton2,
+            {
+              "aria-label": `${isExpanded ? collapseMenuActionText : expandMenuActionText} navigation menu`,
+              onClick: handleMenuOpen,
+              children: isExpanded ? /* @__PURE__ */ jsx(MenuOpenIcon, {}) : /* @__PURE__ */ jsx(MenuIcon, {})
+            }
+          ) })
+        }
+      );
+    },
+    [handleMenuOpen]
+  );
+  const ToolbarActionsSlot = (_a = slots == null ? void 0 : slots.toolbarActions) != null ? _a : ToolbarActions;
+  const ToolbarAccountSlot = (_b = slots == null ? void 0 : slots.toolbarAccount) != null ? _b : (() => null);
+  return /* @__PURE__ */ jsx(AppBar, { color: "inherit", position: "absolute", sx: { displayPrint: "none" }, children: /* @__PURE__ */ jsx(Toolbar2, { sx: { backgroundColor: "inherit", mx: { xs: -0.75, sm: -1 } }, children: /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      direction: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      sx: {
+        flexWrap: "wrap",
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", children: [
+          !hideMenuButton ? /* @__PURE__ */ jsxs(React26.Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Box4,
+              {
+                sx: {
+                  display: { xs: "block", md: "none" },
+                  mr: { sm: 1 }
+                },
+                children: getMenuIcon(menuOpen)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Box4,
+              {
+                sx: {
+                  display: { xs: "none", md: "block" },
+                  mr: 1
+                },
+                children: getMenuIcon(menuOpen)
+              }
+            )
+          ] }) : null,
+          (slots == null ? void 0 : slots.appTitle) ? /* @__PURE__ */ jsx(slots.appTitle, __spreadValues({}, slotProps == null ? void 0 : slotProps.appTitle)) : (
+            /* Hierarchy of application of `branding`
+             * 1. Branding prop passed in the `slotProps.appTitle`
+             * 2. Branding prop passed to the `DashboardLayout`
+             * 3. Branding prop passed to the `AppProvider`
+             */
+            /* @__PURE__ */ jsx(AppTitle, __spreadValues({ branding }, slotProps == null ? void 0 : slotProps.appTitle))
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { marginLeft: "auto" }, children: [
+          /* @__PURE__ */ jsx(ToolbarActionsSlot, __spreadValues({}, slotProps == null ? void 0 : slotProps.toolbarActions)),
+          /* @__PURE__ */ jsx(ToolbarAccountSlot, __spreadValues({}, slotProps == null ? void 0 : slotProps.toolbarAccount))
+        ] })
+      ]
+    }
+  ) }) });
+}
+DashboardHeader.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Branding options for the header.
+   * @default null
+   */
+  branding: PropTypes11.shape({
+    homeUrl: PropTypes11.string,
+    logo: PropTypes11.node,
+    title: PropTypes11.string
+  }),
+  /**
+   * Whether the menu icon should always be hidden.
+   * @default false
+   */
+  hideMenuButton: PropTypes11.bool,
+  /**
+   * If `true`, show menu button as if menu is expanded, otherwise show it as if menu is collapsed.
+   */
+  menuOpen: PropTypes11.bool.isRequired,
+  /**
+   * Callback fired when the menu button is clicked.
+   */
+  onToggleMenu: PropTypes11.func.isRequired,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes11.shape({
+    appTitle: PropTypes11.shape({
+      branding: PropTypes11.shape({
+        homeUrl: PropTypes11.string,
+        logo: PropTypes11.node,
+        title: PropTypes11.string
+      })
+    }),
+    toolbarAccount: PropTypes11.shape({
+      localeText: PropTypes11.object,
+      slotProps: PropTypes11.shape({
+        popover: PropTypes11.object,
+        popoverContent: PropTypes11.object,
+        preview: PropTypes11.object,
+        signInButton: PropTypes11.object,
+        signOutButton: PropTypes11.object
+      }),
+      slots: PropTypes11.shape({
+        popover: PropTypes11.elementType,
+        popoverContent: PropTypes11.elementType,
+        preview: PropTypes11.elementType,
+        signInButton: PropTypes11.elementType,
+        signOutButton: PropTypes11.elementType
+      })
+    }),
+    toolbarActions: PropTypes11.object
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes11.shape({
+    appTitle: PropTypes11.elementType,
+    toolbarAccount: PropTypes11.elementType,
+    toolbarActions: PropTypes11.elementType
+  })
+};
+var getItemKind = (item) => {
+  var _a;
+  return (_a = item.kind) != null ? _a : "page";
+};
+var isPageItem = (item) => getItemKind(item) === "page";
+var getItemTitle = (item) => {
+  var _a, _b;
+  return isPageItem(item) ? (_b = (_a = item.title) != null ? _a : item.segment) != null ? _b : "" : item.title;
+};
+function buildItemToPathMap(navigation) {
+  const map = /* @__PURE__ */ new Map();
+  const visit = (item, base) => {
+    if (isPageItem(item)) {
+      const path = `${base.startsWith("/") ? base : `/${base}`}${base && base !== "/" && item.segment ? "/" : ""}${item.segment || ""}` || "/";
+      map.set(item, path);
+      if (item.children) {
+        for (const child of item.children) {
+          visit(child, path);
+        }
+      }
+    }
+  };
+  for (const item of navigation) {
+    visit(item, "");
+  }
+  return map;
+}
+var itemToPathMapCache = /* @__PURE__ */ new WeakMap();
+function getItemToPathMap(navigation) {
+  let map = itemToPathMapCache.get(navigation);
+  if (!map) {
+    map = buildItemToPathMap(navigation);
+    itemToPathMapCache.set(navigation, map);
+  }
+  return map;
+}
+function buildItemLookup(navigation) {
+  const map = /* @__PURE__ */ new Map();
+  const visit = (item) => {
+    if (isPageItem(item)) {
+      const path = getItemPath(navigation, item);
+      if (map.has(path)) {
+        console.warn(`Duplicate path in navigation: ${path}`);
+      }
+      map.set(path, item);
+      if (item.pattern) {
+        const basePath = item.segment ? path.slice(0, -item.segment.length) : path;
+        map.set(pathToRegexp(basePath + item.pattern).regexp, item);
+      }
+      if (item.children) {
+        for (const child of item.children) {
+          visit(child);
+        }
+      }
+    }
+  };
+  for (const item of navigation) {
+    visit(item);
+  }
+  return map;
+}
+var itemLookupMapCache = /* @__PURE__ */ new WeakMap();
+function getItemLookup(navigation) {
+  let map = itemLookupMapCache.get(navigation);
+  if (!map) {
+    map = buildItemLookup(navigation);
+    itemLookupMapCache.set(navigation, map);
+  }
+  return map;
+}
+function matchPath(navigation, path) {
+  const lookup = getItemLookup(navigation);
+  for (const [key, item] of lookup.entries()) {
+    if (typeof key === "string" && key === path) {
+      return item;
+    }
+    if (key instanceof RegExp && key.test(path)) {
+      return item;
+    }
+  }
+  return null;
+}
+function getItemPath(navigation, item) {
+  const map = getItemToPathMap(navigation);
+  const path = map.get(item);
+  invariant2(path, `Item not found in navigation: ${item.title}`);
+  return path;
+}
+function hasSelectedNavigationChildren(navigation, item, activePagePath) {
+  if (item.children) {
+    return item.children.some((nestedItem) => {
+      if (!isPageItem(nestedItem)) {
+        return false;
+      }
+      if (nestedItem.children) {
+        return hasSelectedNavigationChildren(navigation, nestedItem, activePagePath);
+      }
+      return activePagePath === getItemPath(navigation, nestedItem);
+    });
+  }
+  return false;
+}
+
+// src/toolpad-core/DashboardLayout/utils.ts
+function getDrawerSxTransitionMixin(isExpanded, property) {
+  return {
+    transition: (theme) => theme.transitions.create(property, {
+      easing: theme.transitions.easing.sharp,
+      duration: isExpanded ? theme.transitions.duration.enteringScreen : theme.transitions.duration.leavingScreen
+    })
+  };
+}
+function getDrawerWidthTransitionMixin(isExpanded) {
+  return __spreadProps(__spreadValues({}, getDrawerSxTransitionMixin(isExpanded, "width")), {
+    overflowX: "hidden"
+  });
+}
+function useActivePage() {
+  var _a;
+  const navigationContext = React26.useContext(NavigationContext);
+  const routerContext = React26.useContext(RouterContext);
+  const pathname = (_a = routerContext == null ? void 0 : routerContext.pathname) != null ? _a : "/";
+  const activeItem = matchPath(navigationContext, pathname);
+  const rootItem = matchPath(navigationContext, "/");
+  return React26.useMemo(() => {
+    if (!activeItem) {
+      return null;
+    }
+    const breadcrumbs = [];
+    if (rootItem) {
+      breadcrumbs.push({
+        title: getItemTitle(rootItem),
+        path: "/"
+      });
+    }
+    const segments = pathname.split("/").filter(Boolean);
+    let prefix = "";
+    for (const segment of segments) {
+      const path = `${prefix}/${segment}`;
+      prefix = path;
+      const item = matchPath(navigationContext, path);
+      if (!item) {
+        continue;
+      }
+      const itemPath = getItemPath(navigationContext, item);
+      const lastCrumb = breadcrumbs[breadcrumbs.length - 1];
+      if ((lastCrumb == null ? void 0 : lastCrumb.path) !== itemPath) {
+        breadcrumbs.push({
+          title: getItemTitle(item),
+          path: itemPath
+        });
+      }
+    }
+    return {
+      title: getItemTitle(activeItem),
+      path: getItemPath(navigationContext, activeItem),
+      breadcrumbs
+    };
+  }, [activeItem, rootItem, pathname, navigationContext]);
+}
+
+// src/toolpad-core/DashboardLayout/shared.ts
+var MINI_DRAWER_WIDTH = 84;
+var NavigationListItemButton = styled(ListItemButton)(({ theme }) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  return {
+    borderRadius: 8,
+    "&.Mui-selected": {
+      "& .MuiListItemIcon-root": {
+        color: ((_a = theme.vars) != null ? _a : theme).palette.primary.dark
+      },
+      "& .MuiTypography-root": {
+        color: ((_b = theme.vars) != null ? _b : theme).palette.primary.dark
+      },
+      "& .MuiSvgIcon-root": {
+        color: ((_c = theme.vars) != null ? _c : theme).palette.primary.dark
+      },
+      "& .MuiAvatar-root": {
+        backgroundColor: ((_d = theme.vars) != null ? _d : theme).palette.primary.dark
+      },
+      "& .MuiTouchRipple-child": {
+        backgroundColor: ((_e = theme.vars) != null ? _e : theme).palette.primary.dark
+      }
+    },
+    "& .MuiSvgIcon-root": {
+      color: ((_f = theme.vars) != null ? _f : theme).palette.action.active
+    },
+    "& .MuiAvatar-root": {
+      backgroundColor: ((_g = theme.vars) != null ? _g : theme).palette.action.active
+    }
+  };
+});
+var LIST_ITEM_ICON_SIZE = 34;
+function DashboardSidebarPageItem(props) {
+  var _a;
+  const navigationContext = React26.useContext(NavigationContext);
+  const pageItemContextProps = React26.useContext(DashboardSidebarPageItemContext);
+  invariant2(pageItemContextProps, "No navigation page item context provided.");
+  const contextAwareProps = __spreadValues(__spreadValues({}, pageItemContextProps), props);
+  const {
+    item,
+    href = getItemPath(navigationContext, item),
+    LinkComponent: LinkComponentProp,
+    expanded = false,
+    selected = false,
+    disabled = false,
+    id,
+    onClick,
+    isMini = false,
+    isSidebarFullyExpanded = true,
+    isSidebarFullyCollapsed = false,
+    renderNestedNavigation
+  } = contextAwareProps;
+  const [hoveredMiniSidebarItemId, setHoveredMiniSidebarItemId] = React26.useState(
+    null
+  );
+  const handleClick = React26.useCallback(() => {
+    onClick(id, item);
+  }, [id, item, onClick]);
+  let nestedNavigationCollapseSx = { display: "none" };
+  if (isMini && isSidebarFullyCollapsed) {
+    nestedNavigationCollapseSx = {
+      fontSize: 18,
+      position: "absolute",
+      top: "41.5%",
+      right: "2px",
+      transform: "translateY(-50%) rotate(-90deg)"
+    };
+  } else if (!isMini && isSidebarFullyExpanded) {
+    nestedNavigationCollapseSx = {
+      ml: 0.5,
+      transform: `rotate(${expanded ? 0 : -90}deg)`,
+      transition: (theme) => theme.transitions.create("transform", {
+        easing: theme.transitions.easing.sharp,
+        duration: 100
+      })
+    };
+  }
+  const hasExternalHref = href.startsWith("http://") || href.startsWith("https://");
+  const LinkComponent = LinkComponentProp != null ? LinkComponentProp : hasExternalHref ? "a" : Link2;
+  const title = getItemTitle(item);
+  const listItem = /* @__PURE__ */ jsxs(
+    ListItem,
+    __spreadProps(__spreadValues({}, item.children && isMini ? {
+      onMouseEnter: () => {
+        setHoveredMiniSidebarItemId(id);
+      },
+      onMouseLeave: () => {
+        setHoveredMiniSidebarItemId(null);
+      }
+    } : {}), {
+      sx: {
+        py: 0,
+        px: 1,
+        overflowX: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          NavigationListItemButton,
+          __spreadProps(__spreadValues(__spreadValues({
+            selected,
+            disabled,
+            sx: {
+              px: 1.4,
+              height: isMini ? 60 : 48
+            }
+          }, item.children && !isMini ? {
+            onClick: handleClick
+          } : {}), !item.children ? __spreadProps(__spreadValues({
+            LinkComponent
+          }, hasExternalHref ? {
+            target: "_blank",
+            rel: "noopener noreferrer"
+          } : {}), {
+            href,
+            onClick: handleClick
+          }) : {}), {
+            children: [
+              item.icon || isMini ? /* @__PURE__ */ jsxs(
+                Box4,
+                {
+                  sx: isMini ? {
+                    position: "absolute",
+                    left: "50%",
+                    top: "calc(50% - 6px)",
+                    transform: "translate(-50%, -50%)"
+                  } : {},
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      ListItemIcon,
+                      {
+                        sx: {
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          minWidth: LIST_ITEM_ICON_SIZE
+                        },
+                        children: [
+                          (_a = item.icon) != null ? _a : null,
+                          !item.icon && isMini ? /* @__PURE__ */ jsx(
+                            Avatar,
+                            {
+                              sx: {
+                                width: LIST_ITEM_ICON_SIZE - 7,
+                                height: LIST_ITEM_ICON_SIZE - 7,
+                                fontSize: 12
+                              },
+                              children: title.split(" ").slice(0, 2).map((titleWord) => titleWord.charAt(0).toUpperCase())
+                            }
+                          ) : null
+                        ]
+                      }
+                    ),
+                    isMini ? /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        variant: "caption",
+                        sx: {
+                          position: "absolute",
+                          bottom: -18,
+                          left: "50%",
+                          transform: "translateX(-50%)",
+                          fontSize: 10,
+                          fontWeight: 500,
+                          textAlign: "center",
+                          whiteSpace: "nowrap",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          maxWidth: MINI_DRAWER_WIDTH - 28
+                        },
+                        children: title
+                      }
+                    ) : null
+                  ]
+                }
+              ) : null,
+              !isMini ? /* @__PURE__ */ jsx(
+                ListItemText,
+                {
+                  primary: title,
+                  sx: {
+                    ml: 1.2,
+                    whiteSpace: "nowrap",
+                    zIndex: 1
+                  }
+                }
+              ) : null,
+              item.action && !isMini && isSidebarFullyExpanded ? item.action : null,
+              item.children ? /* @__PURE__ */ jsx(ExpandMoreIcon, { sx: nestedNavigationCollapseSx }) : null
+            ]
+          })
+        ),
+        item.children && isMini ? /* @__PURE__ */ jsx(Grow, { in: id === hoveredMiniSidebarItemId, children: /* @__PURE__ */ jsx(
+          Box4,
+          {
+            sx: {
+              position: "fixed",
+              left: MINI_DRAWER_WIDTH - 2,
+              pl: "6px"
+            },
+            children: /* @__PURE__ */ jsx(
+              Paper,
+              {
+                sx: {
+                  pt: 0.5,
+                  pb: 0.5,
+                  transform: "translateY(calc(50% - 30px))"
+                },
+                children: renderNestedNavigation(item.children)
+              }
+            )
+          }
+        ) }) : null
+      ]
+    })
+  );
+  return /* @__PURE__ */ jsxs(React26.Fragment, { children: [
+    listItem,
+    item.children && !isMini ? /* @__PURE__ */ jsx(Collapse, { in: expanded, timeout: "auto", unmountOnExit: true, children: renderNestedNavigation(item.children) }) : null
+  ] }, id);
+}
+DashboardSidebarPageItem.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * If `true`, the item is disabled.
+   * @default false
+   */
+  disabled: PropTypes11.bool,
+  /**
+   * If `true`, expands any nested navigation in the item, otherwise collapse it.
+   * @default false
+   */
+  expanded: PropTypes11.bool,
+  /**
+   * Link `href` for when the item is rendered as a link.
+   * @default getItemPath(navigationContext, item)
+   */
+  href: PropTypes11.string,
+  /**
+   * Navigation page item definition.
+   */
+  item: PropTypes11.shape({
+    action: PropTypes11.node,
+    children: PropTypes11.arrayOf(
+      PropTypes11.oneOfType([
+        PropTypes11.object,
+        PropTypes11.shape({
+          kind: PropTypes11.oneOf(["header"]).isRequired,
+          title: PropTypes11.string.isRequired
+        }),
+        PropTypes11.shape({
+          kind: PropTypes11.oneOf(["divider"]).isRequired
+        })
+      ]).isRequired
+    ),
+    icon: PropTypes11.node,
+    kind: PropTypes11.oneOf(["page"]),
+    pattern: PropTypes11.string,
+    segment: PropTypes11.string,
+    title: PropTypes11.string
+  }).isRequired,
+  /**
+   * The component used to render the item as a link.
+   * @default Link
+   */
+  LinkComponent: PropTypes11.elementType,
+  /**
+   * Use to apply selected styling.
+   * @default false
+   */
+  selected: PropTypes11.bool
+};
+function DashboardSidebarSubNavigationPageItem({
+  id,
+  item,
+  isExpanded,
+  onClick,
+  depth,
+  onLinkClick,
+  isMini,
+  isFullyExpanded,
+  isFullyCollapsed,
+  sidebarExpandedWidth,
+  renderPageItem
+}) {
+  const navigationContext = React26.useContext(NavigationContext);
+  const activePage = useActivePage();
+  const isActive = !!activePage && activePage.path === getItemPath(navigationContext, item);
+  const isSelected = activePage && item.children && isMini ? hasSelectedNavigationChildren(navigationContext, item, activePage.path) : isActive && !item.children;
+  const pageItemContextProps = React26.useMemo(
+    () => ({
+      expanded: isExpanded,
+      selected: isSelected,
+      id,
+      onClick,
+      isMini,
+      isSidebarFullyExpanded: isFullyExpanded,
+      isSidebarFullyCollapsed: isFullyCollapsed,
+      renderNestedNavigation: () => {
+        var _a;
+        return /* @__PURE__ */ jsx(
+          DashboardSidebarSubNavigation,
+          {
+            subNavigation: (_a = item.children) != null ? _a : [],
+            depth: depth + 1,
+            onLinkClick,
+            isPopover: isMini,
+            sidebarExpandedWidth
+          }
+        );
+      }
+    }),
+    [
+      depth,
+      id,
+      isExpanded,
+      isFullyCollapsed,
+      isFullyExpanded,
+      isMini,
+      isSelected,
+      item.children,
+      onClick,
+      onLinkClick,
+      sidebarExpandedWidth
+    ]
+  );
+  return /* @__PURE__ */ jsx(DashboardSidebarPageItemContext.Provider, { value: pageItemContextProps, children: renderPageItem ? renderPageItem(item, { mini: isMini }) : /* @__PURE__ */ jsx(DashboardSidebarPageItem, { item }) });
+}
+function DashboardSidebarSubNavigation({
+  subNavigation,
+  depth = 0,
+  onLinkClick,
+  isMini = false,
+  isPopover = false,
+  isFullyExpanded = true,
+  isFullyCollapsed = false,
+  hasDrawerTransitions = false,
+  sidebarExpandedWidth,
+  renderPageItem
+}) {
+  const navigationContext = React26.useContext(NavigationContext);
+  const activePage = useActivePage();
+  const initialExpandedItemIds = React26.useMemo(
+    () => subNavigation.map((navigationItem, navigationItemIndex) => ({
+      navigationItem,
+      originalIndex: navigationItemIndex
+    })).filter(
+      ({ navigationItem }) => isPageItem(navigationItem) && !!activePage && hasSelectedNavigationChildren(navigationContext, navigationItem, activePage.path)
+    ).map(({ originalIndex }) => `page-${depth}-${originalIndex}`),
+    [activePage, depth, navigationContext, subNavigation]
+  );
+  const [expandedItemIds, setExpandedItemIds] = React26.useState(initialExpandedItemIds);
+  const handlePageItemClick = React26.useCallback(
+    (itemId, item) => {
+      if (item.children && !isMini) {
+        setExpandedItemIds(
+          (previousValue) => previousValue.includes(itemId) ? previousValue.filter((previousValueItemId) => previousValueItemId !== itemId) : [...previousValue, itemId]
+        );
+      } else if (!item.children) {
+        onLinkClick();
+      }
+    },
+    [isMini, onLinkClick]
+  );
+  return /* @__PURE__ */ jsx(
+    List,
+    {
+      sx: {
+        padding: 0,
+        mt: isPopover && depth === 1 ? 0.5 : 0,
+        mb: depth === 0 && !isPopover ? 4 : 0.5,
+        pl: (isPopover ? 1 : 2) * (isPopover ? depth - 1 : depth),
+        minWidth: isPopover && depth === 1 ? 240 : "auto",
+        width: isMini ? MINI_DRAWER_WIDTH : "auto"
+      },
+      children: subNavigation.map((navigationItem, navigationItemIndex) => {
+        if (navigationItem.kind === "header") {
+          return /* @__PURE__ */ jsx(
+            ListSubheader,
+            {
+              sx: __spreadProps(__spreadValues({
+                fontSize: 12,
+                fontWeight: "700",
+                height: isMini ? 0 : 40
+              }, hasDrawerTransitions ? getDrawerSxTransitionMixin(isFullyExpanded, "height") : {}), {
+                px: 2,
+                minWidth: sidebarExpandedWidth,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                zIndex: 2
+              }),
+              children: getItemTitle(navigationItem)
+            },
+            `subheader-${depth}-${navigationItemIndex}`
+          );
+        }
+        if (navigationItem.kind === "divider") {
+          const nextItem = subNavigation[navigationItemIndex + 1];
+          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+            Divider,
+            {
+              sx: __spreadValues({
+                borderBottomWidth: 2,
+                mx: 1,
+                mt: 1,
+                mb: (nextItem == null ? void 0 : nextItem.kind) === "header" && !isMini ? 0 : 1
+              }, hasDrawerTransitions ? getDrawerSxTransitionMixin(isFullyExpanded, "margin") : {})
+            }
+          ) }, `divider-${depth}-${navigationItemIndex}`);
+        }
+        const pageItemId = `page-${depth}-${navigationItemIndex}`;
+        return /* @__PURE__ */ jsx(
+          DashboardSidebarSubNavigationPageItem,
+          {
+            id: pageItemId,
+            item: navigationItem,
+            isExpanded: expandedItemIds.includes(pageItemId),
+            onClick: handlePageItemClick,
+            depth,
+            onLinkClick,
+            isMini,
+            isFullyExpanded,
+            isFullyCollapsed,
+            sidebarExpandedWidth,
+            renderPageItem
+          },
+          pageItemId
+        );
+      })
+    }
+  );
+}
+
+// src/toolpad-utils/warnOnce.ts
+var history = /* @__PURE__ */ new Set();
+function warnOnce(msg) {
+  if (!history.has(msg)) {
+    history.add(msg);
+    console.warn(msg);
+  }
+}
+function DashboardLayout(props) {
+  var _a, _b;
+  const {
+    children,
+    branding,
+    navigation: navigationProp,
+    defaultSidebarCollapsed = false,
+    disableCollapsibleSidebar = false,
+    hideNavigation = false,
+    sidebarExpandedWidth = 320,
+    renderPageItem,
+    slots,
+    slotProps,
+    sx
+  } = props;
+  if (navigationProp && process.env.NODE_ENV !== "production") {
+    warnOnce(
+      "The navigation prop in the DashboardLayout component is deprecated and will eventually be removed. Set the navigation prop in the AppProvider instead (https://mui.com/toolpad/core/react-app-provider/#navigation)."
+    );
+  }
+  const theme = useTheme();
+  const navigationContext = React26.useContext(NavigationContext);
+  const appWindowContext = React26.useContext(WindowContext);
+  const navigation = navigationProp != null ? navigationProp : navigationContext;
+  const [isDesktopNavigationExpanded, setIsDesktopNavigationExpanded] = React26.useState(!defaultSidebarCollapsed);
+  const [isMobileNavigationExpanded, setIsMobileNavigationExpanded] = React26.useState(false);
+  const isOverSmViewport = useMediaQuery2(
+    theme.breakpoints.up("sm"),
+    appWindowContext && {
+      matchMedia: appWindowContext.matchMedia
+    }
+  );
+  const isOverMdViewport = useMediaQuery2(
+    theme.breakpoints.up("md"),
+    appWindowContext && {
+      matchMedia: appWindowContext.matchMedia
+    }
+  );
+  const isNavigationExpanded = isOverMdViewport ? isDesktopNavigationExpanded : isMobileNavigationExpanded;
+  const setIsNavigationExpanded = React26.useCallback(
+    (newExpanded) => {
+      if (isOverMdViewport) {
+        setIsDesktopNavigationExpanded(newExpanded);
+      } else {
+        setIsMobileNavigationExpanded(newExpanded);
+      }
+    },
+    [isOverMdViewport]
+  );
+  const [isNavigationFullyExpanded, setIsNavigationFullyExpanded] = React26.useState(isNavigationExpanded);
+  const [isNavigationFullyCollapsed, setIsNavigationFullyCollapsed] = React26.useState(!isNavigationExpanded);
+  React26.useEffect(() => {
+    if (isNavigationExpanded) {
+      const drawerWidthTransitionTimeout = setTimeout(() => {
+        setIsNavigationFullyExpanded(true);
+      }, theme.transitions.duration.enteringScreen);
+      return () => clearTimeout(drawerWidthTransitionTimeout);
+    }
+    setIsNavigationFullyExpanded(false);
+    return () => {
+    };
+  }, [isNavigationExpanded, theme]);
+  React26.useEffect(() => {
+    if (!isNavigationExpanded) {
+      const drawerWidthTransitionTimeout = setTimeout(() => {
+        setIsNavigationFullyCollapsed(true);
+      }, theme.transitions.duration.leavingScreen);
+      return () => clearTimeout(drawerWidthTransitionTimeout);
+    }
+    setIsNavigationFullyCollapsed(false);
+    return () => {
+    };
+  }, [isNavigationExpanded, theme]);
+  const handleSetNavigationExpanded = React26.useCallback(
+    (newExpanded) => () => {
+      setIsNavigationExpanded(newExpanded);
+    },
+    [setIsNavigationExpanded]
+  );
+  const handleToggleHeaderMenu = React26.useCallback(
+    (isExpanded) => {
+      setIsNavigationExpanded(isExpanded);
+    },
+    [setIsNavigationExpanded]
+  );
+  const handleNavigationLinkClick = React26.useCallback(() => {
+    setIsMobileNavigationExpanded(false);
+  }, [setIsMobileNavigationExpanded]);
+  const isDesktopMini = !disableCollapsibleSidebar && !isDesktopNavigationExpanded;
+  const isMobileMini = !disableCollapsibleSidebar && !isMobileNavigationExpanded;
+  const hasDrawerTransitions = isOverSmViewport && (!disableCollapsibleSidebar || isOverMdViewport);
+  const SidebarFooterSlot = (_a = slots == null ? void 0 : slots.sidebarFooter) != null ? _a : null;
+  const HeaderSlot = (_b = slots == null ? void 0 : slots.header) != null ? _b : DashboardHeader;
+  const headerSlotProps = React26.useMemo(
+    () => __spreadValues({
+      branding,
+      menuOpen: isNavigationExpanded,
+      onToggleMenu: handleToggleHeaderMenu,
+      hideMenuButton: hideNavigation || isOverMdViewport && disableCollapsibleSidebar,
+      slots: {
+        appTitle: slots == null ? void 0 : slots.appTitle,
+        toolbarActions: slots == null ? void 0 : slots.toolbarActions,
+        toolbarAccount: slots == null ? void 0 : slots.toolbarAccount
+      },
+      slotProps: {
+        appTitle: slotProps == null ? void 0 : slotProps.appTitle,
+        toolbarActions: slotProps == null ? void 0 : slotProps.toolbarActions,
+        toolbarAccount: slotProps == null ? void 0 : slotProps.toolbarAccount
+      }
+    }, slotProps == null ? void 0 : slotProps.header),
+    [
+      branding,
+      isNavigationExpanded,
+      handleToggleHeaderMenu,
+      hideNavigation,
+      isOverMdViewport,
+      disableCollapsibleSidebar,
+      slotProps,
+      slots
+    ]
+  );
+  const getDrawerContent = React26.useCallback(
+    (isMini, viewport) => {
+      var _a2;
+      return /* @__PURE__ */ jsxs(React26.Fragment, { children: [
+        /* @__PURE__ */ jsx(Toolbar2, {}),
+        /* @__PURE__ */ jsxs(
+          Box4,
+          {
+            component: "nav",
+            "aria-label": `${viewport.charAt(0).toUpperCase()}${viewport.slice(1)}`,
+            sx: __spreadValues({
+              height: "100%",
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "space-between",
+              overflow: "auto",
+              scrollbarGutter: isMini ? "stable" : "auto",
+              overflowX: "hidden",
+              pt: ((_a2 = navigation[0]) == null ? void 0 : _a2.kind) === "header" && !isMini ? 0 : 2
+            }, hasDrawerTransitions ? getDrawerSxTransitionMixin(isNavigationFullyExpanded, "padding") : {}),
+            children: [
+              /* @__PURE__ */ jsx(
+                DashboardSidebarSubNavigation,
+                {
+                  subNavigation: navigation,
+                  onLinkClick: handleNavigationLinkClick,
+                  isMini,
+                  isFullyExpanded: isNavigationFullyExpanded,
+                  isFullyCollapsed: isNavigationFullyCollapsed,
+                  hasDrawerTransitions,
+                  sidebarExpandedWidth,
+                  renderPageItem
+                }
+              ),
+              SidebarFooterSlot ? /* @__PURE__ */ jsx(SidebarFooterSlot, __spreadValues({ mini: isMini }, slotProps == null ? void 0 : slotProps.sidebarFooter)) : null
+            ]
+          }
+        )
+      ] });
+    },
+    [
+      SidebarFooterSlot,
+      handleNavigationLinkClick,
+      hasDrawerTransitions,
+      isNavigationFullyCollapsed,
+      isNavigationFullyExpanded,
+      navigation,
+      sidebarExpandedWidth,
+      renderPageItem,
+      slotProps == null ? void 0 : slotProps.sidebarFooter
+    ]
+  );
+  const getDrawerSharedSx = React26.useCallback(
+    (isMini, isTemporary) => {
+      const drawerWidth = isMini ? MINI_DRAWER_WIDTH : sidebarExpandedWidth;
+      return __spreadProps(__spreadValues(__spreadValues({
+        displayPrint: "none",
+        width: drawerWidth,
+        flexShrink: 0
+      }, getDrawerWidthTransitionMixin(isNavigationExpanded)), isTemporary ? { position: "absolute" } : {}), {
+        [`& .MuiDrawer-paper`]: __spreadValues({
+          position: "absolute",
+          width: drawerWidth,
+          boxSizing: "border-box",
+          backgroundImage: "none"
+        }, getDrawerWidthTransitionMixin(isNavigationExpanded))
+      });
+    },
+    [isNavigationExpanded, sidebarExpandedWidth]
+  );
+  return /* @__PURE__ */ jsxs(
+    Box4,
+    {
+      sx: __spreadValues({
+        position: "relative",
+        display: "flex",
+        overflow: "hidden",
+        height: "100vh",
+        width: "100vw"
+      }, sx),
+      children: [
+        /* @__PURE__ */ jsx(HeaderSlot, __spreadValues({}, headerSlotProps)),
+        !hideNavigation ? /* @__PURE__ */ jsxs(React26.Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Drawer,
+            {
+              container: appWindowContext == null ? void 0 : appWindowContext.document.body,
+              variant: "temporary",
+              open: isMobileNavigationExpanded,
+              onClose: handleSetNavigationExpanded(false),
+              ModalProps: {
+                keepMounted: true
+                // Better open performance on mobile.
+              },
+              sx: __spreadValues({
+                display: {
+                  xs: "block",
+                  sm: disableCollapsibleSidebar ? "block" : "none",
+                  md: "none"
+                }
+              }, getDrawerSharedSx(false, true)),
+              children: getDrawerContent(false, "phone")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Drawer,
+            {
+              variant: "permanent",
+              sx: __spreadValues({
+                display: {
+                  xs: "none",
+                  sm: disableCollapsibleSidebar ? "none" : "block",
+                  md: "none"
+                }
+              }, getDrawerSharedSx(isMobileMini, false)),
+              children: getDrawerContent(isMobileMini, "tablet")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Drawer,
+            {
+              variant: "permanent",
+              sx: __spreadValues({
+                display: { xs: "none", md: "block" }
+              }, getDrawerSharedSx(isDesktopMini, false)),
+              children: getDrawerContent(isDesktopMini, "desktop")
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ jsxs(
+          Box4,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              flex: 1,
+              minWidth: 0
+            },
+            children: [
+              /* @__PURE__ */ jsx(Toolbar2, { sx: { displayPrint: "none" } }),
+              /* @__PURE__ */ jsx(
+                Box4,
+                {
+                  component: "main",
+                  sx: {
+                    display: "flex",
+                    flexDirection: "column",
+                    flex: 1,
+                    overflow: "auto"
+                  },
+                  children
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+DashboardLayout.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Branding options for the dashboard.
+   * @default null
+   */
+  branding: PropTypes11.shape({
+    homeUrl: PropTypes11.string,
+    logo: PropTypes11.node,
+    title: PropTypes11.string
+  }),
+  /**
+   * The content of the dashboard.
+   */
+  children: PropTypes11.node,
+  /**
+   * Whether the sidebar should start collapsed in desktop size screens.
+   * @default false
+   */
+  defaultSidebarCollapsed: PropTypes11.bool,
+  /**
+   * Whether the sidebar should not be collapsible to a mini variant in desktop and tablet viewports.
+   * @default false
+   */
+  disableCollapsibleSidebar: PropTypes11.bool,
+  /**
+   * Whether the navigation bar and menu icon should be hidden.
+   * @default false
+   */
+  hideNavigation: PropTypes11.bool,
+  /**
+   * Navigation definition for the dashboard. [Find out more](https://mui.com/toolpad/core/react-dashboard-layout/#navigation).
+   * @default []
+   * @deprecated Set the navigation in the [AppProvider](https://mui.com/toolpad/core/react-app-provider/#navigation) instead.
+   */
+  navigation: PropTypes11.arrayOf(
+    PropTypes11.oneOfType([
+      PropTypes11.shape({
+        action: PropTypes11.node,
+        children: PropTypes11.arrayOf(
+          PropTypes11.oneOfType([
+            PropTypes11.object,
+            PropTypes11.shape({
+              kind: PropTypes11.oneOf(["header"]).isRequired,
+              title: PropTypes11.string.isRequired
+            }),
+            PropTypes11.shape({
+              kind: PropTypes11.oneOf(["divider"]).isRequired
+            })
+          ]).isRequired
+        ),
+        icon: PropTypes11.node,
+        kind: PropTypes11.oneOf(["page"]),
+        pattern: PropTypes11.string,
+        segment: PropTypes11.string,
+        title: PropTypes11.string
+      }),
+      PropTypes11.shape({
+        kind: PropTypes11.oneOf(["header"]).isRequired,
+        title: PropTypes11.string.isRequired
+      }),
+      PropTypes11.shape({
+        kind: PropTypes11.oneOf(["divider"]).isRequired
+      })
+    ]).isRequired
+  ),
+  /**
+   * Render each page item.
+   *
+   * @param {NavigationPageItem} item
+   * @param {{ mini: boolean }} params
+   * @returns {ReactNode}
+   */
+  renderPageItem: PropTypes11.func,
+  /**
+   * Width of the sidebar when expanded.
+   * @default 320
+   */
+  sidebarExpandedWidth: PropTypes11.oneOfType([PropTypes11.number, PropTypes11.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes11.shape({
+    appTitle: PropTypes11.shape({
+      branding: PropTypes11.shape({
+        homeUrl: PropTypes11.string,
+        logo: PropTypes11.node,
+        title: PropTypes11.string
+      })
+    }),
+    header: PropTypes11.shape({
+      branding: PropTypes11.shape({
+        homeUrl: PropTypes11.string,
+        logo: PropTypes11.node,
+        title: PropTypes11.string
+      }),
+      hideMenuButton: PropTypes11.bool,
+      menuOpen: PropTypes11.bool.isRequired,
+      onToggleMenu: PropTypes11.func.isRequired,
+      slotProps: PropTypes11.shape({
+        appTitle: PropTypes11.object,
+        toolbarAccount: PropTypes11.object,
+        toolbarActions: PropTypes11.object
+      }),
+      slots: PropTypes11.shape({
+        appTitle: PropTypes11.elementType,
+        toolbarAccount: PropTypes11.elementType,
+        toolbarActions: PropTypes11.elementType
+      })
+    }),
+    sidebarFooter: PropTypes11.shape({
+      mini: PropTypes11.bool.isRequired
+    }),
+    toolbarAccount: PropTypes11.shape({
+      localeText: PropTypes11.object,
+      slotProps: PropTypes11.shape({
+        popover: PropTypes11.object,
+        popoverContent: PropTypes11.object,
+        preview: PropTypes11.object,
+        signInButton: PropTypes11.object,
+        signOutButton: PropTypes11.object
+      }),
+      slots: PropTypes11.shape({
+        popover: PropTypes11.elementType,
+        popoverContent: PropTypes11.elementType,
+        preview: PropTypes11.elementType,
+        signInButton: PropTypes11.elementType,
+        signOutButton: PropTypes11.elementType
+      })
+    }),
+    toolbarActions: PropTypes11.object
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes11.shape({
+    appTitle: PropTypes11.elementType,
+    header: PropTypes11.elementType,
+    sidebarFooter: PropTypes11.elementType,
+    toolbarAccount: PropTypes11.elementType,
+    toolbarActions: PropTypes11.elementType
+  }),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes11.oneOfType([
+    PropTypes11.arrayOf(PropTypes11.oneOfType([PropTypes11.func, PropTypes11.object, PropTypes11.bool])),
+    PropTypes11.func,
+    PropTypes11.object
+  ])
+};
+var PageHeaderToolbarRoot = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "row",
+  gap: theme.spacing(1),
+  // Ensure the toolbar is always on the right side, even after wrapping
+  marginLeft: "auto"
+}));
+function PageHeaderToolbar(props) {
+  return /* @__PURE__ */ jsx(PageHeaderToolbarRoot, __spreadValues({}, props));
+}
+PageHeaderToolbar.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes11.node
+};
+var PageContentHeader = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "space-between",
+  gap: theme.spacing(2)
+}));
+function PageHeader(props) {
+  var _a, _b, _c, _d, _e;
+  const { breadcrumbs, title } = props;
+  const activePage = useActivePage();
+  const resolvedBreadcrumbs = (_a = breadcrumbs != null ? breadcrumbs : activePage == null ? void 0 : activePage.breadcrumbs) != null ? _a : [];
+  const resolvedTitle = (_b = title != null ? title : activePage == null ? void 0 : activePage.title) != null ? _b : "";
+  const ToolbarComponent = (_d = (_c = props == null ? void 0 : props.slots) == null ? void 0 : _c.toolbar) != null ? _d : PageHeaderToolbar;
+  const toolbarSlotProps = useSlotProps({
+    elementType: ToolbarComponent,
+    ownerState: props,
+    externalSlotProps: (_e = props == null ? void 0 : props.slotProps) == null ? void 0 : _e.toolbar,
+    additionalProps: {}
+  });
+  return /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsx(Breadcrumbs, { "aria-label": "breadcrumb", children: resolvedBreadcrumbs ? resolvedBreadcrumbs.map((item, index) => {
+      return item.path ? /* @__PURE__ */ jsx(
+        Link4,
+        {
+          component: Link2,
+          underline: "hover",
+          color: "inherit",
+          href: item.path,
+          children: getItemTitle(item)
+        },
+        index
+      ) : /* @__PURE__ */ jsx(Typography, { color: "text.primary", children: getItemTitle(item) }, index);
+    }) : null }),
+    /* @__PURE__ */ jsxs(PageContentHeader, { children: [
+      resolvedTitle ? /* @__PURE__ */ jsx(Typography, { variant: "h4", children: resolvedTitle }) : null,
+      /* @__PURE__ */ jsx(ToolbarComponent, __spreadValues({}, toolbarSlotProps))
+    ] })
+  ] });
+}
+PageHeader.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The breadcrumbs of the page. Leave blank to use the active page breadcrumbs.
+   */
+  breadcrumbs: PropTypes11.arrayOf(
+    PropTypes11.shape({
+      path: PropTypes11.string,
+      title: PropTypes11.string.isRequired
+    })
+  ),
+  /**
+   * The props used for each slot inside.
+   */
+  slotProps: PropTypes11.shape({
+    toolbar: PropTypes11.shape({
+      children: PropTypes11.node
+    }).isRequired
+  }),
+  /**
+   * The components used for each slot inside.
+   */
+  slots: PropTypes11.shape({
+    toolbar: PropTypes11.elementType
+  }),
+  /**
+   * The title of the page. Leave blank to use the active page title.
+   */
+  title: PropTypes11.string
+};
+function PageContainer(props) {
+  var _b;
+  const _a = props, { children, breadcrumbs, slots, slotProps, title } = _a, rest = __objRest(_a, ["children", "breadcrumbs", "slots", "slotProps", "title"]);
+  const PageHeaderSlot = (_b = slots == null ? void 0 : slots.header) != null ? _b : PageHeader;
+  return /* @__PURE__ */ jsx(Container, __spreadProps(__spreadValues({}, rest), { sx: __spreadValues({ flex: 1, display: "flex", flexDirection: "column" }, rest.sx), children: /* @__PURE__ */ jsxs(Stack, { sx: { flex: 1, my: 2 }, spacing: 2, children: [
+    /* @__PURE__ */ jsx(PageHeaderSlot, __spreadValues({ title, breadcrumbs }, slotProps == null ? void 0 : slotProps.header)),
+    /* @__PURE__ */ jsx(Box4, { sx: { flex: 1, display: "flex", flexDirection: "column" }, children })
+  ] }) }));
+}
+PageContainer.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The breadcrumbs of the page. Leave blank to use the active page breadcrumbs.
+   */
+  breadcrumbs: PropTypes11.arrayOf(
+    PropTypes11.shape({
+      path: PropTypes11.string,
+      title: PropTypes11.string.isRequired
+    })
+  ),
+  /**
+   * @ignore
+   */
+  children: PropTypes11.node,
+  /**
+   * The props used for each slot inside.
+   */
+  slotProps: PropTypes11.shape({
+    header: PropTypes11.shape({
+      breadcrumbs: PropTypes11.arrayOf(
+        PropTypes11.shape({
+          path: PropTypes11.string,
+          title: PropTypes11.string.isRequired
+        })
+      ),
+      slotProps: PropTypes11.shape({
+        toolbar: PropTypes11.object.isRequired
+      }),
+      slots: PropTypes11.shape({
+        toolbar: PropTypes11.elementType
+      }),
+      title: PropTypes11.string
+    }).isRequired
+  }),
+  /**
+   * The components used for each slot inside.
+   */
+  slots: PropTypes11.shape({
+    header: PropTypes11.elementType
+  }),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes11.oneOfType([
+    PropTypes11.arrayOf(PropTypes11.oneOfType([PropTypes11.func, PropTypes11.object, PropTypes11.bool])),
+    PropTypes11.func,
+    PropTypes11.object
+  ]),
+  /**
+   * The title of the page. Leave blank to use the active page title.
+   */
+  title: PropTypes11.string
+};
+var Link5 = React26.forwardRef((props, ref) => {
+  const _a = props, { href, history: history2 } = _a, rest = __objRest(_a, ["href", "history"]);
+  return /* @__PURE__ */ jsx(NextLink, __spreadValues({ ref, href, replace: history2 === "replace" }, rest));
+});
+function NextAppProviderApp(props) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const { push, replace } = useRouter();
+  const navigate = React26.useCallback(
+    (url, { history: history2 = "auto" } = {}) => {
+      if (history2 === "auto" || history2 === "push") {
+        return push(String(url));
+      }
+      if (history2 === "replace") {
+        return replace(String(url));
+      }
+      throw new Error(`Invalid history option: ${history2}`);
+    },
+    [push, replace]
+  );
+  const routerImpl = React26.useMemo(
+    () => ({
+      pathname,
+      searchParams,
+      navigate,
+      Link: Link5
+    }),
+    [pathname, navigate, searchParams]
+  );
+  return /* @__PURE__ */ jsx(AppProvider, __spreadValues({ router: routerImpl }, props));
+}
+function NextAppProvider(props) {
+  const AppProvider2 = NextAppProviderApp;
+  return /* @__PURE__ */ jsx(AppProvider2, __spreadValues({}, props));
+}
+
+export { Account, AccountPopoverFooter, AccountPopoverHeader, AccountPreview, AlertDialog, AppProvider, AuthenticationContext, ConfirmDialog, DashboardHeader, DashboardLayout, DashboardSidebarPageItem, DialogsProvider, LocalizationContext, LocalizationProvider, NextAppProvider, NotificationsProvider, PageContainer, PageHeader, PageHeaderToolbar, PromptDialog, SessionContext, SignInButton, SignOutButton, ThemeSwitcher, ToolbarActions, en_default as en, useActivePage, useDialogs, useLocalStorageState, useLocaleText, useNotifications, useStorageState, useStorageStateServer };