import J from "./index-objectWithoutPropertiesLoose.js";
import f from "./index-extends.js";
import * as u from "react";
import l from "./index-_virtual16.js";
import { clsx as k } from "./index-clsx.js";
import { c as d } from "./index-colorManipulator2.js";
import Q from "./index-Cancel.js";
import U from "./index-styled.js";
import r, { getChipUtilityClass as X } from "./index-chipClasses.js";
import { jsx as P, jsxs as Y } from "react/jsx-runtime";
import { useDefaultProps as Z } from "./index-DefaultPropsProvider.js";
import w from "./index-useForkRef.js";
import K from "./index-ButtonBase.js";
import e from "./index-capitalize.js";
import S from "./index-composeClasses.js";
import oo from "./index-unsupportedProp2.js";
const ao = ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant", "tabIndex", "skipFocusWhenDisabled"], lo = (o) => {
  const {
    classes: a,
    disabled: s,
    size: i,
    color: t,
    iconColor: $,
    onDelete: v,
    clickable: n,
    variant: p
  } = o, C = {
    root: ["root", p, s && "disabled", `size${e(i)}`, `color${e(t)}`, n && "clickable", n && `clickableColor${e(t)}`, v && "deletable", v && `deletableColor${e(t)}`, `${p}${e(t)}`],
    label: ["label", `label${e(i)}`],
    avatar: ["avatar", `avatar${e(i)}`, `avatarColor${e(t)}`],
    icon: ["icon", `icon${e(i)}`, `iconColor${e($)}`],
    deleteIcon: ["deleteIcon", `deleteIcon${e(i)}`, `deleteIconColor${e(t)}`, `deleteIcon${e(p)}Color${e(t)}`]
  };
  return S(C, X, a);
}, ro = U("div", {
  name: "MuiChip",
  slot: "Root",
  overridesResolver: (o, a) => {
    const {
      ownerState: s
    } = o, {
      color: i,
      iconColor: t,
      clickable: $,
      onDelete: v,
      size: n,
      variant: p
    } = s;
    return [{
      [`& .${r.avatar}`]: a.avatar
    }, {
      [`& .${r.avatar}`]: a[`avatar${e(n)}`]
    }, {
      [`& .${r.avatar}`]: a[`avatarColor${e(i)}`]
    }, {
      [`& .${r.icon}`]: a.icon
    }, {
      [`& .${r.icon}`]: a[`icon${e(n)}`]
    }, {
      [`& .${r.icon}`]: a[`iconColor${e(t)}`]
    }, {
      [`& .${r.deleteIcon}`]: a.deleteIcon
    }, {
      [`& .${r.deleteIcon}`]: a[`deleteIcon${e(n)}`]
    }, {
      [`& .${r.deleteIcon}`]: a[`deleteIconColor${e(i)}`]
    }, {
      [`& .${r.deleteIcon}`]: a[`deleteIcon${e(p)}Color${e(i)}`]
    }, a.root, a[`size${e(n)}`], a[`color${e(i)}`], $ && a.clickable, $ && i !== "default" && a[`clickableColor${e(i)})`], v && a.deletable, v && i !== "default" && a[`deletableColor${e(i)}`], a[p], a[`${p}${e(i)}`]];
  }
})(({
  theme: o,
  ownerState: a
}) => {
  const s = o.palette.mode === "light" ? o.palette.grey[700] : o.palette.grey[300];
  return f({
    maxWidth: "100%",
    fontFamily: o.typography.fontFamily,
    fontSize: o.typography.pxToRem(13),
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    height: 32,
    color: (o.vars || o).palette.text.primary,
    backgroundColor: (o.vars || o).palette.action.selected,
    borderRadius: 32 / 2,
    whiteSpace: "nowrap",
    transition: o.transitions.create(["background-color", "box-shadow"]),
    // reset cursor explicitly in case ButtonBase is used
    cursor: "unset",
    // We disable the focus ring for mouse, touch and keyboard users.
    outline: 0,
    textDecoration: "none",
    border: 0,
    // Remove `button` border
    padding: 0,
    // Remove `button` padding
    verticalAlign: "middle",
    boxSizing: "border-box",
    [`&.${r.disabled}`]: {
      opacity: (o.vars || o).palette.action.disabledOpacity,
      pointerEvents: "none"
    },
    [`& .${r.avatar}`]: {
      marginLeft: 5,
      marginRight: -6,
      width: 24,
      height: 24,
      color: o.vars ? o.vars.palette.Chip.defaultAvatarColor : s,
      fontSize: o.typography.pxToRem(12)
    },
    [`& .${r.avatarColorPrimary}`]: {
      color: (o.vars || o).palette.primary.contrastText,
      backgroundColor: (o.vars || o).palette.primary.dark
    },
    [`& .${r.avatarColorSecondary}`]: {
      color: (o.vars || o).palette.secondary.contrastText,
      backgroundColor: (o.vars || o).palette.secondary.dark
    },
    [`& .${r.avatarSmall}`]: {
      marginLeft: 4,
      marginRight: -4,
      width: 18,
      height: 18,
      fontSize: o.typography.pxToRem(10)
    },
    [`& .${r.icon}`]: f({
      marginLeft: 5,
      marginRight: -6
    }, a.size === "small" && {
      fontSize: 18,
      marginLeft: 4,
      marginRight: -4
    }, a.iconColor === a.color && f({
      color: o.vars ? o.vars.palette.Chip.defaultIconColor : s
    }, a.color !== "default" && {
      color: "inherit"
    })),
    [`& .${r.deleteIcon}`]: f({
      WebkitTapHighlightColor: "transparent",
      color: o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / 0.26)` : d.alpha(o.palette.text.primary, 0.26),
      fontSize: 22,
      cursor: "pointer",
      margin: "0 5px 0 -6px",
      "&:hover": {
        color: o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / 0.4)` : d.alpha(o.palette.text.primary, 0.4)
      }
    }, a.size === "small" && {
      fontSize: 16,
      marginRight: 4,
      marginLeft: -4
    }, a.color !== "default" && {
      color: o.vars ? `rgba(${o.vars.palette[a.color].contrastTextChannel} / 0.7)` : d.alpha(o.palette[a.color].contrastText, 0.7),
      "&:hover, &:active": {
        color: (o.vars || o).palette[a.color].contrastText
      }
    })
  }, a.size === "small" && {
    height: 24
  }, a.color !== "default" && {
    backgroundColor: (o.vars || o).palette[a.color].main,
    color: (o.vars || o).palette[a.color].contrastText
  }, a.onDelete && {
    [`&.${r.focusVisible}`]: {
      backgroundColor: o.vars ? `rgba(${o.vars.palette.action.selectedChannel} / calc(${o.vars.palette.action.selectedOpacity} + ${o.vars.palette.action.focusOpacity}))` : d.alpha(o.palette.action.selected, o.palette.action.selectedOpacity + o.palette.action.focusOpacity)
    }
  }, a.onDelete && a.color !== "default" && {
    [`&.${r.focusVisible}`]: {
      backgroundColor: (o.vars || o).palette[a.color].dark
    }
  });
}, ({
  theme: o,
  ownerState: a
}) => f({}, a.clickable && {
  userSelect: "none",
  WebkitTapHighlightColor: "transparent",
  cursor: "pointer",
  "&:hover": {
    backgroundColor: o.vars ? `rgba(${o.vars.palette.action.selectedChannel} / calc(${o.vars.palette.action.selectedOpacity} + ${o.vars.palette.action.hoverOpacity}))` : d.alpha(o.palette.action.selected, o.palette.action.selectedOpacity + o.palette.action.hoverOpacity)
  },
  [`&.${r.focusVisible}`]: {
    backgroundColor: o.vars ? `rgba(${o.vars.palette.action.selectedChannel} / calc(${o.vars.palette.action.selectedOpacity} + ${o.vars.palette.action.focusOpacity}))` : d.alpha(o.palette.action.selected, o.palette.action.selectedOpacity + o.palette.action.focusOpacity)
  },
  "&:active": {
    boxShadow: (o.vars || o).shadows[1]
  }
}, a.clickable && a.color !== "default" && {
  [`&:hover, &.${r.focusVisible}`]: {
    backgroundColor: (o.vars || o).palette[a.color].dark
  }
}), ({
  theme: o,
  ownerState: a
}) => f({}, a.variant === "outlined" && {
  backgroundColor: "transparent",
  border: o.vars ? `1px solid ${o.vars.palette.Chip.defaultBorder}` : `1px solid ${o.palette.mode === "light" ? o.palette.grey[400] : o.palette.grey[700]}`,
  [`&.${r.clickable}:hover`]: {
    backgroundColor: (o.vars || o).palette.action.hover
  },
  [`&.${r.focusVisible}`]: {
    backgroundColor: (o.vars || o).palette.action.focus
  },
  [`& .${r.avatar}`]: {
    marginLeft: 4
  },
  [`& .${r.avatarSmall}`]: {
    marginLeft: 2
  },
  [`& .${r.icon}`]: {
    marginLeft: 4
  },
  [`& .${r.iconSmall}`]: {
    marginLeft: 2
  },
  [`& .${r.deleteIcon}`]: {
    marginRight: 5
  },
  [`& .${r.deleteIconSmall}`]: {
    marginRight: 3
  }
}, a.variant === "outlined" && a.color !== "default" && {
  color: (o.vars || o).palette[a.color].main,
  border: `1px solid ${o.vars ? `rgba(${o.vars.palette[a.color].mainChannel} / 0.7)` : d.alpha(o.palette[a.color].main, 0.7)}`,
  [`&.${r.clickable}:hover`]: {
    backgroundColor: o.vars ? `rgba(${o.vars.palette[a.color].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : d.alpha(o.palette[a.color].main, o.palette.action.hoverOpacity)
  },
  [`&.${r.focusVisible}`]: {
    backgroundColor: o.vars ? `rgba(${o.vars.palette[a.color].mainChannel} / ${o.vars.palette.action.focusOpacity})` : d.alpha(o.palette[a.color].main, o.palette.action.focusOpacity)
  },
  [`& .${r.deleteIcon}`]: {
    color: o.vars ? `rgba(${o.vars.palette[a.color].mainChannel} / 0.7)` : d.alpha(o.palette[a.color].main, 0.7),
    "&:hover, &:active": {
      color: (o.vars || o).palette[a.color].main
    }
  }
})), eo = U("span", {
  name: "MuiChip",
  slot: "Label",
  overridesResolver: (o, a) => {
    const {
      ownerState: s
    } = o, {
      size: i
    } = s;
    return [a.label, a[`label${e(i)}`]];
  }
})(({
  ownerState: o
}) => f({
  overflow: "hidden",
  textOverflow: "ellipsis",
  paddingLeft: 12,
  paddingRight: 12,
  whiteSpace: "nowrap"
}, o.variant === "outlined" && {
  paddingLeft: 11,
  paddingRight: 11
}, o.size === "small" && {
  paddingLeft: 8,
  paddingRight: 8
}, o.size === "small" && o.variant === "outlined" && {
  paddingLeft: 7,
  paddingRight: 7
}));
function h(o) {
  return o.key === "Backspace" || o.key === "Delete";
}
const io = /* @__PURE__ */ u.forwardRef(function(a, s) {
  const i = Z({
    props: a,
    name: "MuiChip"
  }), {
    avatar: t,
    className: $,
    clickable: v,
    color: n = "default",
    component: p,
    deleteIcon: C,
    disabled: x = !1,
    icon: y,
    label: j,
    onClick: z,
    onDelete: b,
    onKeyDown: N,
    onKeyUp: L,
    size: W = "medium",
    variant: F = "filled",
    tabIndex: M,
    skipFocusWhenDisabled: _ = !1
    // TODO v6: Rename to `focusableWhenDisabled`.
  } = i, B = J(i, ao), m = u.useRef(null), A = w(m, s), E = (c) => {
    c.stopPropagation(), b && b(c);
  }, H = (c) => {
    c.currentTarget === c.target && h(c) && c.preventDefault(), N && N(c);
  }, q = (c) => {
    c.currentTarget === c.target && (b && h(c) ? b(c) : c.key === "Escape" && m.current && m.current.blur()), L && L(c);
  }, I = v !== !1 && z ? !0 : v, O = I || b ? K : p || "div", R = f({}, i, {
    component: O,
    disabled: x,
    size: W,
    color: n,
    iconColor: /* @__PURE__ */ u.isValidElement(y) && y.props.color || n,
    onDelete: !!b,
    clickable: I,
    variant: F
  }), g = lo(R), G = O === K ? f({
    component: p || "div",
    focusVisibleClassName: g.focusVisible
  }, b && {
    disableRipple: !0
  }) : {};
  let V = null;
  b && (V = C && /* @__PURE__ */ u.isValidElement(C) ? /* @__PURE__ */ u.cloneElement(C, {
    className: k(C.props.className, g.deleteIcon),
    onClick: E
  }) : /* @__PURE__ */ P(Q, {
    className: k(g.deleteIcon),
    onClick: E
  }));
  let D = null;
  t && /* @__PURE__ */ u.isValidElement(t) && (D = /* @__PURE__ */ u.cloneElement(t, {
    className: k(g.avatar, t.props.className)
  }));
  let T = null;
  return y && /* @__PURE__ */ u.isValidElement(y) && (T = /* @__PURE__ */ u.cloneElement(y, {
    className: k(g.icon, y.props.className)
  })), process.env.NODE_ENV, /* @__PURE__ */ Y(ro, f({
    as: O,
    className: k(g.root, $),
    disabled: I && x ? !0 : void 0,
    onClick: z,
    onKeyDown: H,
    onKeyUp: q,
    ref: A,
    tabIndex: _ && x ? -1 : M,
    ownerState: R
  }, G, B, {
    children: [D || T, /* @__PURE__ */ P(eo, {
      className: k(g.label),
      ownerState: R,
      children: j
    }), V]
  }));
});
process.env.NODE_ENV !== "production" && (io.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * The Avatar element to display.
   */
  avatar: l.element,
  /**
   * This prop isn't supported.
   * Use the `component` prop if you need to change the children structure.
   */
  children: oo,
  /**
   * Override or extend the styles applied to the component.
   */
  classes: l.object,
  /**
   * @ignore
   */
  className: l.string,
  /**
   * If `true`, the chip will appear clickable, and will raise when pressed,
   * even if the onClick prop is not defined.
   * If `false`, the chip will not appear clickable, even if onClick prop is defined.
   * This can be used, for example,
   * along with the component prop to indicate an anchor Chip is clickable.
   * Note: this controls the UI and does not affect the onClick event.
   */
  clickable: l.bool,
  /**
   * 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: l.oneOfType([l.oneOf(["default", "primary", "secondary", "error", "info", "success", "warning"]), l.string]),
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: l.elementType,
  /**
   * Override the default delete icon element. Shown only if `onDelete` is set.
   */
  deleteIcon: l.element,
  /**
   * If `true`, the component is disabled.
   * @default false
   */
  disabled: l.bool,
  /**
   * Icon element.
   */
  icon: l.element,
  /**
   * The content of the component.
   */
  label: l.node,
  /**
   * @ignore
   */
  onClick: l.func,
  /**
   * Callback fired when the delete icon is clicked.
   * If set, the delete icon will be shown.
   */
  onDelete: l.func,
  /**
   * @ignore
   */
  onKeyDown: l.func,
  /**
   * @ignore
   */
  onKeyUp: l.func,
  /**
   * The size of the component.
   * @default 'medium'
   */
  size: l.oneOfType([l.oneOf(["medium", "small"]), l.string]),
  /**
   * If `true`, allows the disabled chip to escape focus.
   * If `false`, allows the disabled chip to receive focus.
   * @default false
   */
  skipFocusWhenDisabled: l.bool,
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: l.oneOfType([l.arrayOf(l.oneOfType([l.func, l.object, l.bool])), l.func, l.object]),
  /**
   * @ignore
   */
  tabIndex: l.number,
  /**
   * The variant to use.
   * @default 'filled'
   */
  variant: l.oneOfType([l.oneOf(["filled", "outlined"]), l.string])
});
export {
  io as default
};
