import P from "./index-objectWithoutPropertiesLoose.js";
import l from "./index-extends.js";
import * as d from "react";
import o from "./index-_virtual16.js";
import { clsx as x } from "./index-clsx.js";
import { c as p } from "./index-colorManipulator2.js";
import j from "./index-styled.js";
import $ from "./index-ListContext.js";
import n, { getMenuItemUtilityClass as w } from "./index-menuItemClasses.js";
import { jsx as I } from "react/jsx-runtime";
import { useDefaultProps as F } from "./index-DefaultPropsProvider.js";
import G from "./index-useEnhancedEffect2.js";
import D from "./index-useForkRef.js";
import L from "./index-composeClasses.js";
import _ from "./index-ButtonBase.js";
import S from "./index-rootShouldForwardProp.js";
import O from "./index-listItemIconClasses.js";
import M from "./index-listItemTextClasses.js";
import N from "./index-dividerClasses.js";
const U = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"], H = (e, t) => {
  const {
    ownerState: a
  } = e;
  return [t.root, a.dense && t.dense, a.divider && t.divider, !a.disableGutters && t.gutters];
}, z = (e) => {
  const {
    disabled: t,
    dense: a,
    divider: s,
    disableGutters: c,
    selected: u,
    classes: r
  } = e, i = L({
    root: ["root", a && "dense", t && "disabled", !c && "gutters", s && "divider", u && "selected"]
  }, w, r);
  return l({}, r, i);
}, W = j(_, {
  shouldForwardProp: (e) => S(e) || e === "classes",
  name: "MuiMenuItem",
  slot: "Root",
  overridesResolver: H
})(({
  theme: e,
  ownerState: t
}) => l({}, e.typography.body1, {
  display: "flex",
  justifyContent: "flex-start",
  alignItems: "center",
  position: "relative",
  textDecoration: "none",
  minHeight: 48,
  paddingTop: 6,
  paddingBottom: 6,
  boxSizing: "border-box",
  whiteSpace: "nowrap"
}, !t.disableGutters && {
  paddingLeft: 16,
  paddingRight: 16
}, t.divider && {
  borderBottom: `1px solid ${(e.vars || e).palette.divider}`,
  backgroundClip: "padding-box"
}, {
  "&:hover": {
    textDecoration: "none",
    backgroundColor: (e.vars || e).palette.action.hover,
    // Reset on touch devices, it doesn't add specificity
    "@media (hover: none)": {
      backgroundColor: "transparent"
    }
  },
  [`&.${n.selected}`]: {
    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.selectedOpacity})` : p.alpha(e.palette.primary.main, e.palette.action.selectedOpacity),
    [`&.${n.focusVisible}`]: {
      backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.focusOpacity}))` : p.alpha(e.palette.primary.main, e.palette.action.selectedOpacity + e.palette.action.focusOpacity)
    }
  },
  [`&.${n.selected}:hover`]: {
    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.hoverOpacity}))` : p.alpha(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})` : p.alpha(e.palette.primary.main, e.palette.action.selectedOpacity)
    }
  },
  [`&.${n.focusVisible}`]: {
    backgroundColor: (e.vars || e).palette.action.focus
  },
  [`&.${n.disabled}`]: {
    opacity: (e.vars || e).palette.action.disabledOpacity
  },
  [`& + .${N.root}`]: {
    marginTop: e.spacing(1),
    marginBottom: e.spacing(1)
  },
  [`& + .${N.inset}`]: {
    marginLeft: 52
  },
  [`& .${M.root}`]: {
    marginTop: 0,
    marginBottom: 0
  },
  [`& .${M.inset}`]: {
    paddingLeft: 36
  },
  [`& .${O.root}`]: {
    minWidth: 36
  }
}, !t.dense && {
  [e.breakpoints.up("sm")]: {
    minHeight: "auto"
  }
}, t.dense && l({
  minHeight: 32,
  // https://m2.material.io/components/menus#specs > Dense
  paddingTop: 4,
  paddingBottom: 4
}, e.typography.body2, {
  [`& .${O.root} svg`]: {
    fontSize: "1.25rem"
  }
}))), q = /* @__PURE__ */ d.forwardRef(function(t, a) {
  const s = F({
    props: t,
    name: "MuiMenuItem"
  }), {
    autoFocus: c = !1,
    component: u = "li",
    dense: r = !1,
    divider: b = !1,
    disableGutters: i = !1,
    focusVisibleClassName: k,
    role: R = "menuitem",
    tabIndex: v,
    className: T
  } = s, V = P(s, U), g = d.useContext($), y = d.useMemo(() => ({
    dense: r || g.dense || !1,
    disableGutters: i
  }), [g.dense, r, i]), m = d.useRef(null);
  G(() => {
    c && (m.current ? m.current.focus() : process.env.NODE_ENV);
  }, [c]);
  const B = l({}, s, {
    dense: y.dense,
    divider: b,
    disableGutters: i
  }), f = z(s), E = D(m, a);
  let C;
  return s.disabled || (C = v !== void 0 ? v : -1), /* @__PURE__ */ I($.Provider, {
    value: y,
    children: /* @__PURE__ */ I(W, l({
      ref: E,
      role: R,
      tabIndex: C,
      component: u,
      focusVisibleClassName: x(f.focusVisible, k),
      className: x(f.root, T)
    }, V, {
      ownerState: B,
      classes: f
    }))
  });
});
process.env.NODE_ENV !== "production" && (q.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │    To update them, edit the d.ts file and run `pnpm 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
   */
  autoFocus: o.bool,
  /**
   * The content of the component.
   */
  children: o.node,
  /**
   * Override or extend the styles applied to the component.
   */
  classes: o.object,
  /**
   * @ignore
   */
  className: o.string,
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: o.elementType,
  /**
   * If `true`, compact vertical padding designed for keyboard and mouse input is used.
   * The prop defaults to the value inherited from the parent Menu component.
   * @default false
   */
  dense: o.bool,
  /**
   * @ignore
   */
  disabled: o.bool,
  /**
   * If `true`, the left and right padding is removed.
   * @default false
   */
  disableGutters: o.bool,
  /**
   * If `true`, a 1px light border is added to the bottom of the menu item.
   * @default false
   */
  divider: o.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: o.string,
  /**
   * @ignore
   */
  role: o.string,
  /**
   * If `true`, the component is selected.
   * @default false
   */
  selected: o.bool,
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
  /**
   * @default 0
   */
  tabIndex: o.number
});
export {
  q as default,
  H as overridesResolver
};
