import x from "./index-objectWithoutPropertiesLoose.js";
import i from "./index-extends.js";
import * as v from "react";
import e from "./index-_virtual16.js";
import { clsx as D } from "./index-clsx.js";
import F from "./index-styled.js";
import O, { getToggleButtonUtilityClass as G } from "./index-toggleButtonClasses.js";
import V from "./index-ToggleButtonGroupContext.js";
import E from "./index-ToggleButtonGroupButtonContext.js";
import M from "./index-isValueSelected.js";
import { jsx as U } from "react/jsx-runtime";
import h from "./index-resolveProps.js";
import { useDefaultProps as q } from "./index-DefaultPropsProvider.js";
import R from "./index-capitalize.js";
import L from "./index-composeClasses.js";
import A from "./index-ButtonBase.js";
import { alpha as l } from "./index-colorManipulator.js";
const H = ["value"], I = ["children", "className", "color", "disabled", "disableFocusRipple", "fullWidth", "onChange", "onClick", "selected", "size", "value"], J = (o) => {
  const {
    classes: t,
    fullWidth: a,
    selected: r,
    disabled: n,
    size: s,
    color: c
  } = o, p = {
    root: ["root", r && "selected", n && "disabled", a && "fullWidth", `size${R(s)}`, c]
  };
  return L(p, G, t);
}, K = F(A, {
  name: "MuiToggleButton",
  slot: "Root",
  overridesResolver: (o, t) => {
    const {
      ownerState: a
    } = o;
    return [t.root, t[`size${R(a.size)}`]];
  }
})(({
  theme: o,
  ownerState: t
}) => {
  let a = t.color === "standard" ? o.palette.text.primary : o.palette[t.color].main, r;
  return o.vars && (a = t.color === "standard" ? o.vars.palette.text.primary : o.vars.palette[t.color].main, r = t.color === "standard" ? o.vars.palette.text.primaryChannel : o.vars.palette[t.color].mainChannel), i({}, o.typography.button, {
    borderRadius: (o.vars || o).shape.borderRadius,
    padding: 11,
    border: `1px solid ${(o.vars || o).palette.divider}`,
    color: (o.vars || o).palette.action.active
  }, t.fullWidth && {
    width: "100%"
  }, {
    [`&.${O.disabled}`]: {
      color: (o.vars || o).palette.action.disabled,
      border: `1px solid ${(o.vars || o).palette.action.disabledBackground}`
    },
    "&:hover": {
      textDecoration: "none",
      // Reset on mouse devices
      backgroundColor: o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : l(o.palette.text.primary, o.palette.action.hoverOpacity),
      "@media (hover: none)": {
        backgroundColor: "transparent"
      }
    },
    [`&.${O.selected}`]: {
      color: a,
      backgroundColor: o.vars ? `rgba(${r} / ${o.vars.palette.action.selectedOpacity})` : l(a, o.palette.action.selectedOpacity),
      "&:hover": {
        backgroundColor: o.vars ? `rgba(${r} / calc(${o.vars.palette.action.selectedOpacity} + ${o.vars.palette.action.hoverOpacity}))` : l(a, o.palette.action.selectedOpacity + o.palette.action.hoverOpacity),
        // Reset on touch devices, it doesn't add specificity
        "@media (hover: none)": {
          backgroundColor: o.vars ? `rgba(${r} / ${o.vars.palette.action.selectedOpacity})` : l(a, o.palette.action.selectedOpacity)
        }
      }
    }
  }, t.size === "small" && {
    padding: 7,
    fontSize: o.typography.pxToRem(13)
  }, t.size === "large" && {
    padding: 15,
    fontSize: o.typography.pxToRem(15)
  });
}), Q = /* @__PURE__ */ v.forwardRef(function(t, a) {
  const r = v.useContext(V), {
    value: n
  } = r, s = x(r, H), c = v.useContext(E), p = h(i({}, s, {
    selected: M(t.value, n)
  }), t), d = q({
    props: p,
    name: "MuiToggleButton"
  }), {
    children: T,
    className: $,
    color: B = "standard",
    disabled: b = !1,
    disableFocusRipple: y = !1,
    fullWidth: z = !1,
    onChange: u,
    onClick: C,
    selected: k,
    size: N = "medium",
    value: f
  } = d, P = x(d, I), m = i({}, d, {
    color: B,
    disabled: b,
    disableFocusRipple: y,
    fullWidth: z,
    size: N
  }), W = J(m), _ = (g) => {
    C && (C(g, f), g.defaultPrevented) || u && u(g, f);
  }, j = c || "";
  return /* @__PURE__ */ U(K, i({
    className: D(s.className, W.root, $, j),
    disabled: b,
    focusRipple: !y,
    ref: a,
    onClick: _,
    onChange: u,
    value: f,
    ownerState: m,
    "aria-pressed": k
  }, P, {
    children: T
  }));
});
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`.     │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * The content of the component.
   */
  children: e.node,
  /**
   * Override or extend the styles applied to the component.
   */
  classes: e.object,
  /**
   * @ignore
   */
  className: e.string,
  /**
   * The color of the button when it is in an active state.
   * 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 'standard'
   */
  color: e.oneOfType([e.oneOf(["standard", "primary", "secondary", "error", "info", "success", "warning"]), e.string]),
  /**
   * If `true`, the component is disabled.
   * @default false
   */
  disabled: e.bool,
  /**
   * If `true`, the  keyboard focus ripple is disabled.
   * @default false
   */
  disableFocusRipple: e.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: e.bool,
  /**
   * If `true`, the button will take up the full width of its container.
   * @default false
   */
  fullWidth: e.bool,
  /**
   * Callback fired when the state changes.
   *
   * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
   * @param {any} value of the selected button.
   */
  onChange: e.func,
  /**
   * Callback fired when the button is clicked.
   *
   * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
   * @param {any} value of the selected button.
   */
  onClick: e.func,
  /**
   * If `true`, the button is rendered in an active state.
   */
  selected: e.bool,
  /**
   * The size of the component.
   * The prop defaults to the value inherited from the parent ToggleButtonGroup component.
   * @default 'medium'
   */
  size: e.oneOfType([e.oneOf(["small", "medium", "large"]), e.string]),
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
  /**
   * The value to associate with the button when selected in a
   * ToggleButtonGroup.
   */
  value: e.any.isRequired
});
export {
  Q as default
};
