@hybridcore/ui 1.1.0 → 1.1.2

package/dist/components/context-menu/index.js

@@ -1,156 +1,146 @@
 import { jsx as b, jsxs as U, Fragment as ye } from "react/jsx-runtime";
 import * as l from "react";
 import { P as t } from "../../createTheme-agWfFD64.js";
-import { u as H, a as be, B as se, b as ne, e as ge } from "../../ButtonBase-B6WYZgVU.js";
+import { B as se, u as ne, a as H, e as be, b as ge } from "../../ButtonBase-BYmh3G5j.js";
 import { o as z } from "../../ownerDocument-CUrv0DIK.js";
 import { e as ve, a as Ie } from "../../exactProp-CI8dagM-.js";
-import { L, g as Ce, l as ee, a as xe, b as he } from "../../List-BX_5LP1i.js";
+import { L, g as Ce, l as ee, a as xe, b as he } from "../../listItemTextClasses-BvXFz-Oc.js";
 import { a as u, _ as $ } from "../../extends-C3382pL0.js";
-import { u as M, c as T, a as w, g as Y, b as Le } from "../../chainPropTypes-DtBfUj5o.js";
-import { s as A, g as q, r as Te, a as h } from "../../styled-Iq9jsO4F.js";
+import { g as Y, u as M, c as T, a as w, b as Le } from "../../chainPropTypes-DtBfUj5o.js";
+import { g as q, s as A, r as Te, a as h } from "../../styled-Iq9jsO4F.js";
 import { i as ae } from "../../isMuiElement-CxT3_ACP.js";
 import { i as te } from "../../isHostComponent-kiaBvYVo.js";
 import { T as F } from "../../Typography-XIiVCSto.js";
-function oe(e) {
-  return e.substring(2).toLowerCase();
+function Oe(e) {
+  return q("MuiListItem", e);
 }
-function Oe(e, o) {
-  return o.documentElement.clientWidth < e.clientX || o.documentElement.clientHeight < e.clientY;
+const P = Y("MuiListItem", ["root", "container", "focusVisible", "dense", "alignItemsFlexStart", "disabled", "divider", "gutters", "padding", "button", "secondaryAction", "selected"]);
+function Re(e) {
+  return q("MuiListItemButton", e);
 }
-function _(e) {
+const E = Y("MuiListItemButton", ["root", "focusVisible", "dense", "alignItemsFlexStart", "disabled", "divider", "gutters", "selected"]), Ne = ["alignItems", "autoFocus", "component", "children", "dense", "disableGutters", "divider", "focusVisibleClassName", "selected", "className"], Pe = (e, o) => {
   const {
-    children: o,
-    disableReactTree: s = !1,
-    mouseEvent: n = "onClick",
-    onClickAway: c,
-    touchEvent: i = "onTouchEnd"
-  } = e, d = l.useRef(!1), r = l.useRef(null), m = l.useRef(!1), f = l.useRef(!1);
-  l.useEffect(() => (setTimeout(() => {
-    m.current = !0;
-  }, 0), () => {
-    m.current = !1;
-  }), []);
-  const C = H(
-    // @ts-expect-error TODO upstream fix
-    o.ref,
-    r
-  ), g = be((a) => {
-    const p = f.current;
-    f.current = !1;
-    const y = z(r.current);
-    if (!m.current || !r.current || "clientX" in a && Oe(a, y))
-      return;
-    if (d.current) {
-      d.current = !1;
-      return;
-    }
-    let v;
-    a.composedPath ? v = a.composedPath().indexOf(r.current) > -1 : v = !y.documentElement.contains(
-      // @ts-expect-error returns `false` as intended when not dispatched from a Node
-      a.target
-    ) || r.current.contains(
-      // @ts-expect-error returns `false` as intended when not dispatched from a Node
-      a.target
-    ), !v && (s || !p) && c(a);
-  }), x = (a) => (p) => {
-    f.current = !0;
-    const y = o.props[a];
-    y && y(p);
-  }, I = {
-    ref: C
-  };
-  return i !== !1 && (I[i] = x(i)), l.useEffect(() => {
-    if (i !== !1) {
-      const a = oe(i), p = z(r.current), y = () => {
-        d.current = !0;
-      };
-      return p.addEventListener(a, g), p.addEventListener("touchmove", y), () => {
-        p.removeEventListener(a, g), p.removeEventListener("touchmove", y);
-      };
-    }
-  }, [g, i]), n !== !1 && (I[n] = x(n)), l.useEffect(() => {
-    if (n !== !1) {
-      const a = oe(n), p = z(r.current);
-      return p.addEventListener(a, g), () => {
-        p.removeEventListener(a, g);
-      };
-    }
-  }, [g, n]), /* @__PURE__ */ b(l.Fragment, {
-    children: /* @__PURE__ */ l.cloneElement(o, I)
-  });
-}
-process.env.NODE_ENV !== "production" && (_.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * The wrapped element.
-   */
-  children: ve.isRequired,
-  /**
-   * If `true`, the React tree is ignored and only the DOM tree is considered.
-   * This prop changes how portaled elements are handled.
-   * @default false
-   */
-  disableReactTree: t.bool,
-  /**
-   * The mouse event to listen to. You can disable the listener by providing `false`.
-   * @default 'onClick'
-   */
-  mouseEvent: t.oneOf(["onClick", "onMouseDown", "onMouseUp", "onPointerDown", "onPointerUp", !1]),
-  /**
-   * Callback fired when a "click away" event is detected.
-   */
-  onClickAway: t.func.isRequired,
-  /**
-   * The touch event to listen to. You can disable the listener by providing `false`.
-   * @default 'onTouchEnd'
-   */
-  touchEvent: t.oneOf(["onTouchEnd", "onTouchStart", !1])
-});
-process.env.NODE_ENV !== "production" && (_.propTypes = Ie(_.propTypes));
-const Re = ["className"], Ne = (e) => {
+    ownerState: s
+  } = e;
+  return [o.root, s.dense && o.dense, s.alignItems === "flex-start" && o.alignItemsFlexStart, s.divider && o.divider, !s.disableGutters && o.gutters];
+}, Ee = (e) => {
   const {
     alignItems: o,
-    classes: s
-  } = e;
-  return w({
-    root: ["root", o === "flex-start" && "alignItemsFlexStart"]
-  }, Ce, s);
-}, Pe = A("div", {
-  name: "MuiListItemIcon",
+    classes: s,
+    dense: n,
+    disabled: c,
+    disableGutters: i,
+    divider: d,
+    selected: r
+  } = e, f = w({
+    root: ["root", n && "dense", !i && "gutters", d && "divider", c && "disabled", o === "flex-start" && "alignItemsFlexStart", r && "selected"]
+  }, Re, s);
+  return u({}, s, f);
+}, $e = A(se, {
+  shouldForwardProp: (e) => Te(e) || e === "classes",
+  name: "MuiListItemButton",
   slot: "Root",
-  overridesResolver: (e, o) => {
-    const {
-      ownerState: s
-    } = e;
-    return [o.root, s.alignItems === "flex-start" && o.alignItemsFlexStart];
-  }
+  overridesResolver: Pe
 })(({
   theme: e,
   ownerState: o
 }) => u({
-  minWidth: 56,
-  color: (e.vars || e).palette.action.active,
-  flexShrink: 0,
-  display: "inline-flex"
+  display: "flex",
+  flexGrow: 1,
+  justifyContent: "flex-start",
+  alignItems: "center",
+  position: "relative",
+  textDecoration: "none",
+  minWidth: 0,
+  boxSizing: "border-box",
+  textAlign: "left",
+  paddingTop: 8,
+  paddingBottom: 8,
+  transition: e.transitions.create("background-color", {
+    duration: e.transitions.duration.shortest
+  }),
+  "&:hover": {
+    textDecoration: "none",
+    backgroundColor: (e.vars || e).palette.action.hover,
+    // Reset on touch devices, it doesn't add specificity
+    "@media (hover: none)": {
+      backgroundColor: "transparent"
+    }
+  },
+  [`&.${E.selected}`]: {
+    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.selectedOpacity})` : h(e.palette.primary.main, e.palette.action.selectedOpacity),
+    [`&.${E.focusVisible}`]: {
+      backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.focusOpacity}))` : h(e.palette.primary.main, e.palette.action.selectedOpacity + e.palette.action.focusOpacity)
+    }
+  },
+  [`&.${E.selected}:hover`]: {
+    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.hoverOpacity}))` : h(e.palette.primary.main, e.palette.action.selectedOpacity + e.palette.action.hoverOpacity),
+    // Reset on touch devices, it doesn't add specificity
+    "@media (hover: none)": {
+      backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.selectedOpacity})` : h(e.palette.primary.main, e.palette.action.selectedOpacity)
+    }
+  },
+  [`&.${E.focusVisible}`]: {
+    backgroundColor: (e.vars || e).palette.action.focus
+  },
+  [`&.${E.disabled}`]: {
+    opacity: (e.vars || e).palette.action.disabledOpacity
+  }
+}, o.divider && {
+  borderBottom: `1px solid ${(e.vars || e).palette.divider}`,
+  backgroundClip: "padding-box"
 }, o.alignItems === "flex-start" && {
-  marginTop: 8
+  alignItems: "flex-start"
+}, !o.disableGutters && {
+  paddingLeft: 16,
+  paddingRight: 16
+}, o.dense && {
+  paddingTop: 4,
+  paddingBottom: 4
 })), re = /* @__PURE__ */ l.forwardRef(function(o, s) {
   const n = M({
     props: o,
-    name: "MuiListItemIcon"
+    name: "MuiListItemButton"
   }), {
-    className: c
-  } = n, i = $(n, Re), d = l.useContext(L), r = u({}, n, {
-    alignItems: d.alignItems
-  }), m = Ne(r);
-  return /* @__PURE__ */ b(Pe, u({
-    className: T(m.root, c),
-    ownerState: r,
-    ref: s
-  }, i));
+    alignItems: c = "center",
+    autoFocus: i = !1,
+    component: d = "div",
+    children: r,
+    dense: m = !1,
+    disableGutters: f = !1,
+    divider: C = !1,
+    focusVisibleClassName: g,
+    selected: x = !1,
+    className: I
+  } = n, a = $(n, Ne), p = l.useContext(L), y = l.useMemo(() => ({
+    dense: m || p.dense || !1,
+    alignItems: c,
+    disableGutters: f
+  }), [c, p.dense, m, f]), v = l.useRef(null);
+  ne(() => {
+    i && (v.current ? v.current.focus() : process.env.NODE_ENV !== "production" && console.error("MUI: Unable to set focus to a ListItemButton whose component has not been rendered."));
+  }, [i]);
+  const j = u({}, n, {
+    alignItems: c,
+    dense: y.dense,
+    disableGutters: f,
+    divider: C,
+    selected: x
+  }), S = Ee(j), V = H(v, s);
+  return /* @__PURE__ */ b(L.Provider, {
+    value: y,
+    children: /* @__PURE__ */ b($e, u({
+      ref: V,
+      href: a.href || a.to,
+      component: (a.href || a.to) && d === "div" ? "button" : d,
+      focusVisibleClassName: T(S.focusVisible, g),
+      ownerState: j,
+      className: T(S.root, I)
+    }, a, {
+      classes: S,
+      children: r
+    }))
+  });
 });
 process.env.NODE_ENV !== "production" && (re.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -158,8 +148,19 @@ process.env.NODE_ENV !== "production" && (re.propTypes = {
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
   /**
-   * The content of the component, normally `Icon`, `SvgIcon`,
-   * or a `@mui/icons-material` SVG icon element.
+   * Defines the `align-items` style property.
+   * @default 'center'
+   */
+  alignItems: t.oneOf(["center", "flex-start"]),
+  /**
+   * If `true`, the list item is focused during the first mount.
+   * Focus will also be triggered if the value changes from false to true.
+   * @default false
+   */
+  autoFocus: t.bool,
+  /**
+   * The content of the component if a `ListItemSecondaryAction` is used it must
+   * be the last child.
    */
   children: t.node,
   /**
@@ -170,102 +171,107 @@ process.env.NODE_ENV !== "production" && (re.propTypes = {
    * @ignore
    */
   className: t.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: t.elementType,
+  /**
+   * If `true`, compact vertical padding designed for keyboard and mouse input is used.
+   * The prop defaults to the value inherited from the parent List component.
+   * @default false
+   */
+  dense: t.bool,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: t.bool,
+  /**
+   * If `true`, the left and right padding is removed.
+   * @default false
+   */
+  disableGutters: t.bool,
+  /**
+   * If `true`, a 1px light border is added to the bottom of the list item.
+   * @default false
+   */
+  divider: t.bool,
+  /**
+   * This prop can help identify which element has keyboard focus.
+   * The class name will be applied when the element gains the focus through keyboard interaction.
+   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
+   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
+   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
+   * if needed.
+   */
+  focusVisibleClassName: t.string,
+  /**
+   * @ignore
+   */
+  href: t.string,
+  /**
+   * Use to apply selected styling.
+   * @default false
+   */
+  selected: t.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object])
 });
-const Ee = ["children", "className", "disableTypography", "inset", "primary", "primaryTypographyProps", "secondary", "secondaryTypographyProps"], $e = (e) => {
+function Ae(e) {
+  return q("MuiListItemSecondaryAction", e);
+}
+Y("MuiListItemSecondaryAction", ["root", "disableGutters"]);
+const Se = ["className"], ke = (e) => {
   const {
-    classes: o,
-    inset: s,
-    primary: n,
-    secondary: c,
-    dense: i
+    disableGutters: o,
+    classes: s
   } = e;
   return w({
-    root: ["root", s && "inset", i && "dense", n && c && "multiline"],
-    primary: ["primary"],
-    secondary: ["secondary"]
-  }, xe, o);
-}, Ae = A("div", {
-  name: "MuiListItemText",
+    root: ["root", o && "disableGutters"]
+  }, Ae, s);
+}, Me = A("div", {
+  name: "MuiListItemSecondaryAction",
   slot: "Root",
   overridesResolver: (e, o) => {
     const {
       ownerState: s
     } = e;
-    return [{
-      [`& .${ee.primary}`]: o.primary
-    }, {
-      [`& .${ee.secondary}`]: o.secondary
-    }, o.root, s.inset && o.inset, s.primary && s.secondary && o.multiline, s.dense && o.dense];
+    return [o.root, s.disableGutters && o.disableGutters];
   }
 })(({
   ownerState: e
 }) => u({
-  flex: "1 1 auto",
-  minWidth: 0,
-  marginTop: 4,
-  marginBottom: 4
-}, e.primary && e.secondary && {
-  marginTop: 6,
-  marginBottom: 6
-}, e.inset && {
-  paddingLeft: 56
-})), ie = /* @__PURE__ */ l.forwardRef(function(o, s) {
+  position: "absolute",
+  right: 16,
+  top: "50%",
+  transform: "translateY(-50%)"
+}, e.disableGutters && {
+  right: 0
+})), X = /* @__PURE__ */ l.forwardRef(function(o, s) {
   const n = M({
     props: o,
-    name: "MuiListItemText"
+    name: "MuiListItemSecondaryAction"
   }), {
-    children: c,
-    className: i,
-    disableTypography: d = !1,
-    inset: r = !1,
-    primary: m,
-    primaryTypographyProps: f,
-    secondary: C,
-    secondaryTypographyProps: g
-  } = n, x = $(n, Ee), {
-    dense: I
-  } = l.useContext(L);
-  let a = m ?? c, p = C;
-  const y = u({}, n, {
-    disableTypography: d,
-    inset: r,
-    primary: !!a,
-    secondary: !!p,
-    dense: I
-  }), v = $e(y);
-  return a != null && a.type !== F && !d && (a = /* @__PURE__ */ b(F, u({
-    variant: I ? "body2" : "body1",
-    className: v.primary,
-    component: f != null && f.variant ? void 0 : "span",
-    display: "block"
-  }, f, {
-    children: a
-  }))), p != null && p.type !== F && !d && (p = /* @__PURE__ */ b(F, u({
-    variant: "body2",
-    className: v.secondary,
-    color: "text.secondary",
-    display: "block"
-  }, g, {
-    children: p
-  }))), /* @__PURE__ */ U(Ae, u({
-    className: T(v.root, i),
-    ownerState: y,
+    className: c
+  } = n, i = $(n, Se), d = l.useContext(L), r = u({}, n, {
+    disableGutters: d.disableGutters
+  }), m = ke(r);
+  return /* @__PURE__ */ b(Me, u({
+    className: T(m.root, c),
+    ownerState: r,
     ref: s
-  }, x, {
-    children: [a, p]
-  }));
+  }, i));
 });
-process.env.NODE_ENV !== "production" && (ie.propTypes = {
+process.env.NODE_ENV !== "production" && (X.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
   /**
-   * Alias for the `primary` prop.
+   * The content of the component, normally an `IconButton` or selection control.
    */
   children: t.node,
   /**
@@ -276,88 +282,86 @@ process.env.NODE_ENV !== "production" && (ie.propTypes = {
    * @ignore
    */
   className: t.string,
-  /**
-   * If `true`, the children won't be wrapped by a Typography component.
-   * This can be useful to render an alternative Typography variant by wrapping
-   * the `children` (or `primary`) text, and optional `secondary` text
-   * with the Typography component.
-   * @default false
-   */
-  disableTypography: t.bool,
-  /**
-   * If `true`, the children are indented.
-   * This should be used if there is no left avatar or left icon.
-   * @default false
-   */
-  inset: t.bool,
-  /**
-   * The main content element.
-   */
-  primary: t.node,
-  /**
-   * These props will be forwarded to the primary typography component
-   * (as long as disableTypography is not `true`).
-   */
-  primaryTypographyProps: t.object,
-  /**
-   * The secondary content element.
-   */
-  secondary: t.node,
-  /**
-   * These props will be forwarded to the secondary typography component
-   * (as long as disableTypography is not `true`).
-   */
-  secondaryTypographyProps: t.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object])
 });
-function Se(e) {
-  return q("MuiListItem", e);
-}
-const P = Y("MuiListItem", ["root", "container", "focusVisible", "dense", "alignItemsFlexStart", "disabled", "divider", "gutters", "padding", "button", "secondaryAction", "selected"]);
-function ke(e) {
-  return q("MuiListItemButton", e);
-}
-const E = Y("MuiListItemButton", ["root", "focusVisible", "dense", "alignItemsFlexStart", "disabled", "divider", "gutters", "selected"]), Me = ["alignItems", "autoFocus", "component", "children", "dense", "disableGutters", "divider", "focusVisibleClassName", "selected", "className"], we = (e, o) => {
+X.muiName = "ListItemSecondaryAction";
+const we = ["className"], je = ["alignItems", "autoFocus", "button", "children", "className", "component", "components", "componentsProps", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "disablePadding", "divider", "focusVisibleClassName", "secondaryAction", "selected", "slotProps", "slots"], Ve = (e, o) => {
   const {
     ownerState: s
   } = e;
-  return [o.root, s.dense && o.dense, s.alignItems === "flex-start" && o.alignItemsFlexStart, s.divider && o.divider, !s.disableGutters && o.gutters];
-}, je = (e) => {
-  const {
-    alignItems: o,
-    classes: s,
-    dense: n,
-    disabled: c,
-    disableGutters: i,
-    divider: d,
-    selected: r
-  } = e, f = w({
-    root: ["root", n && "dense", !i && "gutters", d && "divider", c && "disabled", o === "flex-start" && "alignItemsFlexStart", r && "selected"]
-  }, ke, s);
-  return u({}, s, f);
-}, Ve = A(se, {
-  shouldForwardProp: (e) => Te(e) || e === "classes",
-  name: "MuiListItemButton",
+  return [o.root, s.dense && o.dense, s.alignItems === "flex-start" && o.alignItemsFlexStart, s.divider && o.divider, !s.disableGutters && o.gutters, !s.disablePadding && o.padding, s.button && o.button, s.hasSecondaryAction && o.secondaryAction];
+}, Be = (e) => {
+  const {
+    alignItems: o,
+    button: s,
+    classes: n,
+    dense: c,
+    disabled: i,
+    disableGutters: d,
+    disablePadding: r,
+    divider: m,
+    hasSecondaryAction: f,
+    selected: C
+  } = e;
+  return w({
+    root: ["root", c && "dense", !d && "gutters", !r && "padding", m && "divider", i && "disabled", s && "button", o === "flex-start" && "alignItemsFlexStart", f && "secondaryAction", C && "selected"],
+    container: ["container"]
+  }, Oe, n);
+}, Ge = A("div", {
+  name: "MuiListItem",
   slot: "Root",
-  overridesResolver: we
+  overridesResolver: Ve
 })(({
   theme: e,
   ownerState: o
 }) => u({
   display: "flex",
-  flexGrow: 1,
   justifyContent: "flex-start",
   alignItems: "center",
   position: "relative",
   textDecoration: "none",
-  minWidth: 0,
+  width: "100%",
   boxSizing: "border-box",
-  textAlign: "left",
+  textAlign: "left"
+}, !o.disablePadding && u({
   paddingTop: 8,
-  paddingBottom: 8,
+  paddingBottom: 8
+}, o.dense && {
+  paddingTop: 4,
+  paddingBottom: 4
+}, !o.disableGutters && {
+  paddingLeft: 16,
+  paddingRight: 16
+}, !!o.secondaryAction && {
+  // Add some space to avoid collision as `ListItemSecondaryAction`
+  // is absolutely positioned.
+  paddingRight: 48
+}), !!o.secondaryAction && {
+  [`& > .${E.root}`]: {
+    paddingRight: 48
+  }
+}, {
+  [`&.${P.focusVisible}`]: {
+    backgroundColor: (e.vars || e).palette.action.focus
+  },
+  [`&.${P.selected}`]: {
+    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.selectedOpacity})` : h(e.palette.primary.main, e.palette.action.selectedOpacity),
+    [`&.${P.focusVisible}`]: {
+      backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.focusOpacity}))` : h(e.palette.primary.main, e.palette.action.selectedOpacity + e.palette.action.focusOpacity)
+    }
+  },
+  [`&.${P.disabled}`]: {
+    opacity: (e.vars || e).palette.action.disabledOpacity
+  }
+}, o.alignItems === "flex-start" && {
+  alignItems: "flex-start"
+}, o.divider && {
+  borderBottom: `1px solid ${(e.vars || e).palette.divider}`,
+  backgroundClip: "padding-box"
+}, o.button && {
   transition: e.transitions.create("background-color", {
     duration: e.transitions.duration.shortest
   }),
@@ -369,82 +373,104 @@ const E = Y("MuiListItemButton", ["root", "focusVisible", "dense", "alignItemsFl
       backgroundColor: "transparent"
     }
   },
-  [`&.${E.selected}`]: {
-    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.selectedOpacity})` : h(e.palette.primary.main, e.palette.action.selectedOpacity),
-    [`&.${E.focusVisible}`]: {
-      backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.focusOpacity}))` : h(e.palette.primary.main, e.palette.action.selectedOpacity + e.palette.action.focusOpacity)
-    }
-  },
-  [`&.${E.selected}:hover`]: {
+  [`&.${P.selected}:hover`]: {
     backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.hoverOpacity}))` : h(e.palette.primary.main, e.palette.action.selectedOpacity + e.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     "@media (hover: none)": {
       backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.selectedOpacity})` : h(e.palette.primary.main, e.palette.action.selectedOpacity)
     }
-  },
-  [`&.${E.focusVisible}`]: {
-    backgroundColor: (e.vars || e).palette.action.focus
-  },
-  [`&.${E.disabled}`]: {
-    opacity: (e.vars || e).palette.action.disabledOpacity
   }
-}, o.divider && {
-  borderBottom: `1px solid ${(e.vars || e).palette.divider}`,
-  backgroundClip: "padding-box"
-}, o.alignItems === "flex-start" && {
-  alignItems: "flex-start"
-}, !o.disableGutters && {
-  paddingLeft: 16,
-  paddingRight: 16
-}, o.dense && {
-  paddingTop: 4,
-  paddingBottom: 4
-})), ce = /* @__PURE__ */ l.forwardRef(function(o, s) {
+}, o.hasSecondaryAction && {
+  // Add some space to avoid collision as `ListItemSecondaryAction`
+  // is absolutely positioned.
+  paddingRight: 48
+})), Fe = A("li", {
+  name: "MuiListItem",
+  slot: "Container",
+  overridesResolver: (e, o) => o.container
+})({
+  position: "relative"
+}), ie = /* @__PURE__ */ l.forwardRef(function(o, s) {
   const n = M({
     props: o,
-    name: "MuiListItemButton"
+    name: "MuiListItem"
   }), {
     alignItems: c = "center",
     autoFocus: i = !1,
-    component: d = "div",
+    button: d = !1,
     children: r,
-    dense: m = !1,
-    disableGutters: f = !1,
-    divider: C = !1,
-    focusVisibleClassName: g,
-    selected: x = !1,
-    className: I
-  } = n, a = $(n, Me), p = l.useContext(L), y = l.useMemo(() => ({
-    dense: m || p.dense || !1,
+    className: m,
+    component: f,
+    components: C = {},
+    componentsProps: g = {},
+    ContainerComponent: x = "li",
+    ContainerProps: {
+      className: I
+    } = {},
+    dense: a = !1,
+    disabled: p = !1,
+    disableGutters: y = !1,
+    disablePadding: v = !1,
+    divider: j = !1,
+    focusVisibleClassName: S,
+    secondaryAction: V,
+    selected: de = !1,
+    slotProps: pe = {},
+    slots: ue = {}
+  } = n, me = $(n.ContainerProps, we), fe = $(n, je), J = l.useContext(L), D = l.useMemo(() => ({
+    dense: a || J.dense || !1,
     alignItems: c,
-    disableGutters: f
-  }), [c, p.dense, m, f]), v = l.useRef(null);
+    disableGutters: y
+  }), [c, J.dense, a, y]), W = l.useRef(null);
   ne(() => {
-    i && (v.current ? v.current.focus() : process.env.NODE_ENV !== "production" && console.error("MUI: Unable to set focus to a ListItemButton whose component has not been rendered."));
+    i && (W.current ? W.current.focus() : process.env.NODE_ENV !== "production" && console.error("MUI: Unable to set focus to a ListItem whose component has not been rendered."));
   }, [i]);
-  const j = u({}, n, {
+  const N = l.Children.toArray(r), K = N.length && ae(N[N.length - 1], ["ListItemSecondaryAction"]), B = u({}, n, {
     alignItems: c,
-    dense: y.dense,
-    disableGutters: f,
-    divider: C,
-    selected: x
-  }), S = je(j), V = H(v, s);
-  return /* @__PURE__ */ b(L.Provider, {
-    value: y,
-    children: /* @__PURE__ */ b(Ve, u({
-      ref: V,
-      href: a.href || a.to,
-      component: (a.href || a.to) && d === "div" ? "button" : d,
-      focusVisibleClassName: T(S.focusVisible, g),
-      ownerState: j,
-      className: T(S.root, I)
-    }, a, {
-      classes: S,
-      children: r
+    autoFocus: i,
+    button: d,
+    dense: D.dense,
+    disabled: p,
+    disableGutters: y,
+    disablePadding: v,
+    divider: j,
+    hasSecondaryAction: K,
+    selected: de
+  }), Q = Be(B), Z = H(W, s), G = ue.root || C.Root || Ge, k = pe.root || g.root || {}, O = u({
+    className: T(Q.root, k.className, m),
+    disabled: p
+  }, fe);
+  let R = f || "li";
+  return d && (O.component = f || "div", O.focusVisibleClassName = T(P.focusVisible, S), R = se), K ? (R = !O.component && !f ? "div" : R, x === "li" && (R === "li" ? R = "div" : O.component === "li" && (O.component = "div")), /* @__PURE__ */ b(L.Provider, {
+    value: D,
+    children: /* @__PURE__ */ U(Fe, u({
+      as: x,
+      className: T(Q.container, I),
+      ref: Z,
+      ownerState: B
+    }, me, {
+      children: [/* @__PURE__ */ b(G, u({}, k, !te(G) && {
+        as: R,
+        ownerState: u({}, B, k.ownerState)
+      }, O, {
+        children: N
+      })), N.pop()]
+    }))
+  })) : /* @__PURE__ */ b(L.Provider, {
+    value: D,
+    children: /* @__PURE__ */ U(G, u({}, k, {
+      as: R,
+      ref: Z
+    }, !te(G) && {
+      ownerState: u({}, B, k.ownerState)
+    }, O, {
+      children: [N, V && /* @__PURE__ */ b(X, {
+        children: V
+      })]
     }))
   });
 });
-process.env.NODE_ENV !== "production" && (ce.propTypes = {
+process.env.NODE_ENV !== "production" && (ie.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -458,13 +484,32 @@ process.env.NODE_ENV !== "production" && (ce.propTypes = {
    * If `true`, the list item is focused during the first mount.
    * Focus will also be triggered if the value changes from false to true.
    * @default false
+   * @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
    */
   autoFocus: t.bool,
+  /**
+   * If `true`, the list item is a button (using `ButtonBase`). Props intended
+   * for `ButtonBase` can then be applied to `ListItem`.
+   * @default false
+   * @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
+   */
+  button: t.bool,
   /**
    * The content of the component if a `ListItemSecondaryAction` is used it must
    * be the last child.
    */
-  children: t.node,
+  children: Le(t.node, (e) => {
+    const o = l.Children.toArray(e.children);
+    let s = -1;
+    for (let n = o.length - 1; n >= 0; n -= 1) {
+      const c = o[n];
+      if (ae(c, ["ListItemSecondaryAction"])) {
+        s = n;
+        break;
+      }
+    }
+    return s !== -1 && s !== o.length - 1 ? new Error("MUI: You used an element after ListItemSecondaryAction. For ListItem to detect that it has a secondary action you must pass it as the last child to ListItem.") : null;
+  }),
   /**
    * Override or extend the styles applied to the component.
    */
@@ -478,6 +523,41 @@ process.env.NODE_ENV !== "production" && (ce.propTypes = {
    * Either a string to use a HTML element or a component.
    */
   component: t.elementType,
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
+   * @default {}
+   */
+  components: t.shape({
+    Root: t.elementType
+  }),
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
+   * @default {}
+   */
+  componentsProps: t.shape({
+    root: t.object
+  }),
+  /**
+   * The container component used when a `ListItemSecondaryAction` is the last child.
+   * @default 'li'
+   * @deprecated
+   */
+  ContainerComponent: be,
+  /**
+   * Props applied to the container component if used.
+   * @default {}
+   * @deprecated
+   */
+  ContainerProps: t.object,
   /**
    * If `true`, compact vertical padding designed for keyboard and mouse input is used.
    * The prop defaults to the value inherited from the parent List component.
@@ -487,6 +567,7 @@ process.env.NODE_ENV !== "production" && (ce.propTypes = {
   /**
    * If `true`, the component is disabled.
    * @default false
+   * @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
    */
   disabled: t.bool,
   /**
@@ -494,86 +575,106 @@ process.env.NODE_ENV !== "production" && (ce.propTypes = {
    * @default false
    */
   disableGutters: t.bool,
+  /**
+   * If `true`, all padding is removed.
+   * @default false
+   */
+  disablePadding: t.bool,
   /**
    * If `true`, a 1px light border is added to the bottom of the list item.
    * @default false
    */
   divider: t.bool,
   /**
-   * This prop can help identify which element has keyboard focus.
-   * The class name will be applied when the element gains the focus through keyboard interaction.
-   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
-   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
-   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
-   * if needed.
+   * @ignore
    */
   focusVisibleClassName: t.string,
   /**
-   * @ignore
+   * The element to display at the end of ListItem.
    */
-  href: t.string,
+  secondaryAction: t.node,
   /**
    * Use to apply selected styling.
    * @default false
+   * @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
    */
   selected: t.bool,
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slotProps: t.shape({
+    root: t.object
+  }),
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slots: t.shape({
+    root: t.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object])
 });
-function Be(e) {
-  return q("MuiListItemSecondaryAction", e);
-}
-Y("MuiListItemSecondaryAction", ["root", "disableGutters"]);
-const Ge = ["className"], Fe = (e) => {
+const Ue = ["className"], _e = (e) => {
   const {
-    disableGutters: o,
+    alignItems: o,
     classes: s
   } = e;
   return w({
-    root: ["root", o && "disableGutters"]
-  }, Be, s);
-}, Ue = A("div", {
-  name: "MuiListItemSecondaryAction",
+    root: ["root", o === "flex-start" && "alignItemsFlexStart"]
+  }, Ce, s);
+}, De = A("div", {
+  name: "MuiListItemIcon",
   slot: "Root",
   overridesResolver: (e, o) => {
     const {
       ownerState: s
     } = e;
-    return [o.root, s.disableGutters && o.disableGutters];
+    return [o.root, s.alignItems === "flex-start" && o.alignItemsFlexStart];
   }
 })(({
-  ownerState: e
+  theme: e,
+  ownerState: o
 }) => u({
-  position: "absolute",
-  right: 16,
-  top: "50%",
-  transform: "translateY(-50%)"
-}, e.disableGutters && {
-  right: 0
-})), X = /* @__PURE__ */ l.forwardRef(function(o, s) {
+  minWidth: 56,
+  color: (e.vars || e).palette.action.active,
+  flexShrink: 0,
+  display: "inline-flex"
+}, o.alignItems === "flex-start" && {
+  marginTop: 8
+})), ce = /* @__PURE__ */ l.forwardRef(function(o, s) {
   const n = M({
     props: o,
-    name: "MuiListItemSecondaryAction"
+    name: "MuiListItemIcon"
   }), {
     className: c
-  } = n, i = $(n, Ge), d = l.useContext(L), r = u({}, n, {
-    disableGutters: d.disableGutters
-  }), m = Fe(r);
-  return /* @__PURE__ */ b(Ue, u({
+  } = n, i = $(n, Ue), d = l.useContext(L), r = u({}, n, {
+    alignItems: d.alignItems
+  }), m = _e(r);
+  return /* @__PURE__ */ b(De, u({
     className: T(m.root, c),
     ownerState: r,
     ref: s
   }, i));
 });
-process.env.NODE_ENV !== "production" && (X.propTypes = {
+process.env.NODE_ENV !== "production" && (ce.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
   /**
-   * The content of the component, normally an `IconButton` or selection control.
+   * The content of the component, normally `Icon`, `SvgIcon`,
+   * or a `@mui/icons-material` SVG icon element.
    */
   children: t.node,
   /**
@@ -589,188 +690,89 @@ process.env.NODE_ENV !== "production" && (X.propTypes = {
    */
   sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object])
 });
-X.muiName = "ListItemSecondaryAction";
-const _e = ["className"], De = ["alignItems", "autoFocus", "button", "children", "className", "component", "components", "componentsProps", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "disablePadding", "divider", "focusVisibleClassName", "secondaryAction", "selected", "slotProps", "slots"], We = (e, o) => {
-  const {
-    ownerState: s
-  } = e;
-  return [o.root, s.dense && o.dense, s.alignItems === "flex-start" && o.alignItemsFlexStart, s.divider && o.divider, !s.disableGutters && o.gutters, !s.disablePadding && o.padding, s.button && o.button, s.hasSecondaryAction && o.secondaryAction];
-}, ze = (e) => {
+const We = ["children", "className", "disableTypography", "inset", "primary", "primaryTypographyProps", "secondary", "secondaryTypographyProps"], ze = (e) => {
   const {
-    alignItems: o,
-    button: s,
-    classes: n,
-    dense: c,
-    disabled: i,
-    disableGutters: d,
-    disablePadding: r,
-    divider: m,
-    hasSecondaryAction: f,
-    selected: C
+    classes: o,
+    inset: s,
+    primary: n,
+    secondary: c,
+    dense: i
   } = e;
   return w({
-    root: ["root", c && "dense", !d && "gutters", !r && "padding", m && "divider", i && "disabled", s && "button", o === "flex-start" && "alignItemsFlexStart", f && "secondaryAction", C && "selected"],
-    container: ["container"]
-  }, Se, n);
+    root: ["root", s && "inset", i && "dense", n && c && "multiline"],
+    primary: ["primary"],
+    secondary: ["secondary"]
+  }, xe, o);
 }, He = A("div", {
-  name: "MuiListItem",
+  name: "MuiListItemText",
   slot: "Root",
-  overridesResolver: We
+  overridesResolver: (e, o) => {
+    const {
+      ownerState: s
+    } = e;
+    return [{
+      [`& .${ee.primary}`]: o.primary
+    }, {
+      [`& .${ee.secondary}`]: o.secondary
+    }, o.root, s.inset && o.inset, s.primary && s.secondary && o.multiline, s.dense && o.dense];
+  }
 })(({
-  theme: e,
-  ownerState: o
+  ownerState: e
 }) => u({
-  display: "flex",
-  justifyContent: "flex-start",
-  alignItems: "center",
-  position: "relative",
-  textDecoration: "none",
-  width: "100%",
-  boxSizing: "border-box",
-  textAlign: "left"
-}, !o.disablePadding && u({
-  paddingTop: 8,
-  paddingBottom: 8
-}, o.dense && {
-  paddingTop: 4,
-  paddingBottom: 4
-}, !o.disableGutters && {
-  paddingLeft: 16,
-  paddingRight: 16
-}, !!o.secondaryAction && {
-  // Add some space to avoid collision as `ListItemSecondaryAction`
-  // is absolutely positioned.
-  paddingRight: 48
-}), !!o.secondaryAction && {
-  [`& > .${E.root}`]: {
-    paddingRight: 48
-  }
-}, {
-  [`&.${P.focusVisible}`]: {
-    backgroundColor: (e.vars || e).palette.action.focus
-  },
-  [`&.${P.selected}`]: {
-    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.selectedOpacity})` : h(e.palette.primary.main, e.palette.action.selectedOpacity),
-    [`&.${P.focusVisible}`]: {
-      backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.focusOpacity}))` : h(e.palette.primary.main, e.palette.action.selectedOpacity + e.palette.action.focusOpacity)
-    }
-  },
-  [`&.${P.disabled}`]: {
-    opacity: (e.vars || e).palette.action.disabledOpacity
-  }
-}, o.alignItems === "flex-start" && {
-  alignItems: "flex-start"
-}, o.divider && {
-  borderBottom: `1px solid ${(e.vars || e).palette.divider}`,
-  backgroundClip: "padding-box"
-}, o.button && {
-  transition: e.transitions.create("background-color", {
-    duration: e.transitions.duration.shortest
-  }),
-  "&:hover": {
-    textDecoration: "none",
-    backgroundColor: (e.vars || e).palette.action.hover,
-    // Reset on touch devices, it doesn't add specificity
-    "@media (hover: none)": {
-      backgroundColor: "transparent"
-    }
-  },
-  [`&.${P.selected}:hover`]: {
-    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.hoverOpacity}))` : h(e.palette.primary.main, e.palette.action.selectedOpacity + e.palette.action.hoverOpacity),
-    // Reset on touch devices, it doesn't add specificity
-    "@media (hover: none)": {
-      backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.selectedOpacity})` : h(e.palette.primary.main, e.palette.action.selectedOpacity)
-    }
-  }
-}, o.hasSecondaryAction && {
-  // Add some space to avoid collision as `ListItemSecondaryAction`
-  // is absolutely positioned.
-  paddingRight: 48
-})), Ye = A("li", {
-  name: "MuiListItem",
-  slot: "Container",
-  overridesResolver: (e, o) => o.container
-})({
-  position: "relative"
-}), le = /* @__PURE__ */ l.forwardRef(function(o, s) {
+  flex: "1 1 auto",
+  minWidth: 0,
+  marginTop: 4,
+  marginBottom: 4
+}, e.primary && e.secondary && {
+  marginTop: 6,
+  marginBottom: 6
+}, e.inset && {
+  paddingLeft: 56
+})), le = /* @__PURE__ */ l.forwardRef(function(o, s) {
   const n = M({
     props: o,
-    name: "MuiListItem"
+    name: "MuiListItemText"
   }), {
-    alignItems: c = "center",
-    autoFocus: i = !1,
-    button: d = !1,
-    children: r,
-    className: m,
-    component: f,
-    components: C = {},
-    componentsProps: g = {},
-    ContainerComponent: x = "li",
-    ContainerProps: {
-      className: I
-    } = {},
-    dense: a = !1,
-    disabled: p = !1,
-    disableGutters: y = !1,
-    disablePadding: v = !1,
-    divider: j = !1,
-    focusVisibleClassName: S,
-    secondaryAction: V,
-    selected: de = !1,
-    slotProps: pe = {},
-    slots: ue = {}
-  } = n, me = $(n.ContainerProps, _e), fe = $(n, De), J = l.useContext(L), D = l.useMemo(() => ({
-    dense: a || J.dense || !1,
-    alignItems: c,
-    disableGutters: y
-  }), [c, J.dense, a, y]), W = l.useRef(null);
-  ne(() => {
-    i && (W.current ? W.current.focus() : process.env.NODE_ENV !== "production" && console.error("MUI: Unable to set focus to a ListItem whose component has not been rendered."));
-  }, [i]);
-  const N = l.Children.toArray(r), K = N.length && ae(N[N.length - 1], ["ListItemSecondaryAction"]), B = u({}, n, {
-    alignItems: c,
-    autoFocus: i,
-    button: d,
-    dense: D.dense,
-    disabled: p,
-    disableGutters: y,
-    disablePadding: v,
-    divider: j,
-    hasSecondaryAction: K,
-    selected: de
-  }), Q = ze(B), Z = H(W, s), G = ue.root || C.Root || He, k = pe.root || g.root || {}, O = u({
-    className: T(Q.root, k.className, m),
-    disabled: p
-  }, fe);
-  let R = f || "li";
-  return d && (O.component = f || "div", O.focusVisibleClassName = T(P.focusVisible, S), R = se), K ? (R = !O.component && !f ? "div" : R, x === "li" && (R === "li" ? R = "div" : O.component === "li" && (O.component = "div")), /* @__PURE__ */ b(L.Provider, {
-    value: D,
-    children: /* @__PURE__ */ U(Ye, u({
-      as: x,
-      className: T(Q.container, I),
-      ref: Z,
-      ownerState: B
-    }, me, {
-      children: [/* @__PURE__ */ b(G, u({}, k, !te(G) && {
-        as: R,
-        ownerState: u({}, B, k.ownerState)
-      }, O, {
-        children: N
-      })), N.pop()]
-    }))
-  })) : /* @__PURE__ */ b(L.Provider, {
-    value: D,
-    children: /* @__PURE__ */ U(G, u({}, k, {
-      as: R,
-      ref: Z
-    }, !te(G) && {
-      ownerState: u({}, B, k.ownerState)
-    }, O, {
-      children: [N, V && /* @__PURE__ */ b(X, {
-        children: V
-      })]
-    }))
-  });
+    children: c,
+    className: i,
+    disableTypography: d = !1,
+    inset: r = !1,
+    primary: m,
+    primaryTypographyProps: f,
+    secondary: C,
+    secondaryTypographyProps: g
+  } = n, x = $(n, We), {
+    dense: I
+  } = l.useContext(L);
+  let a = m ?? c, p = C;
+  const y = u({}, n, {
+    disableTypography: d,
+    inset: r,
+    primary: !!a,
+    secondary: !!p,
+    dense: I
+  }), v = ze(y);
+  return a != null && a.type !== F && !d && (a = /* @__PURE__ */ b(F, u({
+    variant: I ? "body2" : "body1",
+    className: v.primary,
+    component: f != null && f.variant ? void 0 : "span",
+    display: "block"
+  }, f, {
+    children: a
+  }))), p != null && p.type !== F && !d && (p = /* @__PURE__ */ b(F, u({
+    variant: "body2",
+    className: v.secondary,
+    color: "text.secondary",
+    display: "block"
+  }, g, {
+    children: p
+  }))), /* @__PURE__ */ U(He, u({
+    className: T(v.root, i),
+    ownerState: y,
+    ref: s
+  }, x, {
+    children: [a, p]
+  }));
 });
 process.env.NODE_ENV !== "production" && (le.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -778,40 +780,9 @@ process.env.NODE_ENV !== "production" && (le.propTypes = {
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
   /**
-   * Defines the `align-items` style property.
-   * @default 'center'
-   */
-  alignItems: t.oneOf(["center", "flex-start"]),
-  /**
-   * If `true`, the list item is focused during the first mount.
-   * Focus will also be triggered if the value changes from false to true.
-   * @default false
-   * @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
-   */
-  autoFocus: t.bool,
-  /**
-   * If `true`, the list item is a button (using `ButtonBase`). Props intended
-   * for `ButtonBase` can then be applied to `ListItem`.
-   * @default false
-   * @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
-   */
-  button: t.bool,
-  /**
-   * The content of the component if a `ListItemSecondaryAction` is used it must
-   * be the last child.
+   * Alias for the `primary` prop.
    */
-  children: Le(t.node, (e) => {
-    const o = l.Children.toArray(e.children);
-    let s = -1;
-    for (let n = o.length - 1; n >= 0; n -= 1) {
-      const c = o[n];
-      if (ae(c, ["ListItemSecondaryAction"])) {
-        s = n;
-        break;
-      }
-    }
-    return s !== -1 && s !== o.length - 1 ? new Error("MUI: You used an element after ListItemSecondaryAction. For ListItem to detect that it has a secondary action you must pass it as the last child to ListItem.") : null;
-  }),
+  children: t.node,
   /**
    * Override or extend the styles applied to the component.
    */
@@ -821,112 +792,141 @@ process.env.NODE_ENV !== "production" && (le.propTypes = {
    */
   className: t.string,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: t.elementType,
-  /**
-   * The components used for each slot inside.
-   *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
-   *
-   * @default {}
-   */
-  components: t.shape({
-    Root: t.elementType
-  }),
-  /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
-   *
-   * @default {}
-   */
-  componentsProps: t.shape({
-    root: t.object
-  }),
-  /**
-   * The container component used when a `ListItemSecondaryAction` is the last child.
-   * @default 'li'
-   * @deprecated
-   */
-  ContainerComponent: ge,
-  /**
-   * Props applied to the container component if used.
-   * @default {}
-   * @deprecated
+   * If `true`, the children won't be wrapped by a Typography component.
+   * This can be useful to render an alternative Typography variant by wrapping
+   * the `children` (or `primary`) text, and optional `secondary` text
+   * with the Typography component.
+   * @default false
    */
-  ContainerProps: t.object,
+  disableTypography: t.bool,
   /**
-   * If `true`, compact vertical padding designed for keyboard and mouse input is used.
-   * The prop defaults to the value inherited from the parent List component.
+   * If `true`, the children are indented.
+   * This should be used if there is no left avatar or left icon.
    * @default false
    */
-  dense: t.bool,
+  inset: t.bool,
   /**
-   * If `true`, the component is disabled.
-   * @default false
-   * @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
+   * The main content element.
    */
-  disabled: t.bool,
+  primary: t.node,
   /**
-   * If `true`, the left and right padding is removed.
-   * @default false
+   * These props will be forwarded to the primary typography component
+   * (as long as disableTypography is not `true`).
    */
-  disableGutters: t.bool,
+  primaryTypographyProps: t.object,
   /**
-   * If `true`, all padding is removed.
-   * @default false
+   * The secondary content element.
    */
-  disablePadding: t.bool,
+  secondary: t.node,
   /**
-   * If `true`, a 1px light border is added to the bottom of the list item.
-   * @default false
+   * These props will be forwarded to the secondary typography component
+   * (as long as disableTypography is not `true`).
    */
-  divider: t.bool,
+  secondaryTypographyProps: t.object,
   /**
-   * @ignore
+   * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  focusVisibleClassName: t.string,
+  sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object])
+});
+function oe(e) {
+  return e.substring(2).toLowerCase();
+}
+function Ye(e, o) {
+  return o.documentElement.clientWidth < e.clientX || o.documentElement.clientHeight < e.clientY;
+}
+function _(e) {
+  const {
+    children: o,
+    disableReactTree: s = !1,
+    mouseEvent: n = "onClick",
+    onClickAway: c,
+    touchEvent: i = "onTouchEnd"
+  } = e, d = l.useRef(!1), r = l.useRef(null), m = l.useRef(!1), f = l.useRef(!1);
+  l.useEffect(() => (setTimeout(() => {
+    m.current = !0;
+  }, 0), () => {
+    m.current = !1;
+  }), []);
+  const C = H(
+    // @ts-expect-error TODO upstream fix
+    o.ref,
+    r
+  ), g = ge((a) => {
+    const p = f.current;
+    f.current = !1;
+    const y = z(r.current);
+    if (!m.current || !r.current || "clientX" in a && Ye(a, y))
+      return;
+    if (d.current) {
+      d.current = !1;
+      return;
+    }
+    let v;
+    a.composedPath ? v = a.composedPath().indexOf(r.current) > -1 : v = !y.documentElement.contains(
+      // @ts-expect-error returns `false` as intended when not dispatched from a Node
+      a.target
+    ) || r.current.contains(
+      // @ts-expect-error returns `false` as intended when not dispatched from a Node
+      a.target
+    ), !v && (s || !p) && c(a);
+  }), x = (a) => (p) => {
+    f.current = !0;
+    const y = o.props[a];
+    y && y(p);
+  }, I = {
+    ref: C
+  };
+  return i !== !1 && (I[i] = x(i)), l.useEffect(() => {
+    if (i !== !1) {
+      const a = oe(i), p = z(r.current), y = () => {
+        d.current = !0;
+      };
+      return p.addEventListener(a, g), p.addEventListener("touchmove", y), () => {
+        p.removeEventListener(a, g), p.removeEventListener("touchmove", y);
+      };
+    }
+  }, [g, i]), n !== !1 && (I[n] = x(n)), l.useEffect(() => {
+    if (n !== !1) {
+      const a = oe(n), p = z(r.current);
+      return p.addEventListener(a, g), () => {
+        p.removeEventListener(a, g);
+      };
+    }
+  }, [g, n]), /* @__PURE__ */ b(l.Fragment, {
+    children: /* @__PURE__ */ l.cloneElement(o, I)
+  });
+}
+process.env.NODE_ENV !== "production" && (_.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
   /**
-   * The element to display at the end of ListItem.
+   * The wrapped element.
    */
-  secondaryAction: t.node,
+  children: ve.isRequired,
   /**
-   * Use to apply selected styling.
+   * If `true`, the React tree is ignored and only the DOM tree is considered.
+   * This prop changes how portaled elements are handled.
    * @default false
-   * @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
    */
-  selected: t.bool,
+  disableReactTree: t.bool,
   /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
-   *
-   * @default {}
+   * The mouse event to listen to. You can disable the listener by providing `false`.
+   * @default 'onClick'
    */
-  slotProps: t.shape({
-    root: t.object
-  }),
+  mouseEvent: t.oneOf(["onClick", "onMouseDown", "onMouseUp", "onPointerDown", "onPointerUp", !1]),
   /**
-   * The components used for each slot inside.
-   *
-   * This prop is an alias for the `components` prop, which will be deprecated in the future.
-   *
-   * @default {}
+   * Callback fired when a "click away" event is detected.
    */
-  slots: t.shape({
-    root: t.elementType
-  }),
+  onClickAway: t.func.isRequired,
   /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
+   * The touch event to listen to. You can disable the listener by providing `false`.
+   * @default 'onTouchEnd'
    */
-  sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object])
+  touchEvent: t.oneOf(["onTouchEnd", "onTouchStart", !1])
 });
+process.env.NODE_ENV !== "production" && (_.propTypes = Ie(_.propTypes));
 const rt = ({
   open: e,
   buttons: o,
@@ -953,10 +953,10 @@ const rt = ({
         ...c
       },
       disablePadding: !0,
-      children: o.map((r, m) => /* @__PURE__ */ b(le, { secondaryAction: r.endIcon, disablePadding: !0, children: /* @__PURE__ */ U(ce, { role: void 0, onClick: r.onClick, dense: !0, children: [
-        r.startIcon !== void 0 && /* @__PURE__ */ b(re, { sx: { minWidth: "auto", mr: 1 }, children: r.startIcon }),
+      children: o.map((r, m) => /* @__PURE__ */ b(ie, { secondaryAction: r.endIcon, disablePadding: !0, children: /* @__PURE__ */ U(re, { role: void 0, onClick: r.onClick, dense: !0, children: [
+        r.startIcon !== void 0 && /* @__PURE__ */ b(ce, { sx: { minWidth: "auto", mr: 1 }, children: r.startIcon }),
         /* @__PURE__ */ b(
-          ie,
+          le,
           {
             primary: r.label,
             primaryTypographyProps: {