import S from "./index-extends.js";
import z from "./index-objectWithoutPropertiesLoose.js";
import * as x from "react";
import o from "./index-_virtual16.js";
import { clsx as b } from "./index-clsx.js";
import w from "./index-styled.js";
import { getSvgIconUtilityClass as T } from "./index-svgIconClasses.js";
import { jsxs as C, jsx as R } from "react/jsx-runtime";
import { useDefaultProps as O } from "./index-DefaultPropsProvider.js";
import g from "./index-capitalize.js";
import B from "./index-composeClasses.js";
const I = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"], N = (e) => {
  const {
    color: t,
    fontSize: i,
    classes: r
  } = e, n = {
    root: ["root", t !== "inherit" && `color${g(t)}`, `fontSize${g(i)}`]
  };
  return B(n, T, r);
}, j = w("svg", {
  name: "MuiSvgIcon",
  slot: "Root",
  overridesResolver: (e, t) => {
    const {
      ownerState: i
    } = e;
    return [t.root, i.color !== "inherit" && t[`color${g(i.color)}`], t[`fontSize${g(i.fontSize)}`]];
  }
})(({
  theme: e,
  ownerState: t
}) => {
  var i, r, n, m, f, c, h, d, u, s, a, p, l;
  return {
    userSelect: "none",
    width: "1em",
    height: "1em",
    display: "inline-block",
    // the <svg> will define the property that has `currentColor`
    // for example heroicons uses fill="none" and stroke="currentColor"
    fill: t.hasSvgAsChild ? void 0 : "currentColor",
    flexShrink: 0,
    transition: (i = e.transitions) == null || (r = i.create) == null ? void 0 : r.call(i, "fill", {
      duration: (n = e.transitions) == null || (n = n.duration) == null ? void 0 : n.shorter
    }),
    fontSize: {
      inherit: "inherit",
      small: ((m = e.typography) == null || (f = m.pxToRem) == null ? void 0 : f.call(m, 20)) || "1.25rem",
      medium: ((c = e.typography) == null || (h = c.pxToRem) == null ? void 0 : h.call(c, 24)) || "1.5rem",
      large: ((d = e.typography) == null || (u = d.pxToRem) == null ? void 0 : u.call(d, 35)) || "2.1875rem"
    }[t.fontSize],
    // TODO v5 deprecate, v6 remove for sx
    color: (s = (a = (e.vars || e).palette) == null || (a = a[t.color]) == null ? void 0 : a.main) != null ? s : {
      action: (p = (e.vars || e).palette) == null || (p = p.action) == null ? void 0 : p.active,
      disabled: (l = (e.vars || e).palette) == null || (l = l.action) == null ? void 0 : l.disabled,
      inherit: void 0
    }[t.color]
  };
}), $ = /* @__PURE__ */ x.forwardRef(function(t, i) {
  const r = O({
    props: t,
    name: "MuiSvgIcon"
  }), {
    children: n,
    className: m,
    color: f = "inherit",
    component: c = "svg",
    fontSize: h = "medium",
    htmlColor: d,
    inheritViewBox: u = !1,
    titleAccess: s,
    viewBox: a = "0 0 24 24"
  } = r, p = z(r, I), l = /* @__PURE__ */ x.isValidElement(n) && n.type === "svg", v = S({}, r, {
    color: f,
    component: c,
    fontSize: h,
    instanceFontSize: t.fontSize,
    inheritViewBox: u,
    viewBox: a,
    hasSvgAsChild: l
  }), y = {};
  u || (y.viewBox = a);
  const _ = N(v);
  return /* @__PURE__ */ C(j, S({
    as: c,
    className: b(_.root, m),
    focusable: "false",
    color: d,
    "aria-hidden": s ? void 0 : !0,
    role: s ? "img" : void 0,
    ref: i
  }, y, p, l && n.props, {
    ownerState: v,
    children: [l ? n.props.children : n, s ? /* @__PURE__ */ R("title", {
      children: s
    }) : null]
  }));
});
process.env.NODE_ENV !== "production" && ($.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * Node passed into the SVG element.
   */
  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).
   * You can use the `htmlColor` prop to apply a color attribute to the SVG element.
   * @default 'inherit'
   */
  color: o.oneOfType([o.oneOf(["inherit", "action", "disabled", "primary", "secondary", "error", "info", "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,
  /**
   * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
   * @default 'medium'
   */
  fontSize: o.oneOfType([o.oneOf(["inherit", "large", "medium", "small"]), o.string]),
  /**
   * Applies a color attribute to the SVG element.
   */
  htmlColor: o.string,
  /**
   * If `true`, the root node will inherit the custom `component`'s viewBox and the `viewBox`
   * prop will be ignored.
   * Useful when you want to reference a custom `component` and have `SvgIcon` pass that
   * `component`'s viewBox to the root node.
   * @default false
   */
  inheritViewBox: o.bool,
  /**
   * The shape-rendering attribute. The behavior of the different options is described on the
   * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering).
   * If you are having issues with blurry icons you should investigate this prop.
   */
  shapeRendering: 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]),
  /**
   * Provides a human-readable title for the element that contains it.
   * https://www.w3.org/TR/SVG-access/#Equivalent
   */
  titleAccess: o.string,
  /**
   * Allows you to redefine what the coordinates without units mean inside an SVG element.
   * For example, if the SVG element is 500 (width) by 200 (height),
   * and you pass viewBox="0 0 50 20",
   * this means that the coordinates inside the SVG will go from the top left corner (0,0)
   * to bottom right (50,20) and each unit will be worth 10px.
   * @default '0 0 24 24'
   */
  viewBox: o.string
});
$.muiName = "SvgIcon";
export {
  $ as default
};
