@iowas/toolpad 1.0.0

package/dist/chunk-ZXM3V5SD.mjs

@@ -0,0 +1,2325 @@
+import {
+  AuthenticationContext,
+  BrandingContext,
+  DashboardSidebarPageItemContext,
+  DialogsContext,
+  NavigationContext,
+  NotificationsContext,
+  PaletteModeContext,
+  RouterContext,
+  SessionContext,
+  WindowContext,
+  useLocaleText
+} from "./chunk-LUTZBKSG.mjs";
+import {
+  warnOnce
+} from "./chunk-F6JD4MSY.mjs";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  useNonNullableContext
+} from "./chunk-3JWXE2JW.mjs";
+
+// src/toolpad-core/Account/Account.tsx
+import * as React7 from "react";
+import PropTypes6 from "prop-types";
+import Popover from "@mui/material/Popover";
+import Divider from "@mui/material/Divider";
+import Stack3 from "@mui/material/Stack";
+
+// src/toolpad-core/Account/SignInButton.tsx
+import * as React4 from "react";
+import PropTypes from "prop-types";
+import Button2 from "@mui/material/Button";
+
+// src/toolpad-core/useNotifications/useNotifications.tsx
+import * as React from "react";
+var serverNotifications = {
+  show: () => {
+    throw new Error("Not supported on server side");
+  },
+  close: () => {
+    throw new Error("Not supported on server side");
+  }
+};
+function useNotifications() {
+  const context = React.useContext(NotificationsContext);
+  if (context) {
+    return context;
+  }
+  return serverNotifications;
+}
+
+// src/toolpad-core/useDialogs/useDialogs.tsx
+import Button from "@mui/material/Button";
+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 invariant from "invariant";
+import * as React2 from "react";
+import useEventCallback from "@mui/utils/useEventCallback";
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultLocaleText = {
+  alert: "Alert",
+  confirm: "Confirm",
+  cancel: "Cancel",
+  ok: "Ok"
+};
+function useDialogLoadingButton(onClose) {
+  const [loading, setLoading] = React2.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 = React2.useContext(WindowContext);
+  const globalLocaleText = useLocaleText();
+  const localeText = __spreadValues(__spreadValues({}, defaultLocaleText), 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(Button, __spreadProps(__spreadValues({ disabled: !open }, okButtonProps), { children: (_b = payload.okText) != null ? _b : localeText.ok })) })
+      ]
+    }
+  );
+}
+function ConfirmDialog({ open, payload, onClose }) {
+  var _a, _b, _c;
+  const appWindowContext = React2.useContext(WindowContext);
+  const globalLocaleText = useLocaleText();
+  const localeText = __spreadValues(__spreadValues({}, defaultLocaleText), 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(Button, __spreadProps(__spreadValues({ autoFocus: true, disabled: !open }, cancelButtonProps), { children: (_b = payload.cancelText) != null ? _b : localeText.cancel })),
+          /* @__PURE__ */ jsx(Button, __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 = React2.useContext(WindowContext);
+  const globalLocaleText = useLocaleText();
+  const localeText = __spreadValues(__spreadValues({}, defaultLocaleText), globalLocaleText);
+  const [input, setInput] = React2.useState("");
+  const cancelButtonProps = useDialogLoadingButton(() => onClose(null));
+  const [loading, setLoading] = React2.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 : "";
+            invariant(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(Button, __spreadProps(__spreadValues({ disabled: !open }, cancelButtonProps), { children: (_b = payload.cancelText) != null ? _b : localeText.cancel })),
+          /* @__PURE__ */ jsx(Button, { 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 React2.useMemo(
+    () => ({
+      alert,
+      confirm,
+      prompt,
+      open,
+      close
+    }),
+    [alert, close, confirm, open, prompt]
+  );
+}
+
+// src/toolpad-core/Account/AccountLocaleContext.tsx
+import * as React3 from "react";
+var AccountLocaleContext = React3.createContext(null);
+
+// src/toolpad-core/Account/SignInButton.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function SignInButton(props) {
+  const authentication = React4.useContext(AuthenticationContext);
+  const globalLocaleText = useLocaleText();
+  const accountLocaleText = React4.useContext(AccountLocaleContext);
+  const localeText = __spreadValues(__spreadValues({}, globalLocaleText), accountLocaleText);
+  return /* @__PURE__ */ jsx2(
+    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: PropTypes.node
+};
+
+// src/toolpad-core/Account/SignOutButton.tsx
+import * as React5 from "react";
+import PropTypes2 from "prop-types";
+import Button3 from "@mui/material/Button";
+import LogoutIcon from "@mui/icons-material/Logout";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function SignOutButton(props) {
+  const authentication = React5.useContext(AuthenticationContext);
+  const globalLocaleText = useLocaleText();
+  const accountLocaleText = React5.useContext(AccountLocaleContext);
+  const localeText = __spreadValues(__spreadValues({}, globalLocaleText), accountLocaleText);
+  return /* @__PURE__ */ jsx3(
+    Button3,
+    __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__ */ jsx3(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: PropTypes2.node
+};
+
+// src/toolpad-core/Account/AccountPreview.tsx
+import * as React6 from "react";
+import PropTypes3 from "prop-types";
+import Avatar from "@mui/material/Avatar";
+import Typography from "@mui/material/Typography";
+import Tooltip from "@mui/material/Tooltip";
+import Stack from "@mui/material/Stack";
+import IconButton from "@mui/material/IconButton";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function AccountPreview(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const { slots, variant = "condensed", slotProps, open, handleClick, sx } = props;
+  const session = React6.useContext(SessionContext);
+  const globalLocaleText = useLocaleText();
+  const accountLocaleText = React6.useContext(AccountLocaleContext);
+  const localeText = __spreadValues(__spreadValues({}, globalLocaleText), accountLocaleText);
+  if (!session || !session.user) {
+    return null;
+  }
+  const avatarContent = (slots == null ? void 0 : slots.avatar) ? /* @__PURE__ */ jsx4(slots.avatar, {}) : /* @__PURE__ */ jsx4(
+    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__ */ jsxs2(Stack, { direction: "row", justifyContent: "space-between", sx: __spreadValues({ py: 1, px: 2, gap: 2 }, sx), children: [
+      /* @__PURE__ */ jsxs2(Stack, { direction: "row", justifyContent: "flex-start", spacing: 2, overflow: "hidden", children: [
+        avatarContent,
+        /* @__PURE__ */ jsxs2(Stack, { direction: "column", justifyContent: "space-evenly", overflow: "hidden", children: [
+          /* @__PURE__ */ jsx4(Typography, { variant: "body2", fontWeight: "bolder", noWrap: true, children: (_d = session.user) == null ? void 0 : _d.name }),
+          /* @__PURE__ */ jsx4(Typography, { variant: "caption", noWrap: true, children: (_e = session.user) == null ? void 0 : _e.email })
+        ] })
+      ] }),
+      handleClick && ((slots == null ? void 0 : slots.moreIconButton) ? /* @__PURE__ */ jsx4(slots.moreIconButton, {}) : /* @__PURE__ */ jsx4(
+        IconButton,
+        __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__ */ jsx4(MoreVertIcon, { fontSize: "small" })
+        })
+      ))
+    ] });
+  }
+  return /* @__PURE__ */ jsx4(Tooltip, { title: (_g = session.user.name) != null ? _g : accountLocaleText == null ? void 0 : accountLocaleText.accountPreviewTitle, children: (slots == null ? void 0 : slots.avatarIconButton) ? /* @__PURE__ */ jsx4(slots.avatarIconButton, __spreadValues({}, slotProps == null ? void 0 : slotProps.avatarIconButton)) : /* @__PURE__ */ jsx4(Stack, { sx: __spreadValues({ py: 0.5 }, sx), children: /* @__PURE__ */ jsx4(
+    IconButton,
+    __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: PropTypes3.func,
+  /**
+   * The state of the Account popover
+   * @default false
+   */
+  open: PropTypes3.bool,
+  /**
+   * The props used for each slot inside.
+   */
+  slotProps: PropTypes3.shape({
+    avatar: PropTypes3.object,
+    avatarIconButton: PropTypes3.object,
+    moreIconButton: PropTypes3.object
+  }),
+  /**
+   * The components used for each slot inside.
+   */
+  slots: PropTypes3.shape({
+    avatar: PropTypes3.elementType,
+    avatarIconButton: PropTypes3.elementType,
+    moreIconButton: PropTypes3.elementType
+  }),
+  /**
+   * The prop used to customize the styling of the preview
+   */
+  sx: PropTypes3.oneOfType([
+    PropTypes3.arrayOf(PropTypes3.oneOfType([PropTypes3.func, PropTypes3.object, PropTypes3.bool])),
+    PropTypes3.func,
+    PropTypes3.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: PropTypes3.oneOf(["condensed", "expanded"])
+};
+
+// src/toolpad-core/Account/AccountPopoverHeader.tsx
+import PropTypes4 from "prop-types";
+import Stack2 from "@mui/material/Stack";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function AccountPopoverHeader(props) {
+  const _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
+  return /* @__PURE__ */ jsx5(Stack2, __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: PropTypes4.node
+};
+
+// src/toolpad-core/Account/AccountPopoverFooter.tsx
+import PropTypes5 from "prop-types";
+import Box from "@mui/material/Box";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function AccountPopoverFooter(props) {
+  const _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
+  return /* @__PURE__ */ jsx6(
+    Box,
+    __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: PropTypes5.node,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes5.oneOfType([
+    PropTypes5.arrayOf(PropTypes5.oneOfType([PropTypes5.func, PropTypes5.object, PropTypes5.bool])),
+    PropTypes5.func,
+    PropTypes5.object
+  ])
+};
+
+// src/toolpad-core/Account/Account.tsx
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+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 = React7.useMemo(
+    () => __spreadValues(__spreadValues(__spreadValues({}, defaultAccountLocaleText), globalLocaleText), propsLocaleText),
+    [globalLocaleText, propsLocaleText]
+  );
+  const { slots, slotProps } = props;
+  const [anchorEl, setAnchorEl] = React7.useState(null);
+  const session = React7.useContext(SessionContext);
+  const authentication = React7.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__ */ jsx7(slots.signInButton, { onClick: authentication.signIn }) : /* @__PURE__ */ jsx7(SignInButton, __spreadValues({}, slotProps == null ? void 0 : slotProps.signInButton));
+  } else {
+    accountContent = /* @__PURE__ */ jsxs3(React7.Fragment, { children: [
+      (slots == null ? void 0 : slots.preview) ? /* @__PURE__ */ jsx7(slots.preview, { handleClick, open }) : /* @__PURE__ */ jsx7(
+        AccountPreview,
+        __spreadValues({
+          variant: "condensed",
+          handleClick,
+          open
+        }, slotProps == null ? void 0 : slotProps.preview)
+      ),
+      (slots == null ? void 0 : slots.popover) ? /* @__PURE__ */ jsx7(
+        slots.popover,
+        __spreadValues({
+          open,
+          onClick: handleClick,
+          onClose: handleClose
+        }, slotProps == null ? void 0 : slotProps.popover)
+      ) : /* @__PURE__ */ jsx7(
+        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__ */ jsx7(slots.popoverContent, __spreadValues({}, slotProps == null ? void 0 : slotProps.popoverContent)) : /* @__PURE__ */ jsxs3(Stack3, __spreadProps(__spreadValues({ direction: "column" }, slotProps == null ? void 0 : slotProps.popoverContent), { children: [
+            /* @__PURE__ */ jsx7(AccountPopoverHeader, { children: /* @__PURE__ */ jsx7(AccountPreview, { variant: "expanded" }) }),
+            /* @__PURE__ */ jsx7(Divider, {}),
+            /* @__PURE__ */ jsx7(AccountPopoverFooter, { children: /* @__PURE__ */ jsx7(SignOutButton, __spreadValues({}, slotProps == null ? void 0 : slotProps.signOutButton)) })
+          ] }))
+        })
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx7(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: PropTypes6.object,
+  /**
+   * The props used for each slot inside.
+   */
+  slotProps: PropTypes6.shape({
+    popover: PropTypes6.object,
+    popoverContent: PropTypes6.object,
+    preview: PropTypes6.shape({
+      handleClick: PropTypes6.func,
+      open: PropTypes6.bool,
+      slotProps: PropTypes6.shape({
+        avatar: PropTypes6.object,
+        avatarIconButton: PropTypes6.object,
+        moreIconButton: PropTypes6.object
+      }),
+      slots: PropTypes6.shape({
+        avatar: PropTypes6.elementType,
+        avatarIconButton: PropTypes6.elementType,
+        moreIconButton: PropTypes6.elementType
+      }),
+      sx: PropTypes6.oneOfType([
+        PropTypes6.arrayOf(PropTypes6.oneOfType([PropTypes6.func, PropTypes6.object, PropTypes6.bool])),
+        PropTypes6.func,
+        PropTypes6.object
+      ]),
+      variant: PropTypes6.oneOf(["condensed", "expanded"])
+    }),
+    signInButton: PropTypes6.object,
+    signOutButton: PropTypes6.object
+  }),
+  /**
+   * The components used for each slot inside.
+   */
+  slots: PropTypes6.shape({
+    popover: PropTypes6.elementType,
+    popoverContent: PropTypes6.elementType,
+    preview: PropTypes6.elementType,
+    signInButton: PropTypes6.elementType,
+    signOutButton: PropTypes6.elementType
+  })
+};
+
+// src/toolpad-core/DashboardLayout/DashboardLayout.tsx
+import * as React16 from "react";
+import PropTypes9 from "prop-types";
+import { useTheme as useTheme3 } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import Box4 from "@mui/material/Box";
+import Drawer from "@mui/material/Drawer";
+import Toolbar2 from "@mui/material/Toolbar";
+
+// src/toolpad-core/DashboardLayout/DashboardHeader.tsx
+import * as React12 from "react";
+import PropTypes7 from "prop-types";
+import { styled as styled2 } from "@mui/material/styles";
+import Box2 from "@mui/material/Box";
+import MuiAppBar from "@mui/material/AppBar";
+import IconButton3 from "@mui/material/IconButton";
+import Toolbar from "@mui/material/Toolbar";
+import Tooltip3 from "@mui/material/Tooltip";
+import MenuIcon from "@mui/icons-material/Menu";
+import MenuOpenIcon from "@mui/icons-material/MenuOpen";
+import Stack6 from "@mui/material/Stack";
+
+// src/toolpad-core/DashboardLayout/AppTitle.tsx
+import Typography2 from "@mui/material/Typography";
+import Stack4 from "@mui/material/Stack";
+import { styled, useTheme } from "@mui/material";
+
+// src/toolpad-core/shared/Link.tsx
+import * as React8 from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var DefaultLink = React8.forwardRef(function Link(props, ref) {
+  const _a = props, { children, href, onClick, history } = _a, rest = __objRest(_a, ["children", "href", "onClick", "history"]);
+  const routerContext = React8.useContext(RouterContext);
+  const handleLinkClick = React8.useMemo(() => {
+    if (!routerContext) {
+      return onClick;
+    }
+    return (event) => {
+      event.preventDefault();
+      const url = new URL(event.currentTarget.href);
+      routerContext.navigate(url.pathname, { history });
+      onClick == null ? void 0 : onClick(event);
+    };
+  }, [routerContext, onClick, history]);
+  return /* @__PURE__ */ jsx8("a", __spreadProps(__spreadValues({ ref, href }, rest), { onClick: handleLinkClick, children }));
+});
+var Link2 = React8.forwardRef(function Link3(props, ref) {
+  var _a;
+  const routerContext = React8.useContext(RouterContext);
+  const LinkComponent = (_a = routerContext == null ? void 0 : routerContext.Link) != null ? _a : DefaultLink;
+  return /* @__PURE__ */ jsx8(LinkComponent, __spreadProps(__spreadValues({ ref }, props), { children: props.children }));
+});
+
+// src/toolpad-core/DashboardLayout/ToolpadLogo.tsx
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+function ToolpadLogo({ size = 40 }) {
+  return /* @__PURE__ */ jsxs4("svg", { width: size, height: size, fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsxs4("g", { mask: "url(#a)", children: [
+      /* @__PURE__ */ jsx9("path", { d: "M22.74 27.73v-7.6l6.64-3.79v7.6l-6.64 3.79Z", fill: "#007FFF" }),
+      /* @__PURE__ */ jsx9("path", { d: "M16.1 23.93v-7.59l6.64 3.8v7.59l-6.65-3.8Z", fill: "#39F" }),
+      /* @__PURE__ */ jsx9("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__ */ jsx9(
+      "mask",
+      {
+        id: "b",
+        style: {
+          maskType: "alpha"
+        },
+        maskUnits: "userSpaceOnUse",
+        x: "8",
+        y: "17",
+        width: "14",
+        height: "15",
+        children: /* @__PURE__ */ jsx9(
+          "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__ */ jsxs4("g", { mask: "url(#b)", children: [
+      /* @__PURE__ */ jsx9("path", { d: "M15.14 32v-7.6l6.65-3.8v7.6L15.14 32Z", fill: "#007FFF" }),
+      /* @__PURE__ */ jsx9("path", { d: "M8.5 28.2v-7.6l6.64 3.8V32L8.5 28.2Z", fill: "#39F" }),
+      /* @__PURE__ */ jsx9("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__ */ jsx9(
+      "mask",
+      {
+        id: "c",
+        style: {
+          maskType: "alpha"
+        },
+        maskUnits: "userSpaceOnUse",
+        x: "8",
+        y: "4",
+        width: "22",
+        height: "20",
+        children: /* @__PURE__ */ jsx9(
+          "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__ */ jsxs4("g", { mask: "url(#c)", children: [
+      /* @__PURE__ */ jsx9("path", { d: "M15.14 23.46v-7.6L29.38 7.8v7.59l-14.24 8.07Z", fill: "#007FFF" }),
+      /* @__PURE__ */ jsx9("path", { d: "M8.5 19.66v-7.6l6.64 3.8v7.6l-6.64-3.8Z", fill: "#39F" }),
+      /* @__PURE__ */ jsx9("path", { d: "M8.5 12.07 22.74 4l6.64 3.8-14.24 8.06-6.64-3.8Z", fill: "#A5D8FF" })
+    ] })
+  ] });
+}
+
+// src/toolpad-core/shared/branding.ts
+import * as React9 from "react";
+function useApplicationTitle() {
+  var _a;
+  const branding = React9.useContext(BrandingContext);
+  return (_a = branding == null ? void 0 : branding.title) != null ? _a : "Toolpad";
+}
+
+// src/toolpad-core/DashboardLayout/AppTitle.tsx
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+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();
+  const defaultTitle = useApplicationTitle();
+  const title = (_b = (_a = props == null ? void 0 : props.branding) == null ? void 0 : _a.title) != null ? _b : defaultTitle;
+  return /* @__PURE__ */ jsx10(Link2, { href: (_d = (_c = props == null ? void 0 : props.branding) == null ? void 0 : _c.homeUrl) != null ? _d : "/", style: { textDecoration: "none" }, children: /* @__PURE__ */ jsxs5(Stack4, { direction: "row", alignItems: "center", children: [
+    /* @__PURE__ */ jsx10(LogoContainer, { children: (_f = (_e = props == null ? void 0 : props.branding) == null ? void 0 : _e.logo) != null ? _f : /* @__PURE__ */ jsx10(ToolpadLogo, { size: 40 }) }),
+    /* @__PURE__ */ jsx10(
+      Typography2,
+      {
+        variant: "h6",
+        sx: {
+          color: ((_g = theme.vars) != null ? _g : theme).palette.primary.main,
+          fontWeight: "700",
+          ml: 1,
+          whiteSpace: "nowrap",
+          lineHeight: 1
+        },
+        children: title
+      }
+    )
+  ] }) });
+}
+
+// src/toolpad-core/DashboardLayout/ToolbarActions.tsx
+import Stack5 from "@mui/material/Stack";
+
+// src/toolpad-core/DashboardLayout/ThemeSwitcher.tsx
+import * as React11 from "react";
+import { useTheme as useTheme2 } from "@mui/material";
+import IconButton2 from "@mui/material/IconButton";
+import Tooltip2 from "@mui/material/Tooltip";
+import DarkModeIcon from "@mui/icons-material/DarkMode";
+import LightModeIcon from "@mui/icons-material/LightMode";
+
+// src/toolpad-utils/hooks/useSsr.ts
+import * as React10 from "react";
+function subscribe() {
+  return () => {
+  };
+}
+function getSnapshot() {
+  return false;
+}
+function getServerSnapshot() {
+  return true;
+}
+function useSsr() {
+  return React10.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+// src/toolpad-core/DashboardLayout/ThemeSwitcher.tsx
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+function ThemeSwitcher() {
+  var _a;
+  const isSsr = useSsr();
+  const theme = useTheme2();
+  const { paletteMode, setPaletteMode, isDualTheme } = React11.useContext(PaletteModeContext);
+  const toggleMode = React11.useCallback(() => {
+    setPaletteMode(paletteMode === "dark" ? "light" : "dark");
+  }, [paletteMode, setPaletteMode]);
+  return isDualTheme ? /* @__PURE__ */ jsx11(
+    Tooltip2,
+    {
+      title: isSsr ? "Switch mode" : `${paletteMode === "dark" ? "Light" : "Dark"} mode`,
+      enterDelay: 1e3,
+      children: /* @__PURE__ */ jsx11("div", { children: /* @__PURE__ */ jsx11(
+        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__ */ jsxs6(React11.Fragment, { children: [
+            /* @__PURE__ */ jsx11(
+              DarkModeIcon,
+              {
+                sx: {
+                  display: "inline",
+                  [theme.getColorSchemeSelector("dark")]: {
+                    display: "none"
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx11(
+              LightModeIcon,
+              {
+                sx: {
+                  display: "none",
+                  [theme.getColorSchemeSelector("dark")]: {
+                    display: "inline"
+                  }
+                }
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx11(React11.Fragment, { children: isSsr || paletteMode !== "dark" ? /* @__PURE__ */ jsx11(DarkModeIcon, {}) : /* @__PURE__ */ jsx11(LightModeIcon, {}) })
+        }
+      ) })
+    }
+  ) : null;
+}
+
+// src/toolpad-core/DashboardLayout/ToolbarActions.tsx
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+function ToolbarActions() {
+  return /* @__PURE__ */ jsxs7(Stack5, { direction: "row", alignItems: "center", children: [
+    /* @__PURE__ */ jsx12(ThemeSwitcher, {}),
+    /* @__PURE__ */ jsx12(Account, {})
+  ] });
+}
+
+// src/toolpad-core/DashboardLayout/DashboardHeader.tsx
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var AppBar = styled2(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 = React12.useContext(BrandingContext);
+  const branding = __spreadValues(__spreadValues({}, brandingContext), brandingProp);
+  const handleMenuOpen = React12.useCallback(() => {
+    onToggleMenu(!menuOpen);
+  }, [menuOpen, onToggleMenu]);
+  const getMenuIcon = React12.useCallback(
+    (isExpanded) => {
+      const expandMenuActionText = "Expand";
+      const collapseMenuActionText = "Collapse";
+      return /* @__PURE__ */ jsx13(
+        Tooltip3,
+        {
+          title: `${isExpanded ? collapseMenuActionText : expandMenuActionText} menu`,
+          enterDelay: 1e3,
+          children: /* @__PURE__ */ jsx13("div", { children: /* @__PURE__ */ jsx13(
+            IconButton3,
+            {
+              "aria-label": `${isExpanded ? collapseMenuActionText : expandMenuActionText} navigation menu`,
+              onClick: handleMenuOpen,
+              children: isExpanded ? /* @__PURE__ */ jsx13(MenuOpenIcon, {}) : /* @__PURE__ */ jsx13(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__ */ jsx13(AppBar, { color: "inherit", position: "absolute", sx: { displayPrint: "none" }, children: /* @__PURE__ */ jsx13(Toolbar, { sx: { backgroundColor: "inherit", mx: { xs: -0.75, sm: -1 } }, children: /* @__PURE__ */ jsxs8(
+    Stack6,
+    {
+      direction: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      sx: {
+        flexWrap: "wrap",
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsxs8(Stack6, { direction: "row", children: [
+          !hideMenuButton ? /* @__PURE__ */ jsxs8(React12.Fragment, { children: [
+            /* @__PURE__ */ jsx13(
+              Box2,
+              {
+                sx: {
+                  display: { xs: "block", md: "none" },
+                  mr: { sm: 1 }
+                },
+                children: getMenuIcon(menuOpen)
+              }
+            ),
+            /* @__PURE__ */ jsx13(
+              Box2,
+              {
+                sx: {
+                  display: { xs: "none", md: "block" },
+                  mr: 1
+                },
+                children: getMenuIcon(menuOpen)
+              }
+            )
+          ] }) : null,
+          (slots == null ? void 0 : slots.appTitle) ? /* @__PURE__ */ jsx13(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__ */ jsx13(AppTitle, __spreadValues({ branding }, slotProps == null ? void 0 : slotProps.appTitle))
+          )
+        ] }),
+        /* @__PURE__ */ jsxs8(Stack6, { direction: "row", alignItems: "center", spacing: 1, sx: { marginLeft: "auto" }, children: [
+          /* @__PURE__ */ jsx13(ToolbarActionsSlot, __spreadValues({}, slotProps == null ? void 0 : slotProps.toolbarActions)),
+          /* @__PURE__ */ jsx13(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: PropTypes7.shape({
+    homeUrl: PropTypes7.string,
+    logo: PropTypes7.node,
+    title: PropTypes7.string
+  }),
+  /**
+   * Whether the menu icon should always be hidden.
+   * @default false
+   */
+  hideMenuButton: PropTypes7.bool,
+  /**
+   * If `true`, show menu button as if menu is expanded, otherwise show it as if menu is collapsed.
+   */
+  menuOpen: PropTypes7.bool.isRequired,
+  /**
+   * Callback fired when the menu button is clicked.
+   */
+  onToggleMenu: PropTypes7.func.isRequired,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes7.shape({
+    appTitle: PropTypes7.shape({
+      branding: PropTypes7.shape({
+        homeUrl: PropTypes7.string,
+        logo: PropTypes7.node,
+        title: PropTypes7.string
+      })
+    }),
+    toolbarAccount: PropTypes7.shape({
+      localeText: PropTypes7.object,
+      slotProps: PropTypes7.shape({
+        popover: PropTypes7.object,
+        popoverContent: PropTypes7.object,
+        preview: PropTypes7.object,
+        signInButton: PropTypes7.object,
+        signOutButton: PropTypes7.object
+      }),
+      slots: PropTypes7.shape({
+        popover: PropTypes7.elementType,
+        popoverContent: PropTypes7.elementType,
+        preview: PropTypes7.elementType,
+        signInButton: PropTypes7.elementType,
+        signOutButton: PropTypes7.elementType
+      })
+    }),
+    toolbarActions: PropTypes7.object
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes7.shape({
+    appTitle: PropTypes7.elementType,
+    toolbarAccount: PropTypes7.elementType,
+    toolbarActions: PropTypes7.elementType
+  })
+};
+
+// src/toolpad-core/DashboardLayout/DashboardSidebarSubNavigation.tsx
+import * as React15 from "react";
+import Divider2 from "@mui/material/Divider";
+import List from "@mui/material/List";
+import ListSubheader from "@mui/material/ListSubheader";
+
+// src/toolpad-core/shared/navigation.tsx
+import { pathToRegexp } from "path-to-regexp";
+import invariant2 from "invariant";
+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"
+  });
+}
+
+// src/toolpad-core/useActivePage/useActivePage.ts
+import * as React13 from "react";
+function useActivePage() {
+  var _a;
+  const navigationContext = React13.useContext(NavigationContext);
+  const routerContext = React13.useContext(RouterContext);
+  const pathname = (_a = routerContext == null ? void 0 : routerContext.pathname) != null ? _a : "/";
+  const activeItem = matchPath(navigationContext, pathname);
+  const rootItem = matchPath(navigationContext, "/");
+  return React13.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/DashboardSidebarPageItem.tsx
+import * as React14 from "react";
+import PropTypes8 from "prop-types";
+import { styled as styled3 } from "@mui/material";
+import Avatar2 from "@mui/material/Avatar";
+import Box3 from "@mui/material/Box";
+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 Typography3 from "@mui/material/Typography";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import invariant3 from "invariant";
+
+// src/toolpad-core/DashboardLayout/shared.ts
+var MINI_DRAWER_WIDTH = 84;
+
+// src/toolpad-core/DashboardLayout/DashboardSidebarPageItem.tsx
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+var NavigationListItemButton = styled3(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 = React14.useContext(NavigationContext);
+  const pageItemContextProps = React14.useContext(DashboardSidebarPageItemContext);
+  invariant3(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] = React14.useState(
+    null
+  );
+  const handleClick = React14.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__ */ jsxs9(
+    ListItem,
+    __spreadProps(__spreadValues({}, item.children && isMini ? {
+      onMouseEnter: () => {
+        setHoveredMiniSidebarItemId(id);
+      },
+      onMouseLeave: () => {
+        setHoveredMiniSidebarItemId(null);
+      }
+    } : {}), {
+      sx: {
+        py: 0,
+        px: 1,
+        overflowX: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxs9(
+          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__ */ jsxs9(
+                Box3,
+                {
+                  sx: isMini ? {
+                    position: "absolute",
+                    left: "50%",
+                    top: "calc(50% - 6px)",
+                    transform: "translate(-50%, -50%)"
+                  } : {},
+                  children: [
+                    /* @__PURE__ */ jsxs9(
+                      ListItemIcon,
+                      {
+                        sx: {
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          minWidth: LIST_ITEM_ICON_SIZE
+                        },
+                        children: [
+                          (_a = item.icon) != null ? _a : null,
+                          !item.icon && isMini ? /* @__PURE__ */ jsx14(
+                            Avatar2,
+                            {
+                              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__ */ jsx14(
+                      Typography3,
+                      {
+                        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__ */ jsx14(
+                ListItemText,
+                {
+                  primary: title,
+                  sx: {
+                    ml: 1.2,
+                    whiteSpace: "nowrap",
+                    zIndex: 1
+                  }
+                }
+              ) : null,
+              item.action && !isMini && isSidebarFullyExpanded ? item.action : null,
+              item.children ? /* @__PURE__ */ jsx14(ExpandMoreIcon, { sx: nestedNavigationCollapseSx }) : null
+            ]
+          })
+        ),
+        item.children && isMini ? /* @__PURE__ */ jsx14(Grow, { in: id === hoveredMiniSidebarItemId, children: /* @__PURE__ */ jsx14(
+          Box3,
+          {
+            sx: {
+              position: "fixed",
+              left: MINI_DRAWER_WIDTH - 2,
+              pl: "6px"
+            },
+            children: /* @__PURE__ */ jsx14(
+              Paper,
+              {
+                sx: {
+                  pt: 0.5,
+                  pb: 0.5,
+                  transform: "translateY(calc(50% - 30px))"
+                },
+                children: renderNestedNavigation(item.children)
+              }
+            )
+          }
+        ) }) : null
+      ]
+    })
+  );
+  return /* @__PURE__ */ jsxs9(React14.Fragment, { children: [
+    listItem,
+    item.children && !isMini ? /* @__PURE__ */ jsx14(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: PropTypes8.bool,
+  /**
+   * If `true`, expands any nested navigation in the item, otherwise collapse it.
+   * @default false
+   */
+  expanded: PropTypes8.bool,
+  /**
+   * Link `href` for when the item is rendered as a link.
+   * @default getItemPath(navigationContext, item)
+   */
+  href: PropTypes8.string,
+  /**
+   * Navigation page item definition.
+   */
+  item: PropTypes8.shape({
+    action: PropTypes8.node,
+    children: PropTypes8.arrayOf(
+      PropTypes8.oneOfType([
+        PropTypes8.object,
+        PropTypes8.shape({
+          kind: PropTypes8.oneOf(["header"]).isRequired,
+          title: PropTypes8.string.isRequired
+        }),
+        PropTypes8.shape({
+          kind: PropTypes8.oneOf(["divider"]).isRequired
+        })
+      ]).isRequired
+    ),
+    icon: PropTypes8.node,
+    kind: PropTypes8.oneOf(["page"]),
+    pattern: PropTypes8.string,
+    segment: PropTypes8.string,
+    title: PropTypes8.string
+  }).isRequired,
+  /**
+   * The component used to render the item as a link.
+   * @default Link
+   */
+  LinkComponent: PropTypes8.elementType,
+  /**
+   * Use to apply selected styling.
+   * @default false
+   */
+  selected: PropTypes8.bool
+};
+
+// src/toolpad-core/DashboardLayout/DashboardSidebarSubNavigation.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+function DashboardSidebarSubNavigationPageItem({
+  id,
+  item,
+  isExpanded,
+  onClick,
+  depth,
+  onLinkClick,
+  isMini,
+  isFullyExpanded,
+  isFullyCollapsed,
+  sidebarExpandedWidth,
+  renderPageItem
+}) {
+  const navigationContext = React15.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 = React15.useMemo(
+    () => ({
+      expanded: isExpanded,
+      selected: isSelected,
+      id,
+      onClick,
+      isMini,
+      isSidebarFullyExpanded: isFullyExpanded,
+      isSidebarFullyCollapsed: isFullyCollapsed,
+      renderNestedNavigation: () => {
+        var _a;
+        return /* @__PURE__ */ jsx15(
+          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__ */ jsx15(DashboardSidebarPageItemContext.Provider, { value: pageItemContextProps, children: renderPageItem ? renderPageItem(item, { mini: isMini }) : /* @__PURE__ */ jsx15(DashboardSidebarPageItem, { item }) });
+}
+function DashboardSidebarSubNavigation({
+  subNavigation,
+  depth = 0,
+  onLinkClick,
+  isMini = false,
+  isPopover = false,
+  isFullyExpanded = true,
+  isFullyCollapsed = false,
+  hasDrawerTransitions = false,
+  sidebarExpandedWidth,
+  renderPageItem
+}) {
+  const navigationContext = React15.useContext(NavigationContext);
+  const activePage = useActivePage();
+  const initialExpandedItemIds = React15.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] = React15.useState(initialExpandedItemIds);
+  const handlePageItemClick = React15.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__ */ jsx15(
+    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__ */ jsx15(
+            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__ */ jsx15("li", { children: /* @__PURE__ */ jsx15(
+            Divider2,
+            {
+              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__ */ jsx15(
+          DashboardSidebarSubNavigationPageItem,
+          {
+            id: pageItemId,
+            item: navigationItem,
+            isExpanded: expandedItemIds.includes(pageItemId),
+            onClick: handlePageItemClick,
+            depth,
+            onLinkClick,
+            isMini,
+            isFullyExpanded,
+            isFullyCollapsed,
+            sidebarExpandedWidth,
+            renderPageItem
+          },
+          pageItemId
+        );
+      })
+    }
+  );
+}
+
+// src/toolpad-core/DashboardLayout/DashboardLayout.tsx
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+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 = useTheme3();
+  const navigationContext = React16.useContext(NavigationContext);
+  const appWindowContext = React16.useContext(WindowContext);
+  const navigation = navigationProp != null ? navigationProp : navigationContext;
+  const [isDesktopNavigationExpanded, setIsDesktopNavigationExpanded] = React16.useState(!defaultSidebarCollapsed);
+  const [isMobileNavigationExpanded, setIsMobileNavigationExpanded] = React16.useState(false);
+  const isOverSmViewport = useMediaQuery(
+    theme.breakpoints.up("sm"),
+    appWindowContext && {
+      matchMedia: appWindowContext.matchMedia
+    }
+  );
+  const isOverMdViewport = useMediaQuery(
+    theme.breakpoints.up("md"),
+    appWindowContext && {
+      matchMedia: appWindowContext.matchMedia
+    }
+  );
+  const isNavigationExpanded = isOverMdViewport ? isDesktopNavigationExpanded : isMobileNavigationExpanded;
+  const setIsNavigationExpanded = React16.useCallback(
+    (newExpanded) => {
+      if (isOverMdViewport) {
+        setIsDesktopNavigationExpanded(newExpanded);
+      } else {
+        setIsMobileNavigationExpanded(newExpanded);
+      }
+    },
+    [isOverMdViewport]
+  );
+  const [isNavigationFullyExpanded, setIsNavigationFullyExpanded] = React16.useState(isNavigationExpanded);
+  const [isNavigationFullyCollapsed, setIsNavigationFullyCollapsed] = React16.useState(!isNavigationExpanded);
+  React16.useEffect(() => {
+    if (isNavigationExpanded) {
+      const drawerWidthTransitionTimeout = setTimeout(() => {
+        setIsNavigationFullyExpanded(true);
+      }, theme.transitions.duration.enteringScreen);
+      return () => clearTimeout(drawerWidthTransitionTimeout);
+    }
+    setIsNavigationFullyExpanded(false);
+    return () => {
+    };
+  }, [isNavigationExpanded, theme]);
+  React16.useEffect(() => {
+    if (!isNavigationExpanded) {
+      const drawerWidthTransitionTimeout = setTimeout(() => {
+        setIsNavigationFullyCollapsed(true);
+      }, theme.transitions.duration.leavingScreen);
+      return () => clearTimeout(drawerWidthTransitionTimeout);
+    }
+    setIsNavigationFullyCollapsed(false);
+    return () => {
+    };
+  }, [isNavigationExpanded, theme]);
+  const handleSetNavigationExpanded = React16.useCallback(
+    (newExpanded) => () => {
+      setIsNavigationExpanded(newExpanded);
+    },
+    [setIsNavigationExpanded]
+  );
+  const handleToggleHeaderMenu = React16.useCallback(
+    (isExpanded) => {
+      setIsNavigationExpanded(isExpanded);
+    },
+    [setIsNavigationExpanded]
+  );
+  const handleNavigationLinkClick = React16.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 = React16.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 = React16.useCallback(
+    (isMini, viewport) => {
+      var _a2;
+      return /* @__PURE__ */ jsxs10(React16.Fragment, { children: [
+        /* @__PURE__ */ jsx16(Toolbar2, {}),
+        /* @__PURE__ */ jsxs10(
+          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__ */ jsx16(
+                DashboardSidebarSubNavigation,
+                {
+                  subNavigation: navigation,
+                  onLinkClick: handleNavigationLinkClick,
+                  isMini,
+                  isFullyExpanded: isNavigationFullyExpanded,
+                  isFullyCollapsed: isNavigationFullyCollapsed,
+                  hasDrawerTransitions,
+                  sidebarExpandedWidth,
+                  renderPageItem
+                }
+              ),
+              SidebarFooterSlot ? /* @__PURE__ */ jsx16(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 = React16.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__ */ jsxs10(
+    Box4,
+    {
+      sx: __spreadValues({
+        position: "relative",
+        display: "flex",
+        overflow: "hidden",
+        height: "100vh",
+        width: "100vw"
+      }, sx),
+      children: [
+        /* @__PURE__ */ jsx16(HeaderSlot, __spreadValues({}, headerSlotProps)),
+        !hideNavigation ? /* @__PURE__ */ jsxs10(React16.Fragment, { children: [
+          /* @__PURE__ */ jsx16(
+            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__ */ jsx16(
+            Drawer,
+            {
+              variant: "permanent",
+              sx: __spreadValues({
+                display: {
+                  xs: "none",
+                  sm: disableCollapsibleSidebar ? "none" : "block",
+                  md: "none"
+                }
+              }, getDrawerSharedSx(isMobileMini, false)),
+              children: getDrawerContent(isMobileMini, "tablet")
+            }
+          ),
+          /* @__PURE__ */ jsx16(
+            Drawer,
+            {
+              variant: "permanent",
+              sx: __spreadValues({
+                display: { xs: "none", md: "block" }
+              }, getDrawerSharedSx(isDesktopMini, false)),
+              children: getDrawerContent(isDesktopMini, "desktop")
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ jsxs10(
+          Box4,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              flex: 1,
+              minWidth: 0
+            },
+            children: [
+              /* @__PURE__ */ jsx16(Toolbar2, { sx: { displayPrint: "none" } }),
+              /* @__PURE__ */ jsx16(
+                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: PropTypes9.shape({
+    homeUrl: PropTypes9.string,
+    logo: PropTypes9.node,
+    title: PropTypes9.string
+  }),
+  /**
+   * The content of the dashboard.
+   */
+  children: PropTypes9.node,
+  /**
+   * Whether the sidebar should start collapsed in desktop size screens.
+   * @default false
+   */
+  defaultSidebarCollapsed: PropTypes9.bool,
+  /**
+   * Whether the sidebar should not be collapsible to a mini variant in desktop and tablet viewports.
+   * @default false
+   */
+  disableCollapsibleSidebar: PropTypes9.bool,
+  /**
+   * Whether the navigation bar and menu icon should be hidden.
+   * @default false
+   */
+  hideNavigation: PropTypes9.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: PropTypes9.arrayOf(
+    PropTypes9.oneOfType([
+      PropTypes9.shape({
+        action: PropTypes9.node,
+        children: PropTypes9.arrayOf(
+          PropTypes9.oneOfType([
+            PropTypes9.object,
+            PropTypes9.shape({
+              kind: PropTypes9.oneOf(["header"]).isRequired,
+              title: PropTypes9.string.isRequired
+            }),
+            PropTypes9.shape({
+              kind: PropTypes9.oneOf(["divider"]).isRequired
+            })
+          ]).isRequired
+        ),
+        icon: PropTypes9.node,
+        kind: PropTypes9.oneOf(["page"]),
+        pattern: PropTypes9.string,
+        segment: PropTypes9.string,
+        title: PropTypes9.string
+      }),
+      PropTypes9.shape({
+        kind: PropTypes9.oneOf(["header"]).isRequired,
+        title: PropTypes9.string.isRequired
+      }),
+      PropTypes9.shape({
+        kind: PropTypes9.oneOf(["divider"]).isRequired
+      })
+    ]).isRequired
+  ),
+  /**
+   * Render each page item.
+   *
+   * @param {NavigationPageItem} item
+   * @param {{ mini: boolean }} params
+   * @returns {ReactNode}
+   */
+  renderPageItem: PropTypes9.func,
+  /**
+   * Width of the sidebar when expanded.
+   * @default 320
+   */
+  sidebarExpandedWidth: PropTypes9.oneOfType([PropTypes9.number, PropTypes9.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes9.shape({
+    appTitle: PropTypes9.shape({
+      branding: PropTypes9.shape({
+        homeUrl: PropTypes9.string,
+        logo: PropTypes9.node,
+        title: PropTypes9.string
+      })
+    }),
+    header: PropTypes9.shape({
+      branding: PropTypes9.shape({
+        homeUrl: PropTypes9.string,
+        logo: PropTypes9.node,
+        title: PropTypes9.string
+      }),
+      hideMenuButton: PropTypes9.bool,
+      menuOpen: PropTypes9.bool.isRequired,
+      onToggleMenu: PropTypes9.func.isRequired,
+      slotProps: PropTypes9.shape({
+        appTitle: PropTypes9.object,
+        toolbarAccount: PropTypes9.object,
+        toolbarActions: PropTypes9.object
+      }),
+      slots: PropTypes9.shape({
+        appTitle: PropTypes9.elementType,
+        toolbarAccount: PropTypes9.elementType,
+        toolbarActions: PropTypes9.elementType
+      })
+    }),
+    sidebarFooter: PropTypes9.shape({
+      mini: PropTypes9.bool.isRequired
+    }),
+    toolbarAccount: PropTypes9.shape({
+      localeText: PropTypes9.object,
+      slotProps: PropTypes9.shape({
+        popover: PropTypes9.object,
+        popoverContent: PropTypes9.object,
+        preview: PropTypes9.object,
+        signInButton: PropTypes9.object,
+        signOutButton: PropTypes9.object
+      }),
+      slots: PropTypes9.shape({
+        popover: PropTypes9.elementType,
+        popoverContent: PropTypes9.elementType,
+        preview: PropTypes9.elementType,
+        signInButton: PropTypes9.elementType,
+        signOutButton: PropTypes9.elementType
+      })
+    }),
+    toolbarActions: PropTypes9.object
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes9.shape({
+    appTitle: PropTypes9.elementType,
+    header: PropTypes9.elementType,
+    sidebarFooter: PropTypes9.elementType,
+    toolbarAccount: PropTypes9.elementType,
+    toolbarActions: PropTypes9.elementType
+  }),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes9.oneOfType([
+    PropTypes9.arrayOf(PropTypes9.oneOfType([PropTypes9.func, PropTypes9.object, PropTypes9.bool])),
+    PropTypes9.func,
+    PropTypes9.object
+  ])
+};
+
+// src/toolpad-core/PageContainer/PageContainer.tsx
+import PropTypes12 from "prop-types";
+import Box5 from "@mui/material/Box";
+import Container from "@mui/material/Container";
+import Stack8 from "@mui/material/Stack";
+
+// src/toolpad-core/PageContainer/PageHeader.tsx
+import PropTypes11 from "prop-types";
+import Breadcrumbs from "@mui/material/Breadcrumbs";
+import Link4 from "@mui/material/Link";
+import Stack7 from "@mui/material/Stack";
+import Typography4 from "@mui/material/Typography";
+import useSlotProps from "@mui/utils/useSlotProps";
+import { styled as styled5 } from "@mui/material";
+
+// src/toolpad-core/PageContainer/PageHeaderToolbar.tsx
+import PropTypes10 from "prop-types";
+import { styled as styled4 } from "@mui/material";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var PageHeaderToolbarRoot = styled4("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__ */ jsx17(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: PropTypes10.node
+};
+
+// src/toolpad-core/PageContainer/PageHeader.tsx
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+var PageContentHeader = styled5("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__ */ jsxs11(Stack7, { children: [
+    /* @__PURE__ */ jsx18(Breadcrumbs, { "aria-label": "breadcrumb", children: resolvedBreadcrumbs ? resolvedBreadcrumbs.map((item, index) => {
+      return item.path ? /* @__PURE__ */ jsx18(
+        Link4,
+        {
+          component: Link2,
+          underline: "hover",
+          color: "inherit",
+          href: item.path,
+          children: getItemTitle(item)
+        },
+        index
+      ) : /* @__PURE__ */ jsx18(Typography4, { color: "text.primary", children: getItemTitle(item) }, index);
+    }) : null }),
+    /* @__PURE__ */ jsxs11(PageContentHeader, { children: [
+      resolvedTitle ? /* @__PURE__ */ jsx18(Typography4, { variant: "h4", children: resolvedTitle }) : null,
+      /* @__PURE__ */ jsx18(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
+};
+
+// src/toolpad-core/PageContainer/PageContainer.tsx
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+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__ */ jsx19(Container, __spreadProps(__spreadValues({}, rest), { sx: __spreadValues({ flex: 1, display: "flex", flexDirection: "column" }, rest.sx), children: /* @__PURE__ */ jsxs12(Stack8, { sx: { flex: 1, my: 2 }, spacing: 2, children: [
+    /* @__PURE__ */ jsx19(PageHeaderSlot, __spreadValues({ title, breadcrumbs }, slotProps == null ? void 0 : slotProps.header)),
+    /* @__PURE__ */ jsx19(Box5, { 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: PropTypes12.arrayOf(
+    PropTypes12.shape({
+      path: PropTypes12.string,
+      title: PropTypes12.string.isRequired
+    })
+  ),
+  /**
+   * @ignore
+   */
+  children: PropTypes12.node,
+  /**
+   * The props used for each slot inside.
+   */
+  slotProps: PropTypes12.shape({
+    header: PropTypes12.shape({
+      breadcrumbs: PropTypes12.arrayOf(
+        PropTypes12.shape({
+          path: PropTypes12.string,
+          title: PropTypes12.string.isRequired
+        })
+      ),
+      slotProps: PropTypes12.shape({
+        toolbar: PropTypes12.object.isRequired
+      }),
+      slots: PropTypes12.shape({
+        toolbar: PropTypes12.elementType
+      }),
+      title: PropTypes12.string
+    }).isRequired
+  }),
+  /**
+   * The components used for each slot inside.
+   */
+  slots: PropTypes12.shape({
+    header: PropTypes12.elementType
+  }),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes12.oneOfType([
+    PropTypes12.arrayOf(PropTypes12.oneOfType([PropTypes12.func, PropTypes12.object, PropTypes12.bool])),
+    PropTypes12.func,
+    PropTypes12.object
+  ]),
+  /**
+   * The title of the page. Leave blank to use the active page title.
+   */
+  title: PropTypes12.string
+};
+
+export {
+  useNotifications,
+  AlertDialog,
+  ConfirmDialog,
+  PromptDialog,
+  useDialogs,
+  SignInButton,
+  SignOutButton,
+  AccountPreview,
+  AccountPopoverHeader,
+  AccountPopoverFooter,
+  Account,
+  ThemeSwitcher,
+  ToolbarActions,
+  DashboardHeader,
+  useActivePage,
+  DashboardSidebarPageItem,
+  DashboardLayout,
+  PageHeaderToolbar,
+  PageHeader,
+  PageContainer
+};