@hybridcore/ui 1.6.0 → 1.6.2

package/dist/{IconButton-CHwRQF-g.js → IconButton-BoGwbvrP.js}

@@ -1,40 +1,38 @@
-import { a as s, _ as h } from "./objectWithoutPropertiesLoose-DJteAcBH.js";
+import { a as t, _ as h } from "./objectWithoutPropertiesLoose-DJteAcBH.js";
 import * as d from "react";
 import { P as r } from "./index-C__OZmYy.js";
-import { g as z, u as R, c as C, b as B, a as I } from "./useThemeProps-BzzHcQyd.js";
-import { alpha as g } from "@mui/system";
-import { s as O } from "./styled-eZwjUruw.js";
-import { g as T } from "./createTheme-DYxDnE9u.js";
+import { c as z } from "./clsx-OuTLNxxd.js";
+import { g as R, a as C, s as B, b as n, f as g, u as I, c as O } from "./generateUtilityClasses-C3ivN9Ie.js";
 import { jsx as x } from "react/jsx-runtime";
-import { B as $ } from "./ButtonBase-2bPw77UP.js";
-import { c as i } from "./capitalize-ciszXJ7R.js";
+import { B as T } from "./ButtonBase-BEF7oTOe.js";
+import { c as $ } from "./TransitionGroupContext-BDAp2T0O.js";
 function k(o) {
-  return T("MuiIconButton", o);
+  return C("MuiIconButton", o);
 }
-const P = z("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorError", "colorInfo", "colorSuccess", "colorWarning", "edgeStart", "edgeEnd", "sizeSmall", "sizeMedium", "sizeLarge"]), j = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"], E = (o) => {
+const P = R("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorError", "colorInfo", "colorSuccess", "colorWarning", "edgeStart", "edgeEnd", "sizeSmall", "sizeMedium", "sizeLarge"]), _ = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"], j = (o) => {
   const {
     classes: e,
     disabled: a,
-    color: t,
-    edge: n,
+    color: s,
+    edge: i,
     size: l
   } = o, c = {
-    root: ["root", a && "disabled", t !== "default" && `color${i(t)}`, n && `edge${i(n)}`, `size${i(l)}`]
+    root: ["root", a && "disabled", s !== "default" && `color${n(s)}`, i && `edge${n(i)}`, `size${n(l)}`]
   };
-  return I(c, k, e);
-}, M = O($, {
+  return O(c, k, e);
+}, E = B(T, {
   name: "MuiIconButton",
   slot: "Root",
   overridesResolver: (o, e) => {
     const {
       ownerState: a
     } = o;
-    return [e.root, a.color !== "default" && e[`color${i(a.color)}`], a.edge && e[`edge${i(a.edge)}`], e[`size${i(a.size)}`]];
+    return [e.root, a.color !== "default" && e[`color${n(a.color)}`], a.edge && e[`edge${n(a.edge)}`], e[`size${n(a.size)}`]];
   }
 })(({
   theme: o,
   ownerState: e
-}) => s({
+}) => t({
   textAlign: "center",
   flex: "0 0 auto",
   fontSize: o.typography.pxToRem(24),
@@ -63,14 +61,14 @@ const P = z("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary"
   ownerState: e
 }) => {
   var a;
-  const t = (a = (o.vars || o).palette) == null ? void 0 : a[e.color];
-  return s({}, e.color === "inherit" && {
+  const s = (a = (o.vars || o).palette) == null ? void 0 : a[e.color];
+  return t({}, e.color === "inherit" && {
     color: "inherit"
-  }, e.color !== "inherit" && e.color !== "default" && s({
-    color: t == null ? void 0 : t.main
+  }, e.color !== "inherit" && e.color !== "default" && t({
+    color: s == null ? void 0 : s.main
   }, !e.disableRipple && {
-    "&:hover": s({}, t && {
-      backgroundColor: o.vars ? `rgba(${t.mainChannel} / ${o.vars.palette.action.hoverOpacity})` : g(t.main, o.palette.action.hoverOpacity)
+    "&:hover": t({}, s && {
+      backgroundColor: o.vars ? `rgba(${s.mainChannel} / ${o.vars.palette.action.hoverOpacity})` : g(s.main, o.palette.action.hoverOpacity)
     }, {
       // Reset on touch devices, it doesn't add specificity
       "@media (hover: none)": {
@@ -89,45 +87,45 @@ const P = z("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary"
       color: (o.vars || o).palette.action.disabled
     }
   });
-}), N = /* @__PURE__ */ d.forwardRef(function(e, a) {
-  const t = R({
+}), M = /* @__PURE__ */ d.forwardRef(function(e, a) {
+  const s = I({
     props: e,
     name: "MuiIconButton"
   }), {
-    edge: n = !1,
+    edge: i = !1,
     children: l,
     className: c,
     color: b = "default",
     disabled: p = !1,
     disableFocusRipple: u = !1,
-    size: m = "medium"
-  } = t, v = h(t, j), f = s({}, t, {
-    edge: n,
+    size: v = "medium"
+  } = s, m = h(s, _), f = t({}, s, {
+    edge: i,
     color: b,
     disabled: p,
     disableFocusRipple: u,
-    size: m
-  }), y = E(f);
-  return /* @__PURE__ */ x(M, s({
-    className: C(y.root, c),
+    size: v
+  }), y = j(f);
+  return /* @__PURE__ */ x(E, t({
+    className: z(y.root, c),
     centerRipple: !0,
     focusRipple: !u,
     disabled: p,
-    ref: a,
-    ownerState: f
-  }, v, {
+    ref: a
+  }, m, {
+    ownerState: f,
     children: l
   }));
 });
-process.env.NODE_ENV !== "production" && (N.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+process.env.NODE_ENV !== "production" && (M.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * The icon to display.
    */
-  children: B(r.node, (o) => d.Children.toArray(o.children).some((a) => /* @__PURE__ */ d.isValidElement(a) && a.props.onClick) ? new Error(["MUI: You are providing an onClick event listener to a child of a button element.", "Prefer applying it to the IconButton directly.", "This guarantees that the whole <button> will be responsive to click events."].join(`
+  children: $(r.node, (o) => d.Children.toArray(o.children).some((a) => /* @__PURE__ */ d.isValidElement(a) && a.props.onClick) ? new Error(["MUI: You are providing an onClick event listener to a child of a button element.", "Prefer applying it to the IconButton directly.", "This guarantees that the whole <button> will be responsive to click events."].join(`
 `)) : null),
   /**
    * Override or extend the styles applied to the component.
@@ -140,7 +138,7 @@ process.env.NODE_ENV !== "production" && (N.propTypes = {
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the
-   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    * @default 'default'
    */
   color: r.oneOfType([r.oneOf(["inherit", "default", "primary", "secondary", "error", "info", "success", "warning"]), r.string]),
@@ -182,5 +180,5 @@ process.env.NODE_ENV !== "production" && (N.propTypes = {
   sx: r.oneOfType([r.arrayOf(r.oneOfType([r.func, r.object, r.bool])), r.func, r.object])
 });
 export {
-  N as I
+  M as I
 };

package/dist/InputLabel-Dd8RrneV.js

@@ -0,0 +1,341 @@
+import { a as i, _ as h } from "./objectWithoutPropertiesLoose-DJteAcBH.js";
+import * as k from "react";
+import { P as o } from "./index-C__OZmYy.js";
+import { c as y } from "./clsx-OuTLNxxd.js";
+import { f as g } from "./formControlState-vgaj2ksH.js";
+import { u as C } from "./useFormControl-CatNKXAi.js";
+import { g as O, a as L, s as b, u as z, b as q, c as F, r as I } from "./generateUtilityClasses-C3ivN9Ie.js";
+import { jsxs as v, jsx as T } from "react/jsx-runtime";
+function R(e) {
+  return L("MuiFormLabel", e);
+}
+const u = O("MuiFormLabel", ["root", "colorSecondary", "focused", "disabled", "error", "filled", "required", "asterisk"]), j = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"], M = (e) => {
+  const {
+    classes: r,
+    color: a,
+    focused: s,
+    disabled: f,
+    error: l,
+    filled: c,
+    required: p
+  } = e, n = {
+    root: ["root", `color${q(a)}`, f && "disabled", l && "error", c && "filled", s && "focused", p && "required"],
+    asterisk: ["asterisk", l && "error"]
+  };
+  return F(n, R, r);
+}, $ = b("label", {
+  name: "MuiFormLabel",
+  slot: "Root",
+  overridesResolver: ({
+    ownerState: e
+  }, r) => i({}, r.root, e.color === "secondary" && r.colorSecondary, e.filled && r.filled)
+})(({
+  theme: e,
+  ownerState: r
+}) => i({
+  color: (e.vars || e).palette.text.secondary
+}, e.typography.body1, {
+  lineHeight: "1.4375em",
+  padding: 0,
+  position: "relative",
+  [`&.${u.focused}`]: {
+    color: (e.vars || e).palette[r.color].main
+  },
+  [`&.${u.disabled}`]: {
+    color: (e.vars || e).palette.text.disabled
+  },
+  [`&.${u.error}`]: {
+    color: (e.vars || e).palette.error.main
+  }
+})), A = b("span", {
+  name: "MuiFormLabel",
+  slot: "Asterisk",
+  overridesResolver: (e, r) => r.asterisk
+})(({
+  theme: e
+}) => ({
+  [`&.${u.error}`]: {
+    color: (e.vars || e).palette.error.main
+  }
+})), N = /* @__PURE__ */ k.forwardRef(function(r, a) {
+  const s = z({
+    props: r,
+    name: "MuiFormLabel"
+  }), {
+    children: f,
+    className: l,
+    component: c = "label"
+  } = s, p = h(s, j), n = C(), t = g({
+    props: s,
+    muiFormControl: n,
+    states: ["color", "required", "focused", "disabled", "error", "filled"]
+  }), d = i({}, s, {
+    color: t.color || "primary",
+    component: c,
+    disabled: t.disabled,
+    error: t.error,
+    filled: t.filled,
+    focused: t.focused,
+    required: t.required
+  }), m = M(d);
+  return /* @__PURE__ */ v($, i({
+    as: c,
+    ownerState: d,
+    className: y(m.root, l),
+    ref: a
+  }, p, {
+    children: [f, t.required && /* @__PURE__ */ v(A, {
+      ownerState: d,
+      "aria-hidden": !0,
+      className: m.asterisk,
+      children: [" ", "*"]
+    })]
+  }));
+});
+process.env.NODE_ENV !== "production" && (N.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.
+   */
+  children: o.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   */
+  color: o.oneOfType([o.oneOf(["error", "info", "primary", "secondary", "success", "warning"]), 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`, the label should be displayed in a disabled state.
+   */
+  disabled: o.bool,
+  /**
+   * If `true`, the label is displayed in an error state.
+   */
+  error: o.bool,
+  /**
+   * If `true`, the label should use filled classes key.
+   */
+  filled: o.bool,
+  /**
+   * If `true`, the input of this label is focused (used by `FormGroup` components).
+   */
+  focused: o.bool,
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   */
+  required: 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])
+});
+function E(e) {
+  return L("MuiInputLabel", e);
+}
+O("MuiInputLabel", ["root", "focused", "disabled", "error", "required", "asterisk", "formControl", "sizeSmall", "shrink", "animated", "standard", "filled", "outlined"]);
+const P = ["disableAnimation", "margin", "shrink", "variant", "className"], W = (e) => {
+  const {
+    classes: r,
+    formControl: a,
+    size: s,
+    shrink: f,
+    disableAnimation: l,
+    variant: c,
+    required: p
+  } = e, n = {
+    root: ["root", a && "formControl", !l && "animated", f && "shrink", s && s !== "normal" && `size${q(s)}`, c],
+    asterisk: [p && "asterisk"]
+  }, t = F(n, E, r);
+  return i({}, r, t);
+}, _ = b(N, {
+  shouldForwardProp: (e) => I(e) || e === "classes",
+  name: "MuiInputLabel",
+  slot: "Root",
+  overridesResolver: (e, r) => {
+    const {
+      ownerState: a
+    } = e;
+    return [{
+      [`& .${u.asterisk}`]: r.asterisk
+    }, r.root, a.formControl && r.formControl, a.size === "small" && r.sizeSmall, a.shrink && r.shrink, !a.disableAnimation && r.animated, a.focused && r.focused, r[a.variant]];
+  }
+})(({
+  theme: e,
+  ownerState: r
+}) => i({
+  display: "block",
+  transformOrigin: "top left",
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  maxWidth: "100%"
+}, r.formControl && {
+  position: "absolute",
+  left: 0,
+  top: 0,
+  // slight alteration to spec spacing to match visual spec result
+  transform: "translate(0, 20px) scale(1)"
+}, r.size === "small" && {
+  // Compensation for the `Input.inputSizeSmall` style.
+  transform: "translate(0, 17px) scale(1)"
+}, r.shrink && {
+  transform: "translate(0, -1.5px) scale(0.75)",
+  transformOrigin: "top left",
+  maxWidth: "133%"
+}, !r.disableAnimation && {
+  transition: e.transitions.create(["color", "transform", "max-width"], {
+    duration: e.transitions.duration.shorter,
+    easing: e.transitions.easing.easeOut
+  })
+}, r.variant === "filled" && i({
+  // Chrome's autofill feature gives the input field a yellow background.
+  // Since the input field is behind the label in the HTML tree,
+  // the input field is drawn last and hides the label with an opaque background color.
+  // zIndex: 1 will raise the label above opaque background-colors of input.
+  zIndex: 1,
+  pointerEvents: "none",
+  transform: "translate(12px, 16px) scale(1)",
+  maxWidth: "calc(100% - 24px)"
+}, r.size === "small" && {
+  transform: "translate(12px, 13px) scale(1)"
+}, r.shrink && i({
+  userSelect: "none",
+  pointerEvents: "auto",
+  transform: "translate(12px, 7px) scale(0.75)",
+  maxWidth: "calc(133% - 24px)"
+}, r.size === "small" && {
+  transform: "translate(12px, 4px) scale(0.75)"
+})), r.variant === "outlined" && i({
+  // see comment above on filled.zIndex
+  zIndex: 1,
+  pointerEvents: "none",
+  transform: "translate(14px, 16px) scale(1)",
+  maxWidth: "calc(100% - 24px)"
+}, r.size === "small" && {
+  transform: "translate(14px, 9px) scale(1)"
+}, r.shrink && {
+  userSelect: "none",
+  pointerEvents: "auto",
+  // Theoretically, we should have (8+5)*2/0.75 = 34px
+  // but it feels a better when it bleeds a bit on the left, so 32px.
+  maxWidth: "calc(133% - 32px)",
+  transform: "translate(14px, -9px) scale(0.75)"
+}))), w = /* @__PURE__ */ k.forwardRef(function(r, a) {
+  const s = z({
+    name: "MuiInputLabel",
+    props: r
+  }), {
+    disableAnimation: f = !1,
+    shrink: l,
+    className: c
+  } = s, p = h(s, P), n = C();
+  let t = l;
+  typeof t > "u" && n && (t = n.filled || n.focused || n.adornedStart);
+  const d = g({
+    props: s,
+    muiFormControl: n,
+    states: ["size", "variant", "required", "focused"]
+  }), m = i({}, s, {
+    disableAnimation: f,
+    formControl: n,
+    shrink: t,
+    size: d.size,
+    variant: d.variant,
+    required: d.required,
+    focused: d.focused
+  }), x = W(m);
+  return /* @__PURE__ */ T(_, i({
+    "data-shrink": t,
+    ownerState: m,
+    ref: a,
+    className: y(x.root, c)
+  }, p, {
+    classes: x
+  }));
+});
+process.env.NODE_ENV !== "production" && (w.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.
+   */
+  children: o.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   */
+  color: o.oneOfType([o.oneOf(["error", "info", "primary", "secondary", "success", "warning"]), o.string]),
+  /**
+   * If `true`, the transition animation is disabled.
+   * @default false
+   */
+  disableAnimation: o.bool,
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled: o.bool,
+  /**
+   * If `true`, the label is displayed in an error state.
+   */
+  error: o.bool,
+  /**
+   * If `true`, the `input` of this label is focused.
+   */
+  focused: o.bool,
+  /**
+   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
+   * FormControl.
+   */
+  margin: o.oneOf(["dense"]),
+  /**
+   * if `true`, the label will indicate that the `input` is required.
+   */
+  required: o.bool,
+  /**
+   * If `true`, the label is shrunk.
+   */
+  shrink: o.bool,
+  /**
+   * The size of the component.
+   * @default 'normal'
+   */
+  size: o.oneOfType([o.oneOf(["normal", "small"]), o.string]),
+  /**
+   * 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]),
+  /**
+   * The variant to use.
+   */
+  variant: o.oneOf(["filled", "outlined", "standard"])
+});
+export {
+  w as I
+};

package/dist/{MenuItem-xZx_w7zA.js → MenuItem-DwqJqzuM.js}

@@ -1,19 +1,17 @@
-import { a as l, _ as L } from "./objectWithoutPropertiesLoose-DJteAcBH.js";
+import { a as l, _ as P } from "./objectWithoutPropertiesLoose-DJteAcBH.js";
 import * as d from "react";
 import { P as t } from "./index-C__OZmYy.js";
-import { g as V, u as j, c as x, a as E } from "./useThemeProps-BzzHcQyd.js";
-import { alpha as p } from "@mui/system";
-import { s as F, r as G } from "./styled-eZwjUruw.js";
-import { L as I } from "./List-tqElle9C.js";
-import { g as U } from "./createTheme-DYxDnE9u.js";
-import { jsx as $ } from "react/jsx-runtime";
-import { B as _, u as D, a as S } from "./ButtonBase-2bPw77UP.js";
-import { l as O, a as M } from "./listItemTextClasses-C3lndiXO.js";
-const N = V("MuiDivider", ["root", "absolute", "fullWidth", "inset", "middle", "flexItem", "light", "vertical", "withChildren", "withChildrenVertical", "textAlignRight", "textAlignLeft", "wrapper", "wrapperVertical"]);
-function h(e) {
-  return U("MuiMenuItem", e);
+import { c as I } from "./clsx-OuTLNxxd.js";
+import { g as u, a as F, s as _, r as j, f as p, u as D, c as E } from "./generateUtilityClasses-C3ivN9Ie.js";
+import { L as $ } from "./Select-DHUl_uG3.js";
+import { jsx as M } from "react/jsx-runtime";
+import { B as G } from "./ButtonBase-BEF7oTOe.js";
+import { a as U, u as S } from "./TransitionGroupContext-BDAp2T0O.js";
+const O = u("MuiDivider", ["root", "absolute", "fullWidth", "inset", "middle", "flexItem", "light", "vertical", "withChildren", "withChildrenVertical", "textAlignRight", "textAlignLeft", "wrapper", "wrapperVertical"]), N = u("MuiListItemIcon", ["root", "alignItemsFlexStart"]), V = u("MuiListItemText", ["root", "multiline", "dense", "inset", "primary", "secondary"]);
+function H(e) {
+  return F("MuiMenuItem", e);
 }
-const n = V("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divider", "gutters", "selected"]), H = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"], W = (e, o) => {
+const n = u("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divider", "gutters", "selected"]), W = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"], h = (e, o) => {
   const {
     ownerState: s
   } = e;
@@ -24,17 +22,17 @@ const n = V("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divide
     dense: s,
     divider: a,
     disableGutters: c,
-    selected: u,
+    selected: b,
     classes: i
   } = e, r = E({
-    root: ["root", s && "dense", o && "disabled", !c && "gutters", a && "divider", u && "selected"]
-  }, h, i);
+    root: ["root", s && "dense", o && "disabled", !c && "gutters", a && "divider", b && "selected"]
+  }, H, i);
   return l({}, i, r);
-}, A = F(_, {
-  shouldForwardProp: (e) => G(e) || e === "classes",
+}, A = _(G, {
+  shouldForwardProp: (e) => j(e) || e === "classes",
   name: "MuiMenuItem",
   slot: "Root",
-  overridesResolver: W
+  overridesResolver: h
 })(({
   theme: e,
   ownerState: o
@@ -83,21 +81,21 @@ const n = V("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divide
   [`&.${n.disabled}`]: {
     opacity: (e.vars || e).palette.action.disabledOpacity
   },
-  [`& + .${N.root}`]: {
+  [`& + .${O.root}`]: {
     marginTop: e.spacing(1),
     marginBottom: e.spacing(1)
   },
-  [`& + .${N.inset}`]: {
+  [`& + .${O.inset}`]: {
     marginLeft: 52
   },
-  [`& .${O.root}`]: {
+  [`& .${V.root}`]: {
     marginTop: 0,
     marginBottom: 0
   },
-  [`& .${O.inset}`]: {
+  [`& .${V.inset}`]: {
     paddingLeft: 36
   },
-  [`& .${M.root}`]: {
+  [`& .${N.root}`]: {
     minWidth: 36
   }
 }, !o.dense && {
@@ -110,56 +108,56 @@ const n = V("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divide
   paddingTop: 4,
   paddingBottom: 4
 }, e.typography.body2, {
-  [`& .${M.root} svg`]: {
+  [`& .${N.root} svg`]: {
     fontSize: "1.25rem"
   }
 }))), q = /* @__PURE__ */ d.forwardRef(function(o, s) {
-  const a = j({
+  const a = D({
     props: o,
     name: "MuiMenuItem"
   }), {
     autoFocus: c = !1,
-    component: u = "li",
+    component: b = "li",
     dense: i = !1,
-    divider: f = !1,
+    divider: g = !1,
     disableGutters: r = !1,
     focusVisibleClassName: R,
     role: T = "menuitem",
-    tabIndex: g,
+    tabIndex: v,
     className: k
-  } = a, w = L(a, H), v = d.useContext(I), y = d.useMemo(() => ({
-    dense: i || v.dense || !1,
+  } = a, w = P(a, W), y = d.useContext($), C = d.useMemo(() => ({
+    dense: i || y.dense || !1,
     disableGutters: r
-  }), [v.dense, i, r]), b = d.useRef(null);
-  D(() => {
-    c && (b.current ? b.current.focus() : process.env.NODE_ENV !== "production" && console.error("MUI: Unable to set focus to a MenuItem whose component has not been rendered."));
+  }), [y.dense, i, r]), m = d.useRef(null);
+  U(() => {
+    c && (m.current ? m.current.focus() : process.env.NODE_ENV !== "production" && console.error("MUI: Unable to set focus to a MenuItem whose component has not been rendered."));
   }, [c]);
-  const B = l({}, a, {
-    dense: y.dense,
-    divider: f,
+  const L = l({}, a, {
+    dense: C.dense,
+    divider: g,
     disableGutters: r
-  }), m = z(a), P = S(b, s);
-  let C;
-  return a.disabled || (C = g !== void 0 ? g : -1), /* @__PURE__ */ $(I.Provider, {
-    value: y,
-    children: /* @__PURE__ */ $(A, l({
-      ref: P,
+  }), f = z(a), B = S(m, s);
+  let x;
+  return a.disabled || (x = v !== void 0 ? v : -1), /* @__PURE__ */ M($.Provider, {
+    value: C,
+    children: /* @__PURE__ */ M(A, l({
+      ref: B,
       role: T,
-      tabIndex: C,
-      component: u,
-      focusVisibleClassName: x(m.focusVisible, R),
-      className: x(m.root, k)
+      tabIndex: x,
+      component: b,
+      focusVisibleClassName: I(f.focusVisible, R),
+      className: I(f.root, k)
     }, w, {
-      ownerState: B,
-      classes: m
+      ownerState: L,
+      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 "yarn 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.