import E from "./index-objectWithoutPropertiesLoose.js";
import u from "./index-extends.js";
import * as p from "react";
import e from "./index-_virtual16.js";
import { clsx as T } from "./index-clsx.js";
import _ from "./index-styled.js";
import a, { getTabUtilityClass as D } from "./index-tabClasses.js";
import { jsxs as C } from "react/jsx-runtime";
import { useDefaultProps as H } from "./index-DefaultPropsProvider.js";
import R from "./index-capitalize.js";
import I from "./index-composeClasses.js";
import z from "./index-ButtonBase.js";
import L from "./index-unsupportedProp2.js";
const M = ["className", "disabled", "disableFocusRipple", "fullWidth", "icon", "iconPosition", "indicator", "label", "onChange", "onClick", "onFocus", "selected", "selectionFollowsFocus", "textColor", "value", "wrapped"], U = (i) => {
  const {
    classes: o,
    textColor: l,
    fullWidth: s,
    wrapped: x,
    icon: d,
    label: f,
    selected: g,
    disabled: t
  } = i, r = {
    root: ["root", d && f && "labelIcon", `textColor${R(l)}`, s && "fullWidth", x && "wrapped", g && "selected", t && "disabled"],
    iconWrapper: ["iconWrapper"]
  };
  return I(r, D, o);
}, V = _(z, {
  name: "MuiTab",
  slot: "Root",
  overridesResolver: (i, o) => {
    const {
      ownerState: l
    } = i;
    return [o.root, l.label && l.icon && o.labelIcon, o[`textColor${R(l.textColor)}`], l.fullWidth && o.fullWidth, l.wrapped && o.wrapped, {
      [`& .${a.iconWrapper}`]: o.iconWrapper
    }];
  }
})(({
  theme: i,
  ownerState: o
}) => u({}, i.typography.button, {
  maxWidth: 360,
  minWidth: 90,
  position: "relative",
  minHeight: 48,
  flexShrink: 0,
  padding: "12px 16px",
  overflow: "hidden",
  whiteSpace: "normal",
  textAlign: "center"
}, o.label && {
  flexDirection: o.iconPosition === "top" || o.iconPosition === "bottom" ? "column" : "row"
}, {
  lineHeight: 1.25
}, o.icon && o.label && {
  minHeight: 72,
  paddingTop: 9,
  paddingBottom: 9,
  [`& > .${a.iconWrapper}`]: u({}, o.iconPosition === "top" && {
    marginBottom: 6
  }, o.iconPosition === "bottom" && {
    marginTop: 6
  }, o.iconPosition === "start" && {
    marginRight: i.spacing(1)
  }, o.iconPosition === "end" && {
    marginLeft: i.spacing(1)
  })
}, o.textColor === "inherit" && {
  color: "inherit",
  opacity: 0.6,
  // same opacity as theme.palette.text.secondary
  [`&.${a.selected}`]: {
    opacity: 1
  },
  [`&.${a.disabled}`]: {
    opacity: (i.vars || i).palette.action.disabledOpacity
  }
}, o.textColor === "primary" && {
  color: (i.vars || i).palette.text.secondary,
  [`&.${a.selected}`]: {
    color: (i.vars || i).palette.primary.main
  },
  [`&.${a.disabled}`]: {
    color: (i.vars || i).palette.text.disabled
  }
}, o.textColor === "secondary" && {
  color: (i.vars || i).palette.text.secondary,
  [`&.${a.selected}`]: {
    color: (i.vars || i).palette.secondary.main
  },
  [`&.${a.disabled}`]: {
    color: (i.vars || i).palette.text.disabled
  }
}, o.fullWidth && {
  flexShrink: 1,
  flexGrow: 1,
  flexBasis: 0,
  maxWidth: "none"
}, o.wrapped && {
  fontSize: i.typography.pxToRem(12)
})), A = /* @__PURE__ */ p.forwardRef(function(o, l) {
  const s = H({
    props: o,
    name: "MuiTab"
  }), {
    className: x,
    disabled: d = !1,
    disableFocusRipple: f = !1,
    // eslint-disable-next-line react/prop-types
    fullWidth: g,
    icon: t,
    iconPosition: r = "top",
    // eslint-disable-next-line react/prop-types
    indicator: $,
    label: b,
    onChange: m,
    onClick: y,
    onFocus: h,
    // eslint-disable-next-line react/prop-types
    selected: n,
    // eslint-disable-next-line react/prop-types
    selectionFollowsFocus: N,
    // eslint-disable-next-line react/prop-types
    textColor: k = "inherit",
    value: W,
    wrapped: O = !1
  } = s, j = E(s, M), v = u({}, s, {
    disabled: d,
    disableFocusRipple: f,
    selected: n,
    icon: !!t,
    iconPosition: r,
    label: !!b,
    fullWidth: g,
    textColor: k,
    wrapped: O
  }), F = U(v), P = t && b && /* @__PURE__ */ p.isValidElement(t) ? /* @__PURE__ */ p.cloneElement(t, {
    className: T(F.iconWrapper, t.props.className)
  }) : t, w = (c) => {
    !n && m && m(c, W), y && y(c);
  }, B = (c) => {
    N && !n && m && m(c, W), h && h(c);
  };
  return /* @__PURE__ */ C(V, u({
    focusRipple: !f,
    className: T(F.root, x),
    ref: l,
    role: "tab",
    "aria-selected": n,
    disabled: d,
    onClick: w,
    onFocus: B,
    ownerState: v,
    tabIndex: n ? 0 : -1
  }, j, {
    children: [r === "top" || r === "start" ? /* @__PURE__ */ C(p.Fragment, {
      children: [P, b]
    }) : /* @__PURE__ */ C(p.Fragment, {
      children: [b, P]
    }), $]
  }));
});
process.env.NODE_ENV !== "production" && (A.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * This prop isn't supported.
   * Use the `component` prop if you need to change the children structure.
   */
  children: L,
  /**
   * Override or extend the styles applied to the component.
   */
  classes: e.object,
  /**
   * @ignore
   */
  className: 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,
  /**
   * The icon to display.
   */
  icon: e.oneOfType([e.element, e.string]),
  /**
   * The position of the icon relative to the label.
   * @default 'top'
   */
  iconPosition: e.oneOf(["bottom", "end", "start", "top"]),
  /**
   * The label element.
   */
  label: e.node,
  /**
   * @ignore
   */
  onChange: e.func,
  /**
   * @ignore
   */
  onClick: e.func,
  /**
   * @ignore
   */
  onFocus: e.func,
  /**
   * 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]),
  /**
   * You can provide your own value. Otherwise, we fallback to the child position index.
   */
  value: e.any,
  /**
   * Tab labels appear in a single row.
   * They can use a second line if needed.
   * @default false
   */
  wrapped: e.bool
});
export {
  A as default
};
