import h from "./index-objectWithoutPropertiesLoose.js";
import i from "./index-extends.js";
import * as p from "react";
import r from "./index-_virtual16.js";
import { clsx as R } from "./index-clsx.js";
import { c as m } from "./index-colorManipulator2.js";
import z from "./index-styled.js";
import C, { getIconButtonUtilityClass as O } from "./index-iconButtonClasses.js";
import { jsx as x } from "react/jsx-runtime";
import { useDefaultProps as T } from "./index-DefaultPropsProvider.js";
import n from "./index-capitalize.js";
import $ from "./index-composeClasses.js";
import B from "./index-ButtonBase.js";
import k from "./index-chainPropTypes.js";
const I = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"], j = (o) => {
  const {
    classes: e,
    disabled: t,
    color: a,
    edge: s,
    size: l
  } = o, c = {
    root: ["root", t && "disabled", a !== "default" && `color${n(a)}`, s && `edge${n(s)}`, `size${n(l)}`]
  };
  return $(c, O, e);
}, N = z(B, {
  name: "MuiIconButton",
  slot: "Root",
  overridesResolver: (o, e) => {
    const {
      ownerState: t
    } = o;
    return [e.root, t.color !== "default" && e[`color${n(t.color)}`], t.edge && e[`edge${n(t.edge)}`], e[`size${n(t.size)}`]];
  }
})(({
  theme: o,
  ownerState: e
}) => i({
  textAlign: "center",
  flex: "0 0 auto",
  fontSize: o.typography.pxToRem(24),
  padding: 8,
  borderRadius: "50%",
  overflow: "visible",
  // Explicitly set the default value to solve a bug on IE11.
  color: (o.vars || o).palette.action.active,
  transition: o.transitions.create("background-color", {
    duration: o.transitions.duration.shortest
  })
}, !e.disableRipple && {
  "&:hover": {
    backgroundColor: o.vars ? `rgba(${o.vars.palette.action.activeChannel} / ${o.vars.palette.action.hoverOpacity})` : m.alpha(o.palette.action.active, o.palette.action.hoverOpacity),
    // Reset on touch devices, it doesn't add specificity
    "@media (hover: none)": {
      backgroundColor: "transparent"
    }
  }
}, e.edge === "start" && {
  marginLeft: e.size === "small" ? -3 : -12
}, e.edge === "end" && {
  marginRight: e.size === "small" ? -3 : -12
}), ({
  theme: o,
  ownerState: e
}) => {
  var t;
  const a = (t = (o.vars || o).palette) == null ? void 0 : t[e.color];
  return i({}, e.color === "inherit" && {
    color: "inherit"
  }, e.color !== "inherit" && e.color !== "default" && i({
    color: a == null ? void 0 : a.main
  }, !e.disableRipple && {
    "&:hover": i({}, a && {
      backgroundColor: o.vars ? `rgba(${a.mainChannel} / ${o.vars.palette.action.hoverOpacity})` : m.alpha(a.main, o.palette.action.hoverOpacity)
    }, {
      // Reset on touch devices, it doesn't add specificity
      "@media (hover: none)": {
        backgroundColor: "transparent"
      }
    })
  }), e.size === "small" && {
    padding: 5,
    fontSize: o.typography.pxToRem(18)
  }, e.size === "large" && {
    padding: 12,
    fontSize: o.typography.pxToRem(28)
  }, {
    [`&.${C.disabled}`]: {
      backgroundColor: "transparent",
      color: (o.vars || o).palette.action.disabled
    }
  });
}), E = /* @__PURE__ */ p.forwardRef(function(e, t) {
  const a = T({
    props: e,
    name: "MuiIconButton"
  }), {
    edge: s = !1,
    children: l,
    className: c,
    color: g = "default",
    disabled: d = !1,
    disableFocusRipple: u = !1,
    size: b = "medium"
  } = a, v = h(a, I), f = i({}, a, {
    edge: s,
    color: g,
    disabled: d,
    disableFocusRipple: u,
    size: b
  }), y = j(f);
  return /* @__PURE__ */ x(N, i({
    className: R(y.root, c),
    centerRipple: !0,
    focusRipple: !u,
    disabled: d,
    ref: t
  }, v, {
    ownerState: f,
    children: l
  }));
});
process.env.NODE_ENV !== "production" && (E.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: k(r.node, (o) => p.Children.toArray(o.children).some((t) => /* @__PURE__ */ p.isValidElement(t) && t.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.
   */
  classes: r.object,
  /**
   * @ignore
   */
  className: r.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).
   * @default 'default'
   */
  color: r.oneOfType([r.oneOf(["inherit", "default", "primary", "secondary", "error", "info", "success", "warning"]), r.string]),
  /**
   * If `true`, the component is disabled.
   * @default false
   */
  disabled: r.bool,
  /**
   * If `true`, the  keyboard focus ripple is disabled.
   * @default false
   */
  disableFocusRipple: r.bool,
  /**
   * If `true`, the ripple effect is disabled.
   *
   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
   * @default false
   */
  disableRipple: r.bool,
  /**
   * If given, uses a negative margin to counteract the padding on one
   * side (this is often helpful for aligning the left or right
   * side of the icon with content above or below, without ruining the border
   * size and shape).
   * @default false
   */
  edge: r.oneOf(["end", "start", !1]),
  /**
   * The size of the component.
   * `small` is equivalent to the dense button styling.
   * @default 'medium'
   */
  size: r.oneOfType([r.oneOf(["small", "medium", "large"]), r.string]),
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: r.oneOfType([r.arrayOf(r.oneOfType([r.func, r.object, r.bool])), r.func, r.object])
});
export {
  E as default
};
