@hybridcore/ui 1.0.2 → 1.1.0

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

@@ -0,0 +1,973 @@
+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 { 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 { 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 { 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, 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 = 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) => {
+  const {
+    alignItems: o,
+    classes: s
+  } = e;
+  return w({
+    root: ["root", o === "flex-start" && "alignItemsFlexStart"]
+  }, Ce, s);
+}, Pe = A("div", {
+  name: "MuiListItemIcon",
+  slot: "Root",
+  overridesResolver: (e, o) => {
+    const {
+      ownerState: s
+    } = e;
+    return [o.root, s.alignItems === "flex-start" && o.alignItemsFlexStart];
+  }
+})(({
+  theme: e,
+  ownerState: o
+}) => u({
+  minWidth: 56,
+  color: (e.vars || e).palette.action.active,
+  flexShrink: 0,
+  display: "inline-flex"
+}, o.alignItems === "flex-start" && {
+  marginTop: 8
+})), re = /* @__PURE__ */ l.forwardRef(function(o, s) {
+  const n = M({
+    props: o,
+    name: "MuiListItemIcon"
+  }), {
+    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));
+});
+process.env.NODE_ENV !== "production" && (re.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 `Icon`, `SvgIcon`,
+   * or a `@mui/icons-material` SVG icon element.
+   */
+  children: t.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: t.object,
+  /**
+   * @ignore
+   */
+  className: t.string,
+  /**
+   * 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) => {
+  const {
+    classes: o,
+    inset: s,
+    primary: n,
+    secondary: c,
+    dense: i
+  } = e;
+  return w({
+    root: ["root", s && "inset", i && "dense", n && c && "multiline"],
+    primary: ["primary"],
+    secondary: ["secondary"]
+  }, xe, o);
+}, Ae = A("div", {
+  name: "MuiListItemText",
+  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];
+  }
+})(({
+  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) {
+  const n = M({
+    props: o,
+    name: "MuiListItemText"
+  }), {
+    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,
+    ref: s
+  }, x, {
+    children: [a, p]
+  }));
+});
+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`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Alias for the `primary` prop.
+   */
+  children: t.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: t.object,
+  /**
+   * @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) => {
+  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",
+  slot: "Root",
+  overridesResolver: we
+})(({
+  theme: e,
+  ownerState: o
+}) => u({
+  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" && {
+  alignItems: "flex-start"
+}, !o.disableGutters && {
+  paddingLeft: 16,
+  paddingRight: 16
+}, o.dense && {
+  paddingTop: 4,
+  paddingBottom: 4
+})), ce = /* @__PURE__ */ l.forwardRef(function(o, s) {
+  const n = M({
+    props: o,
+    name: "MuiListItemButton"
+  }), {
+    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, Me), 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 = 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
+    }))
+  });
+});
+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`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * 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,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: t.object,
+  /**
+   * @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])
+});
+function Be(e) {
+  return q("MuiListItemSecondaryAction", e);
+}
+Y("MuiListItemSecondaryAction", ["root", "disableGutters"]);
+const Ge = ["className"], Fe = (e) => {
+  const {
+    disableGutters: o,
+    classes: s
+  } = e;
+  return w({
+    root: ["root", o && "disableGutters"]
+  }, Be, s);
+}, Ue = A("div", {
+  name: "MuiListItemSecondaryAction",
+  slot: "Root",
+  overridesResolver: (e, o) => {
+    const {
+      ownerState: s
+    } = e;
+    return [o.root, s.disableGutters && o.disableGutters];
+  }
+})(({
+  ownerState: e
+}) => u({
+  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: "MuiListItemSecondaryAction"
+  }), {
+    className: c
+  } = n, i = $(n, Ge), d = l.useContext(L), r = u({}, n, {
+    disableGutters: d.disableGutters
+  }), m = Fe(r);
+  return /* @__PURE__ */ b(Ue, u({
+    className: T(m.root, c),
+    ownerState: r,
+    ref: s
+  }, i));
+});
+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`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component, normally an `IconButton` or selection control.
+   */
+  children: t.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: t.object,
+  /**
+   * @ignore
+   */
+  className: t.string,
+  /**
+   * 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])
+});
+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 {
+    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"]
+  }, Se, n);
+}, He = A("div", {
+  name: "MuiListItem",
+  slot: "Root",
+  overridesResolver: We
+})(({
+  theme: e,
+  ownerState: o
+}) => 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) {
+  const n = M({
+    props: o,
+    name: "MuiListItem"
+  }), {
+    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
+      })]
+    }))
+  });
+});
+process.env.NODE_ENV !== "production" && (le.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    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.
+   */
+  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.
+   */
+  classes: t.object,
+  /**
+   * @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,
+  /**
+   * 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
+   */
+  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.
+   * @default false
+   */
+  dense: t.bool,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   * @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
+   */
+  disabled: t.bool,
+  /**
+   * If `true`, the left and right padding is removed.
+   * @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,
+  /**
+   * @ignore
+   */
+  focusVisibleClassName: t.string,
+  /**
+   * The element to display at the end of ListItem.
+   */
+  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])
+});
+const rt = ({
+  open: e,
+  buttons: o,
+  position: s,
+  width: n = 160,
+  sx: c,
+  onClose: i
+}) => {
+  const d = () => {
+    i && i();
+  };
+  return e ? /* @__PURE__ */ b(_, { onClickAway: d, children: /* @__PURE__ */ b(
+    he,
+    {
+      sx: {
+        position: "absolute",
+        zIndex: 9999999,
+        width: n,
+        maxWidth: 360,
+        bgcolor: "background.paper",
+        left: s == null ? void 0 : s.left,
+        top: s == null ? void 0 : s.top,
+        borderRadius: 0.5,
+        ...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 }),
+        /* @__PURE__ */ b(
+          ie,
+          {
+            primary: r.label,
+            primaryTypographyProps: {
+              fontSize: "12px"
+            }
+          }
+        )
+      ] }) }, m))
+    }
+  ) }) : /* @__PURE__ */ b(ye, {});
+};
+export {
+  rt as ContextMenu
+};